jQuery系统教程

本篇文章是在完整学习 jQuery 以后，系统整理的教程，大纲如下

• jQuery 的核心函数 $, jQuery
• 操作 jQuery 集合
• 操作 DOM 元素的属性和类属性
• 操作样式
• 操作 DOM 元素(添加，删除…)
• jQuery 事件
• jQuery 显示与隐藏
• jQuery 动画
• jQuery 扩展及实用函数
• Ajax

jQuery核心函数

jQuery 这个库中最重要的就是它提供的核心函数 jQuery() ，它提供了非常强大的功能，因为这个函数用的十分的频繁，所以提供了 jQuery() 的别名，那就是 $() ，在后面的演示中都将会以 $ 为例，现在我们来看一下该核心函数提供了哪些功能

• 选择多个 DOM 元素
• 将 HTML 字符串得解析为一个 DOM 元素
• 作为入口函数
• 将 DOM 元素转换为 jQuery 集合

上面有些名词可能没有听过，这里只是感性了解一下，下面就具体讲解。

选择元素

考虑下面的 DOM 结构

<div id="box"></div>
<div class="container"></div>
<p></p>

如果使用原生的 JavaScript 选择上面的元素的写法如下

document.getElementById("box");
document.getElementsByClassName("container")[0];
document.getElementsByTagName("p")[0];

而现在使用 $() 函数，为其传入 CSS 的选择器即可选中元素

$("#box");
$(".container");
$("p");

使用 $() 得到的是一个集合，即使使用了 id 选择器 #box ，得到也是一个只有一个元素的集合，如下

我们把它称为 jQuery 对象或者 jQuery 集合，在下面我将不会区分二者，可能会混合使用，请注意。由上可见， jQuery 对象的结构像是一个数组，但它不是真正的数组，因为他不是 Array 的实例，只是使用对象来模拟数组， jQuery 对象中的元素(借用数组的概念)是被选择的 DOM 元素。 jQuery 的核心函数支持几乎所有的 CSS 选择器，如

• 属性选择器

  input[value] /* 选择有 value 属性的 input 标签 */
  input[type='text'] /* 选择 type 为 text 的 input 标签 */
  a[href^='http://'] /* 选择 href 以 http:// 开头的 a 标签 */
  a[href$='pdf'] /* 选择 href 以 pdf 结尾的 a 标签 */
  a[href*='jquery'] /* 选择 href 属性包含 jquery 的 a 标签 */
  

• 伪类选择器

  a:first
  p:odd
  p:even
  ul li:last-child
  

• 过滤器

  :animated /* 处于动画状态的元素 */
  :checkbox /* 相当于 input[type='chexkbox'] */
  :checked /* 选择处于选中状态的多选框或单选框 */
  :disabled
  ...
  

• …

选择器十分的多，由于重点不在于选择器，另外这个也没有什么原理可讲，也就是 API 的使用，随着使用 jQuery 的增多，自然会掌握，所以这里就点到即止。

将 HTML 字符串转化为 jQuery 对象

这里首先解释一下什么叫做 HTML 字符串，不给出具体的定义，很好理解，形如下面的字符串就叫做 HTML 字符串

"<p>123</p>"
"<h1>一级标题</h1>"

当我们向 jQuery 的核心函数传递这样的字符串时，核心函数会将该字符串解析得到一个 jQuery 对象，如

作为入口函数

因为我们一般会在 JavaScript 中操作 DOM ，所以我们一般会等到 DOM 树渲染完毕之后再去执行 JavaScript 代码，所以我们一般把 script 标签放在 body 元素的最后面，或者将代码放在 window.onload 中，如下

window.onload = function() {
   
    // 要执行的代码
}

onload 方法会在 DOM 树渲染完毕，并且外部资源如图片等等加载完毕后会执行，虽然能够满足我们的需求，但是在等待静态资源加载的时候，用户是不能与页面进行交互的，这时用户就会感觉页面卡死了，体验感十分不好。我们只是希望在 DOM 树渲染完毕后就执行代码，那么可以使用 ready() 函数，如下

$(document).ready(function() {
   
    // 要执行的代码
})

这里要执行的代码在 DOM 树渲染完毕后即可执行，而不必等到资源加载完毕。上面的写法可以简写为

$(function() {
   
    // 要执行的代码
})

将 DOM 元素转化为 jQuery 对象

为核心函数传入 DOM 元素，会返回一个 jQuery对象，该对象包含了这个 DOM 元素，如下

将 DOM 元素转化为 jQuery 对象可以使用 jQuery 对象原型上的方法，这些方法想较于原生方法方便很多。

如何将 jQuery 对象转化为DOM元素呢? 我们知道 jQuery 对象的结构是类似于数组，其中的每一个元素都是 DOM 对象，我们可以使用下标的方式获取 DOM 元素，如下两种方法都是可以的

• jQuery对象[index]
• jQuery对象.get(index)，该方法可以接受负数，表示倒数

操作 jQuery 集合

在本节会使用 jQuery 集合这一叫法，因为往里面添加元素或者删除元素等等操作，集合的叫法比对象的叫法更加的符合。如果不做说明，下面操作的DOM为以下

<div id="box"></div>
<div class="container"></div>
<p></p>

添加元素

使用 jQuery 集合调用 add 方法为集合添加元素， add 方法可以接收不同类型的参数，如下

• jQuery 选择器：将与 jQuery 选择器匹配的所有 DOM 元素添加到集合中
• DOM 元素或 DOM 元素组成的数组：将 DOM 元素或数组中的元素添加到集合中
• HTML 字符串：将 HTML 字符串解析为 DOM 元素后添加到集合中

该方法会返回一个新的 jQuery 集合，例子如下

let collection = $("#box");
collection = collection.add(".container"); // 添加一个 jQuery 选择器
collection = collection.add(document.getElementsByTagName("p")[0]); // 添加一个 DOM 元素
collection = collection.add("<h1>123</h1>"); // 添加一个 HTML 字符串
console.dir(collection);

过滤元素

过滤集合中的元素有两种方法，一个是 not，一个是 filter，两个方法的侧重点不同， not 方法会删除掉集合中符合条件的元素，返回新集合；而 filter 的语义是保留集合中符合条件的元素，返回一个新集合。二者接收的参数同 add 方法一样，除此之外，还可以接受一个函数，集合中的每一个元会素调用该函数，根据函数的返回值来决定元素的去留，比如对于 not 方法，如果函数返回 true，则删除此元素，对于 filter 则相反，如果返回 true，则保留此元素。这些传入的函数中的上下文(也就是 this)指向调用该函数的元素。

let collection = $("#box");
collection = collection.add(".container"); // 添加一个 jQuery 选择器
collection = collection.add(document.getElementsByTagName("p")[0]); // 添加一个 DOM 元素
collection = collection.add("<h1>123</h1>"); // 添加一个 HTML 字符串
collection = collection.not(function() {
   
    return $(this).html() === "123"; // 删除掉 html 内容为 123 的，也就是 h1 标签
})
console.dir(collection);

根据上面的代码，此时集合中只有三个元素，将 h1 元素滤除了

let collection = $("#box");
collection = collection.add(".container"); // 添加一个 jQuery 选择器
collection = collection.add(document.getElementsByTagName("p")[0]); // 添加一个 DOM 元素
collection = collection.add(