前言
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() 等。