jQuery 基础（一）

笔记视频：https://www.bilibili.com/video/BV1pt411H7D6

中文文档：https://jquery.cuishifeng.cn/index.html

原生 JS 与 jQuery 的对比

• 原生 JS 不能添加多个入口函数（window.onload），后面的会把前面的给覆盖
• 原生 JS 的 api 名字太长太难记
• 原生 JS 有的时候代码会冗余
• 原生 JS 有些属性或方法有浏览器兼容问题
• 原生 JS 容错率比较低，前面的代码出了问题，后面的代码执行不了
• 原生 JS 给同一个元素注册同类型的事件，后面的会把前面的覆盖

基本使用

• 引入 jQuery 文件（下载 jQuery）
• 写一个入口函数

<script src="jquery.js"></script>
<script>
  $(document).ready(function () {
    ...
  });
</script>

版本区别

• 1.x 支持旧版浏览器，已经停止更新了
• 2.x 不支持旧版浏览器的，已经停止更新了
• 3.x 不支持旧版浏览器，还在更新

jQuery 入口函数与 window.onload 区别

jQuery 还有第二种入口函数的写法

$(function() {
  ...
})

区别：

• window.onload 不能写多个，但是 jQuery 的入口函数可以写多个
• jQuery 的入口函数执行要快于 window.onload
  • jQuery 入口函数要等待 dom 数据加载完成后执行
  • window.onload 要等待页面上的所有资源（dom 树/js资源/图片/外部css）全部加载完成后执行

$ 函数

如果参数传递的是一个匿名函数，就相当于入口函数

$(function () {
  ...
});

如果参数传递的是一个字符串，则相当于选择器

$('#id');

如果参数传递的是一个标签，则会创建该元素，如果要在页面上显示，就要追加

$('<div>我是一个 div</div>');

如果参数传递的是一个 dom 对象，则会把该 dom 对象转换成 jQuery 对象

$(dom对象);

dom 对象

dom 对象是原生 js 选择器获取到的对象，只能调用原生方法或者属性，不能调用 jQuery 的属性或者方法

var div = document.getElementById("one");
div.css('backgroundColor', 'green'); // 会报错

jQuery 对象

利用 jQuery 选择器获取到的对象，只能调用 jQuery 方法或者属性，不能调用原生 js 的属性或者方法

为了保持良好的代码规范，所有用来保存 jQuery 对象的变量都使用 $ 开关命名

var $div = $('#one');

$div.style.backgroundColor = 'red'; // 会报错

jQuery 是一个伪数组，jQuery 对象相当于是 dom 对象的一个包装集

将 jQuery 对象转换成 dom 对象有两种方法：

• 当使用下标来取出 dom 元素
  

  var $divs = $('div');
  var div1 = $divs[0];
  

• 使用 get() 方法

  var $divs = $('div');
  var div1 = $divs.get(1);
  

查看版本

• jQuery.fn.jquery
• jQuery.prototype.jquery
• $.fn.jquery
• $.prototype.jquery

多库共存

哪个 jQuery 文件后引入 ，使用的就是哪个文件

可以通过 noConflict() 将 $ 控制权给释放

<script src="jquery-1.12.4.js"></script>
<script src="jquery-3.0.0.js"></script>
<script>
  $.noConflict(); // 3.0.0 版本文件把 $ 符号的控制权释放了

  console.log(jQuery.fn.jquery); // 3.0.0
  console.log($.fn.jquery); // 1.12.4
</script>

noConflict() 函数返回值，通过重新命名可以替代 $

<script src="jquery-1.12.4.js"></script>
<script src="jquery-3.0.0.js"></script>
<script>
  var = _$ = $.noConflict();

  console.log(_$.fn.jquery); // 3.0.0
</script>

当修改了 $ 时，之前写的代码用的还是 $ 时，如果全部修改会很麻烦

var = _$ = $.noConflict();

(function ($) {
  // 里面的代码照常可以使用 $
})(_$)

$ 控制权可以依次释放（当文件2个甚至3个4个），从而达到多库共存的效果

基本选择器

层级选择器

过滤选择器

筛选选择器

筛选选择器的功能与过滤选择器有点类似，但用法不一样，筛选选择器主要是方法