第1章 jQuery 起步

前言

1.从 jQuery(JavaScript + Query) 名称也可以看出，使用CSS + XPath 选择器查询页面元素是该框架赖以起家的绝活。

2.在可能的条件下，建议读者不要完全抛弃 JavaScript 原生的选择器方法，适当混合使用 jQuery 、DOM 和 JavaScript 能够提升程序的执行效率。例如 ，offset (获取页面上的各种尺寸和位置数据)、创建和插入 DOM 节点的方法 (如 append，before) 都是 JQuery 速度的瓶颈，在必要的情况下，读者完全不用它们，而直接使用 DOM 原生方法会更加高效。

3.在默认情况下，我们都会使用 jQuery 的别名 $ 来表示 jQuery 名字空间，同时直接把调用的函数放在 $() 函数中，该函数实际上是 $("document").ready() 方法的简写。例如，

$(function(){

$("div").after("<p>最后一段文本</p>");

});

实际上上面的示例代码应该是下面的形式。

$(document).ready(function(){

$("div").after("<p>最后一段文本</p>");

});

第1章 jQuery 起步

1.一般情况下，所有 jQuery 代码建议都包含在 $() 函数中，当然也可以不包含在 $() 函数中，这与 JavaScript 代码应该放在 window.onload 事件处理函数中的道理是一样的。

2.jQuery 构造函数

jQuery 把所有的操作都包装在一个 jQuery() 函数中，形成了统一(也是惟一)的操作入口，这为 jQuery 操作降低了门槛。jQuery() 构造函数能够接收任意类型的数据，但是能够解析的参数包括下面4种类型。

(1) jQuery(expression, context)

参数为一个表达式，该表达式可以是 ID 、DOM 元素名、CSS 表达式 和 XPath 表达式等，jQuery 将根据表达式匹配文档中的元素，然后把找到的元素包装到一个 jQuery 对象中返回。例如：

jQuery("div#wrap>p:first").addClass("red");

在表达式字符串中，div#wrap 表示 id 为 wrap 的div 元素，先在该元素中匹配子元素 p，再筛选出第一个 p 元素。"div#wrap>p:first" 是 CSS 表达式，如果使用 XPath 表达式表示，则应该为 "div#wrap/p:first"；:first 是一个伪类，表示其中的第一个；addClass() 为 jQuery 对象，用来添加 CSS 样式类的方法，相反操作的方法为 removeClass()。

(2)jQuery(html)

参数表示一个 HTML 结构字符串，此时 jQuery 将创建一个对应结构的 HTML 文档片段。例如：

$('ul').append($('<li>new item</li>'));

其中 $('<li>new item</li>') 将其中的字符串转换为 DOM 对象，然后通过 append() 方法加入到 ul 元素的最后。

(3)jQuery(elements)

参数是一个 DOM 元素对象或者集合，此时 jQuery 将把 DOM 元素或集合中的 DOM 元素封装为 jQuery 对象。例如：

$(document).ready(function(){

$('ul').css('color', 'red');

});

在上面的示例中，jQuery 构造函数把 document 对象封装为一个 jQuery 对象，然后调用 ready() 方法。ready 事件处理函数为 document 对象绑定一个事件，当页面初始化之后将 ul 的颜色设置为红色。

(4)jQuery(fn)

参数是一个处理函数。由于 $(document).ready() 频繁使用，所以 jQuery 又使用 $(fn) 来代替，fn 表示处理函数。ready 处理函数在文档内容完全载入之后执行，因此不需要等待外部链接文件载入完成，响应要比 load 事件早。例如，下面代码就是 jQuery(fn) 运用。

$(function(){

$('ul').css('color', 'red');

});

3.jQuery 链式语法

链式代码已经成为 jQuery 非常流行的一个特点，在使用链条方式编写代码时，可能会用到 eq()、filter() 的jQuery 方法改变链式方法的对象，但是借助 jQuery 的 end() 方法又能够恢复回最初的 jQuery 对象，从而可以实现继续执行链式操作。注意，有几个 jQuery 的方法并不返回 jQuery 对象，所以链式操作就不能继续下去，如 get() 就不能像 eq() 那样使用。

4.jQuery 选择器

jQuery 选择器按照功能主要分为选择和过滤，并允许配合使用，可以同时使用组合成一个选择器字符串。两者主要的区别如下：

(1)过滤作用的选择器是利用指定条件从前面匹配的内容中筛选。过滤选择器也可以单独使用，此时表示从全部 "*" 元素中筛选。如：

$(":[title]")

等同于

$("*:[title]")

(2)选择功能的选择器则不会有默认的范围，因为它的作用是选择而不是过滤。

例如，在下面的示例中，$("input[type='button']") 选择器可以匹配文档中 type 属性值为 button 的 input 元素，这个表达式是 CSS 表达式。

5.如果只给 css() 方法传递一个字符串参数，则表示读取样式值，如 css('color') 就表示取得当前 jQuery 对象的样式属性 color 的值。而如果给它传递两个参数，则表示设置样式值。jQuery 对象定义了很多类似的方法，如 val() 、 text() 、 html() 、 click() 、 change() 等。