jQuery 核心库快速掌握

2018-04-11作者:张亚飞, 高红霞, 编著编辑:Solomon

jQuery 是一个可实现快速开发、简洁、轻量级的 JavaScript 库,通过 jQuery, 可以用最精简的程序代码轻松实现跨浏览器 HTML DOM 操作、事件处理、设 计页面元素动态效果、Ajax 交互等功能。


jQuery 目前受到了业界的普遍好评,已经被大量使用。jQuery 还得到了 微软等公司的支持,被放在微软官方 Ajax 站点的首要位置,而且 jQuery 的选 择器语法被很多其他 JavaScript 库借鉴或直接引用,显示了该语法格式的强大 功能。

jQuery 的基石是 jQuery 核心库,在 jQuery 核心库的基础上诞生了很多 jQuery 插件,包括 jQuery UI、jQuery Mobile 以及其他大量的第三方插件。


一、使用 jQuery 核心库——jQuery Core


一般情况下,提起 jQuery 或“jQuery 库”都是指 jQuery 核心库,即 jQuery Core。要 使用 jQuery,必须首先获得一个 jQuery 核心库,其可以从网站 http://jquery.com/下载。jQuery 核心库有很多版本,而且版本更新很快,目前最新的是 1.6.x下载的 jQuery 核心库是一个*.js 文件,可以在网页中引用该文件,一般都会在网页的head 元素中添加如下的 HTML 代码:

<script type="text/javascript" src="jquery-1.6.2.min.js">

</script>


注意,下载的*.js 文件有两个版本:jquery-1.6.2.min.js 和 jquery-1.6.2.js。两者的功能 是相同的,前一个是精简过的文件(也被称为部署文件或产品文件),该文件较小,推荐 在部署时使用,可以降低网络流量,减少 Web 服务器的负载;后一个文件则适合查看和修 改源代码(也被称为开发者文件),该文件包含大量空格、换行符以及注释,因此文件 较大。


CDN 的全称是 Content Delivery Network,即内容分发网络。其基本思路是尽可能避开 互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输更快、更稳定。


在一些特大型网络公司中,也存在 jQuery 库的副本,它们作为 jQuery 库的 CDN,这 些 CDN 是免费的,可以直接引用,也可以减轻 Web 服务器的负载。


例如,Google 的服务器上就存在这样的副本,可以直接引用(考虑到 Google 强大的 服务器群,所以加载 jQuery 库将会非常快):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.6.2/jquery.min.js">

</script>


微软的 Ajax CDN 服务器上也存在 jQuery 库的副本,可以直接引用:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/ jquery/jquery-1.6.2.min.js">

</script>


注意,这样的引用还是有一定风险的,如果 Google、微软的网站不再提供该文件,那 么就有可能导致不可预知的后果。


1.1    第一个 jQuery 范例

jQuery 库也是 JavaScript 程序,在网页中应该使用 script 元素引用,与引用其他 JavaScript 代码完全相同。一旦引用了 jQuery 库,就可以使用库中定义的方法来处理文档和执行其他一些运算。 下面是一个使用 jQuery 的完整范例:

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta charset="utf-8">

    <title>jQuery Sample</title>

    <script type="text/javascript" src="jquery-1.6.2.js"></script> </head>

    <body>

    <script>

    $(document).ready(

    function() {

    alert('HTMLDOM 已经准备完毕,现在可以操作了!');

    } );

    </script>

    </body>

    </html>


在使用 jQuery 处理 HTML 文档之前,必须让 jQuery 读取 HTML 文档的 DOM,之后 才能进行其他操作。jQuery 定义了一个 ready 事件来验证是否已经读取了 DOM 并已经完成 DOM 结构绘制(链接资源可能并未下载,但此时已经可以执行 JavaScript 程序),一般都应该使用该事件来初始化操作。所以,在上述简单范例中,用一个 ready 事件作为处理 HTML 文档的开始,事件中 定义了一个匿名函数,当触发事件时就执行该函数,其中包含一个 alert()语句。在浏览器中执行,就可以看到自动弹 出的对话框


