jQuery 基础

jQuery 简介

JavaScript 的核心 API 设计的很简单，但是由于浏览器之间的不兼容性，导致客户端的 API 过于复杂。不过，使用 JavaScript 框架或工具类库，能简化通用操作，隐藏浏览器之间的差异，从而使得 Web 应用的开发变得简单，比如 jQuery。

jQuery 类库定义了一个全局函数：jQuery()，该函数使用频繁，因此在类库中海给它定义了一个快捷别名：$，这是 jQuery 在全局命名空间唯一的两个变量。

这个全局函数是 jQuery 的核心查询方法，该方法返回的值是一个或多个 DOM 元素，也就是 jQuery 对象。

在文档中引入 jQuery 很简单，可以从官网将其下载到本地，然后引入本地文件，也可以通过 CDN 引入，好处是减少加载时间。

jQuery() 函数

jQuery 类库中，最重要的方法就是 jQuery()（也就是$()），有四种方法可以调用它：

• 传递 CSS 选择器给 $() 方法，通过这种方式调用会返回当前文档中匹配该选择器的元素集。
• 传递一个 Element、Document 或 Window 对象给 $() 方法，这种方式可以通过 jQuery 方法来操作这些元素而不用使用 DOM 方法。
• 传递 HTML 文本字符串给 $() 方法，这种情况下，jQuery 会根据传入的文本创建好 HTML 元素并封装为 jQuery 对象返回
• 传入一个函数给 $() 方法，当文档加载完毕且 DOM 可操作时，传入的函数会被调用

通过 $() 注册的函数将在 DOMContentLoaded 事件触发时由 jQuery 触发。当浏览器不支持该事件时，会在 load 事件触发时由 jQuery 触发。

jQuery 类库还使用 jQuery() 函数作为其命名空间，在下面定义不少工具函数和属性。

注：jQuery 函数和 jQuery 方法是两个概念，jQuery 函数指定义在 jQuery 命名空间中的函数，也可称为「静态方法」，比如 $.each(a, f)，jQuery 方法是由 jQuery 函数返回的 jQuery 对象的方法，比如 $("a").each(f)。

查询和查询结果

传递 CSS 选择器给 $() 方法，会返回 jQuery 对象表示匹配到元素集，jQuery 对象是一个类数组，可以通过 toArray() 方法将其转换为真实的数组。

注：在支持 querySelectorAll() 的浏览器中，jQuery 实现会调用该方法。

想要遍历 jQuery 对象中的所有元素，可以调用 each() 方法代替 for 循环：

$("div").each(function(idx){
  $(this).prepend(idx + ": ");    // 在每个元素前面插入索引值
  if (this.id === "last")
    return false;
});

jQuery 类库在 ES5 数组方法规范化前就已经存在，所以里面有一些方法和 ES5 方法的功能类似，比如 map()，该方法接收一个回调函数作为参数，并为 jQuery 对象中每个元素调用该回调函数，同时将回调函数的返回值收集起来，最后将这些返回值封装成一个新的 jQuery 对象返回：

$(":header").map(function(){ 
  return this.id 
}).toArray().sort();

此外，jQuery 还提供了另一个基础方法 index()。该方法接收一个元素作为参数，返回值是该元素在 jQuery 对象中的索引值，找不到则返回 -1。

最后要讨论的是 is() 方法，它接收一个选择器作为参数，如果选中元素中至少有一个匹配该选择器，则返回 true：

$("div").each(function(idx){
  if ($(this).is(":hidden"))   // 跳过隐藏元素
    return;
});