JQuery 初次体验

JavaScript 与 JQuery的关系

jQuery是JavaScript库中的一种,JavaScript库也可以叫JavaScript函数库
封装了很多js代码的一个js文件就是一个库。 Prototype、YUI(网络反响一般)、Dojo、ExtJS、jQuery等 都是JS库

jQuery 优点

写的少做的多,体积小,功能强大,链式编程,隐式迭代.插件丰富,开源,免费,兼容性强

jQuery的js文件

jquery-1.12.1.js      //正常的代码文件
jquery-1.12.1.min.js  //压缩的代码文件，上线的时候使用压缩的

//线上CDN
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

JQuery中的顶级对象

JQuery -- 可以用$符号来代替
JQuery 的JS文件中的所有的东西都是jQuery或者都是$符号下的

• 如果想要使用jQuery中的属性或者方法,那么需要 jQuery.属性、jQuery.xxx() 来使用
• 简单的写法: $.属性 $.方法
• 大多数情况下,jQuery中几乎都是方法,属性很少
• JQuery中几乎把DOM中的事件都封装成了一个方法,在jQuery中几乎是把on去掉,然后变成方法了

//jQuery中注册事件
$("选择器").click(匿名函数);

//DOM中注册事件
document.getElementById("id属性值").onclick=匿名函数;

• 浏览器中的顶级对象:window,浏览器中和页面中所有的东西都是window的
• 页面中的顶级对象:document,页面中某些东西是document

jquery加载

JS DOM中页面加载事件

window.onload = function () {
  console.log("好帅");
};

window.onload = function () {
  console.log("哈哈,我又变帅了");
};

/* 
哈哈,我又变帅了
*/

⚠️注意: 页面全部加载完毕才触发(标签,文字,图片,引入的文件)

JQuery中页面加载的事件

// 方法1
$(window).load(function () {
  console.log("第1种页面加载的事件");
});

// 方法2
// 这种采用的事件比方法1快，页面中的基本的元素加载后就触发
$(document).ready(function () {
  console.log("第2种页面加载的事件");
});

// 方法3
// 页面中基本的元素加载后就触发了
jQuery(function () {
  console.log("第3种页面加载的事件");
});

//简写
$(function(){ })

window.onload 和 $(function) 区别

• window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
• $(function) 可以定义多次的

jQuery对象和DOM对象互转的问题

jq -> js
jq对象[索引] 或者 jq对象.get(索引)

js -> jq
$(js对象)



<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.js"></script>
<button id="btn">按钮</button>
<script>
  var btn = document.getElementById("btn");
  // DOM对象转jQuery对象
  $(btn).click(function () {
    alert("JQ注册点击事件");
  });
  // //错误的
  // btn.click(function () {
  //   alert("哈哈,小苏太帅了");
  // });


  //jQuery对象转DOM对象
  var btn2 = $("#btn");
  btn2[0].onclick = function () {
    alert("哈哈,我又变帅了");
  };
  // //错误的
  // btn2.onclick = function () {
  //   console.log("助教比小杨帅");
  // };
</script>

为什么要把DOM对象转jQuery对象,为什么又把jQuery对象转DOM对象?

• DOM操作很麻烦(兼容,一个功能写好多代码) -> 转jQuery对象,操作简单(使用jQuery中的方法或属性),不需要写兼容，
• jQuery操作中有一些兼容没封装在jQuery中,转DOM对象,通过原生的js代码实现功能,如果后面都解决了,又想简单的写代码操作内容,再转回jQuery对象

⚠️注意: DOM对象调用jQuery的方法不能实现,必须是jQuery对象调用jQuery的方法

开关灯案例

DOM版本

<input type="button" id="btn" value="开灯">
<style>.cls{background-color: black;}</style>
<script>
  document.getElementById("btn").onclick = function () {
    var body = document.body;
    if (body.className == "cls") {
      body.className = "";
      this.value = "关灯";
    } else {
      body.className = "cls";
      this.value = "开灯";
    }
  };
</script>

JQ版本

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="btn" value="开灯">
<style>
  .cls { background-color: black; }
</style>
<script>

  //方法1 
  // $("#btn").click(function () {
  //   if ($(this).val() == "开灯") {
  //     $("body").css("background-color", "black");
  //     $(this).val("关灯");
  //   } else {
  //     $("body").css("background-color", "gray");
  //     $(this).val("开灯");
  //   }
  // })

  //方法2
  $("#btn").click(function () {
    $("body").hasClass("cls") ? $(this).val("开灯") : $(this).val("关灯")
    $("body").hasClass("cls") ? $("body").removeClass("cls") : $("body").addClass("cls")
  });
</script>