1.2    基本语法

看一下下面这段代码:

$(document).ready(

  function() {

alert('HTMLDOM 已经准备完毕,现在可以操作了!'); }

);

$(document)是一个 jQuery 选择器(Selector),用来选择一个 HTML 元素,这里, $(document)表示整个 HTML 文档。其中,“$”号是 jQuery 这个 JavaScript 类(注意,JavaScript 类是使用函数定义的)的 一个别称,jQuery 库定义中有下面一行代码:

window.jQuery = window.$ = jQuery;

由于关键字 window 可以省略,所以,$其实表示 window.$,等同于 jQuery。例如, 下面几个应用的效果是相同的:

    window.jQuery(document)

    jQuery(document)

    window.$(document)

    $(document)


通过使用$()就可以调用函数,该函数返回一个新的 jQuery 对象,后面紧跟的函数 ready() 是该 jQuery 对象的一个方法,它绑定了一个事件,待 DOM 完成载入后就触发该事件,在 事件触发时执行该方法。

  下面对这个范例稍作改动:

    <body>

   <a href="#">超链接 1</a>

   <a href="#">超链接 2</a>

   <script type="text/javascript"> $(document).ready(

    function() {

     $("a").click(

        function() {

    alert("嗨!你点击了一个超链接!"); }

    );

    } );

   </script>

   </body>

这样,在 DOM 完成载入后就执行 ready()事件,在该事件处理方法中定义了另外一段 jQuery 代码。

$("a")是一个 jQuery 选择器,在这里,它选择所有的 a 元素,并创建了一个 jQuery 对 象,click()是该 jQuery 对象的一个方法,它绑定了一个单击事件到所有选中的超链接,并 在事件触发时执行其中的 alert()方法。

这样在单击页面的任意一个超链接时都会弹出一个对话框


1.3    为什么要使用 jQuery

使用jQuery可以精简代码,这也是使用jQuery的目的所在,即Write Less, Do More (写更少,做更多)。如果要使用 JavaScript 完成同样的功能,必须编写大量的代码,主要是完成与 DOM 相关的操作和实现浏览器的兼容性。例如,下面的代码与前面代码实现相同的功能,但代码量大大增加,足见使用 jQuery 的便利之处。

    <body>

    <a href="#">超链接1</a>

    <a href="#">超链接2</a>

    <script type="text/javascript"> /*

* 检测 HTMLDOM 是否已经准备好

* 这个检测方法也是 jQuery 库源代码中所使用的原理 */

    var isDOMready = false;

//此时如果 HTMLDOM 已经加载并绘制完毕,就执行 DOM 操作 if           ("complete"==document.readyState)

  {

    isDOMready = true;

    handleDOM();

   } else

    //如果 HTMLDOM 没有准备好,就使用事件监听

   {

    if (document.addEventListener) {

    document.addEventListener("DOMContentLoaded", handleDOM, false);

    window.addEventListener("load", handleDOM, false);

  //旧版 IE 使用 attachEvent()方法定义监听

   } else if (document.attachEvent) {

     document.attachEvent("onreadystatechange", handleDOM);

     window.attachEvent("onload", handleDOM);

   }

 }

//执行 DOM 操作 function handleDOM() {

//首先移除监听,并设置isDOMready = true if (document.addEventListener) {

document.removeEventListener("DOMContentLoaded", handleDOM, false); isDOMready = true;

  } else if (document.attachEvent) {

     if (document.readyState == "complete") {

       document.detachEvent("onreadystatechange", handleDOM);

      window.detachEvent("onload", handleDOM);

       isDOMready = true;

   }

}

//检测 HTMLDOM,如果准备好就获取所有 a 元素,并为每个 a 元素注册 click 事件 if (isDOMready){

     var nodeList = document.getElementsByTagName("a");

   var len = nodeList.length;

     for (var i=0;i<len;i++){

       addEventListener(nodeList.item(i), "click", a_click);

} }

}

