jQuery 基础


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;
});

Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 基于服务器端推送事件的 Comet 技术

>> 下一篇: jQuery 的 getter 与 setter