//定义一个函数用于处理 a 元素的 click 事件 function a_click()

{

alert("嗨!你点击了一个超链接!"); }

//定义一个实现浏览器兼容性的事件注册函数

function addEventListener(element, eventType, listener) {

{

     if (element.addEventListener)

         element.addEventListener(eventType, listener, false);

     else if (element.attachEvent)

         element.attachEvent("on" + eventType, listener);

 } catch (e) {}

}

</script>

</body>


1.4    源代码解析——jQuery 库的闭包定义

jQuery 库的所有功能代码都在一个匿名的自定义函数中定义,它是一个自执行的函 数,并传递 window 作为执行参数。

源代码定义如下:

(function( window, undefined ) { //jQuery 定义

window.jQuery = window.$ = jQuery;

})(window);

将 JavaScript 程序代码定义在一个函数中很有必要,它可以利用 JavaScript 执行的特点 形成一个闭包环境。闭包的核心是无论函数在哪里被调用,仍可以访问它所处环境的变量,而这个变量在 函数被调用的环境中是无法被其他程序访问的。这就可以保证匿名的自定义函数中定义的 变量不会与外部环境冲突,而是形成一个内部环境。同时,将全局对象 window 作为参数传进去,通过将闭包环境中的函数或变量赋给 window 作为属性或方法,从而可以公开函数或变量成为全局函数或变量,例如下面的代码:

 window.jQuery = window.$ = jQuery;

 关于闭包的详细介绍可以参考《JavaScript 权威指南——ECMAScript5+HTML5DOM+ HTML5BOM》一书。


  二、jQuery 对象和 jQuery 选择器—— jQuery 对象结构和处理方法


使用 jQuery 选择器可以构建 jQuery 对象(类的实例也被称为对象,jQuery 对象也就是 jQuery 类的实例),jQuery 类内置了很多方法和属性可以处理 jQuery 对象,由于 jQuery.fn 是 jQuery 的原型,所以很多方法和属性是在 jQuery.fn 上声明的。不仅 jQuery 选择器可以构建 jQuery 对象,jQuery 的一些方法在执行后也 可以返回一个 jQuery 对象,如后面将要介绍的与过滤操作有关的方法,就会 返回一个新的 jQuery 对象。


2.1    关于 jQuery 对象的结构

jQuery 选择器每发现一个匹配的元素,就会将该元素作为 jQuery 对象的一个属性,键 以数字索引的形式表示,键值就是元素引用。

  例如,下面的代码可以用来测试:

    <body>

    <div id="a">A</div>

    <div id="b">B</div>

    <script>

    var e = $("div");

    var e1 = e[0];

    var e2 = e[1];

    </script>

    </body>

代码应该获取两个 div 元素的引用,并放置到 jQuery 对象中。在调试状态下监控变量 ejQuery 对象本身的行为很像一个数组,它定义有 length 属性,并且包含在对象中的元 素可以通过数字索引访问。但是需注意,jQuery 对象实际上并不是一个 JavaScript 数组对 象,因此它不能应用类如 Array.join()的内置方法。

一般情况下,都会使用 jQuery()函数通过选择器功能创建一个 jQuery 对象,也可以使 用 jQuery 的别名$()。因为许多 jQuery 方法都返回 jQuery 对象自身,这样,在应用 jQuery 时,方法调用可以串联起来,这被称为 jQuery 链式语法,例如:

$("p").css("color", "red").find(".special").css("color", "green");

$("p")、$("p").css("color", "red")和$("p").css("color", "red").find(".special")均返回一个jQuery 对象。因此,它们的结果和对方法的调用可以串联起来。 另外,像.filter()和.find()这样的过滤型方法可以改变 jQuery 对象中的元素,这些方法实际上返回的是一个新的 jQuery 对象,其中包含的元素也许比以前减少了,或许 jQuery 对象是空的。要返回到以前的 jQuery 对象,可以使用.end()方法。


jQuery 对象是空的,指 jQuery 对象不包含任何 DOM 元素。使用没有传递任何参数的 $()调用就可以创建一个空的 jQuery 对象。如果选择器不匹配任何元素,也会返回一个空 的 jQuery 对象。空的 jQuery 对象不是一个错误,在空的 jQuery 对象上调用的任何方法只 是没有效果,而不会导致异常,因为 jQuery 对象上没有行动所要施加的元素。


2.2    处理 jQuery 对象

jQuery 类内置了很多方法和属性可以处理 jQuery 对象,表 3-1 列出了可用的属性及其

功能。

context:返回传给 jQuery()的原始的 DOM 节点,即 jQuery()的第二个参数。如果没有指定,那么 context 指向当前的文档(document)

jquery:返回 jQuery 的版本号

length:返回 jQuery 对象中元素的数量,也可以使用 size()方法,但推荐使用 length 属性。在 jQuery 源代码中,size()方法的定义是:function() { return this.length; }其实也是返回length属性

selector:返回传给 jQuery()的原始选择器字符串。应与上下文结合使用,以确定准确的查询使用


2.3    迭代 jQuery 对象

使用.each()方法可以迭代 jQuery 对象,对每个元素执行回调函数。语法格式如下:

.each(callback(index,element))

参数 callback(index,element)定义一个回调函数,对每个元素都将执行该回调函数。回 调函数中的参数 index 表示当前元素在 jQuery 对象中的索引,element 表示当前元素,注 意,这是一个 DOM 元素,必须使用 DOM 方法处理,不能使用 jQuery 对象方法处理。.each()方法用来DOM 结构迭代更简单且不易出错。它会迭代 jQuery 对象中的每一 个 DOM 元素,每次回调函数执行时,会传递当前循环次数作为参数(从 0 开始计数)。更 重要的是,回调函数是在当前 DOM 元素为上下文环境中触发的,因此关键字 this 总是指 向该元素。

  例如,假设页面上有这样一个简单的无序列表:

   <ul>

   <li>list item 1</li>

   <li>list item 2</li>

   <li>list item 3</li>

   <li>list item 4</li>

   <li>list item 5</li>

   </ul>

   可以选中并迭代这些列表

   $('li').each(function(index) {

   alert(index + ': ' + $(this).text());

});

  列表中每一项会显示在下面的消息中:

  0: list item 1

  1: list item 2

  ...

可以通过回调函数返回 false 以便终止循环。


wenz.jpg


2.4    使用索引获取 jQuery 集合中的元素

jQuery 对象就像是数组,可以使用 length 属性获取 jQuery 对象中 DOM 元素的数量。 可以使用数组语法根据索引获取指定位置的 DOM 元素,也可以使用 jQuery 对象内置方法 根据索引获取指定位置的 DOM 元素。

  例如,假设页面上有这样一个简单的无序列表:

  <ul>

   <li>list item 1</li>

   <li>list item 2</li>

   <li>list item 3</li>

   <li>list item 4</li>

   <li>list item 5</li>

   </ul>

   可以使用下面的方法选择所有的 li 元素构建一个 jQuery 对象:

   然后来看怎样遍历 jQuery 对象获取对所有的 li 元素的引用。


    1. 使用数组语法

使用数组语法可以根据索引获取 jQuery 对象上指定位置的 DOM 元素,例如,下面的

代码用来获取第一个 li 元素:

alert($('li')[0]);

使用下面的方法可以遍历 jQuery 对象:

    for(var i=0;i<$('li').length; i++){

      alert($('li')[i]);

    }

jQuery 还定义了.get()方法获取 jQuery 对象上指定位置的 DOM 元素,语法格式如下:

.get([index])参数 index 是可选的,定义索引位置,从 0 开始计数,用来确定获取哪个元素。

如果指定了 index 参数,.get()方法等同于数组语法,用于获取单个元素。例如,下面 的代码功能是相同的:

    alert($('li').get(0));

    alert($('li')[0]);


如果不带参数,.get()方法会返回所有的元素,并将元素包含在一个数组中:alert($('li').get());

结果如下:

[HTMLLIElement, HTMLLIElement, HTMLLIElement, HTMLLIElement, HTMLLIElement]

但是,与数组语法不同的是,.get()方法可以指定索引值为负值:

alert($('li').get(-1).outerHTML);

负的索引值表示从匹配的集合中的末尾开始计数,所以上面的例子将会返回列表中的 最后一项:

 <li>list item 5</li>

 需要注意的是,不管是数组语法还是.get()方法,返回值都是 DOM 元素,然后就可以 使用标准的 DOM 方法来处理返回的值。例如,刚才使用了属性 outerHTML 来获取元素的 字符串表示。

也可以使用返回的 DOM 元素构建新的 jQuery 对象,只需将该 DOM 元素作为选择器:

    $($('li').get(0))

    $($('li')[0])


    2.使用内置方法

有一些内置方法也可以根据索引获取指定位置的 DOM 元素,并且与.get()方法不同的

是,这些方法会根据返回的 DOM 元素构建新的 jQuery 对象。


.eq()方法:

该方法获取 jQuery 对象中指定索引位置上的元素,并使用该元素构建一个新的 jQuery 对象。语法格式如下:

Note.eq(index)

参数 index 定义索引位置,是一个整数。该参数的值可以为负值,为负值时表示从集 合中的最后一个元素开始倒数。

例如获取第一个元素:

alert($('li').eq(0).html());

注意,返回值是一个 jQuery 对象,因此可以使用链式语法调用 jQuery 的另一个方 法.html(),该方法用于获取一个 jQuery 对象中一个元素的 HTML 内容。因此,返回值是第 一个 li 元素的容:

   list item 1

注意,eq()与.get()方法不同,.get()方法的返回值都是 DOM 元素,可以对结果使用 DOM 方法;而.eq()方法的返回值都是 jQuery 对象,只能对结果使用 jQuery 对象的方法。

.eq()方法也可以使用负数作为索引,负数表示元素的位置从集合的末尾开始,而不是 开头,例如:

alert($('li').eq(-1).html());

返回值是最后一个 li 元素的内容:

list item 5

如果在指定的索引处没有发现元素,该方法构造了一个新的空 jQuery 对象,length 的

alert($('li').eq(5).length); // 0


关注微信公号“书问”免费领取万本好书



内容来源:书问

作者张亚飞、高红霞
出版清华大学出版社
定价59.8元
书籍比价

分享到

扫描二维码 ×

参与讨论

电子纸书

1分钟摄影诊所: 快速掌握数码摄影的曝光秘笈

尚品工作室
清华大学出版社[2012] ¥25

jQuery炫酷应用实例集锦

罗帅, 罗斌, 汪明云, 编著
清华大学出版社[2018] ¥74

HTML5+jQuery Mobile移动应用开发

丁锋, 陆禹成, 编著
清华大学出版社[2018] ¥47

jQuery开发指南

车云月, 主编
清华大学出版社[2018] ¥27

15天学会jQuery编程与实战(视频教学版)

刘鑫
清华大学出版社[2017] ¥35

jQuery从入门到精通

明日科技
清华大学出版社[2017] ¥44

构建移动网站与APP:HTML 5+CSS 3+jQuery Mobile入门与实战

刘鑫、陈素清
清华大学出版社[2016] ¥43

JavaScript+jQuery动态网页设计案例课堂

刘玉红
清华大学出版社[2015] ¥47

出版业领先的TMT平台

使用社交账号直接登陆

Copyright © 2018 BookAsk 书问   |   京ICP证160134号


注册书问

一键登录

Copyright © 2018 BookAsk 书问   |   京ICP证160134号