jQuery 对象是一个类数组对象,含有连续的整型属性、length 属性和大量的 jQuery 方法。
jQuery 对象由构造函数 jQuery() 创建,$() 则是 jQuery() 的缩写。
2.1 构造函数 jQuery()
2.1.1 jQuery( selector [, context] )
如果传入一个字符串参数,jQuery 会检查这个字符串是选择器表达式还是 HTML 代
码。如果是选择器表达式,则遍历文档,查找与之匹配的 DOM 元素,并创建一个包含了
这些 DOM 元素引用的 jQuery 对象;如果没有元素与之匹配,则创建一个空 jQuery 对象,
其中不包含任何元素,其属性 length 等于 0。
默认情况下,对匹配元素的查找将从根元素 document 对象开始,即查找范围是整个文
档树,不过也可以传入第二个参数 context 来限定查找范围(本书中把参数 context 称为“选
择器的上下文”,或简称“上下文”)。例如,在一个事件监听函数中,可以像下面这样限制
查找范围:
$('div.foo').click(function() { // 选取classs为foo的div
$('span', this).addClass('bar'); // 限定查找范围
//$('span', this) 等价于 $(this).find('span')
});
// 当class为foo的div被点击时,被点击元素内的span元素添加bar样式
在这个例子中,对选择器表达式“ span”的查找被限制在了 this 的范围内,即只有被点
击元素内的 span 元素才会被添加类样式“bar”。
如果选择器表达式 selector 是简单的“ #id”,且没有指定上下文 context,则调用浏览器
原生方法 document.getElementById() 查找属性 id 等于指定值的元素;如果是比“ #id”复杂
的选择器表达式或指定了上下文,则通过 jQuery 方法 .find() 查找,因此 $('span', this) 等价
于 $(this).find('span')。
2.1.2 jQuery( html [, ownerDocument] )、jQuery( html, props )
如果传入的字符串参数看起来像一段HTML代码,jQuery则尝试用这段HTML代码创建新的DOM元素,
并创建一个包含了这些DOM元素引用的jQuery对象。
$('<p id="test">My <em>new</em> text</p>').appendTo('body'); // 把HTML代码转换成DOM元素并插入body节点的末尾
如果 HTML 代码是一个单独标签,例如,$('<img/>') 或 $('<a></a>'),jQuery 会使
用浏览器原生方法 document.createElement() 创建 DOM 元素。如果是比单独标签更复杂的
HTML 片段,例如上面例子中的 $('<p id = "test">My<em>new</em>text</p>'),则利用
浏览器的 innerHTML 机制创建 DOM 元素,这个过程由方法 jQuery.buildFragment() 和方法
jQuery.clean() 实现。
第二个参数 ownerDocument 用于指定创建新 DOM 元素的文档对象,如果不传入,则默认为当前文档对象。
如果 HTML 代码是一个单独标签,那么第二个参数还可以是 props,props 是一个包含了
属性、事件的普通对象;在调用 document.createElement() 创建 DOM 元素后,参数 props 会
被传给 jQuery 方法 .attr(),然后由 .attr() 负责把参数 props 中的属性、事件设置到新创建的DOM 元素上。
可以通过属性名 class 设置类样式,但要用引号把 class 包裹起来,因为 class
是 JavaScript 保留字。例如,在下面的例子中,创建一个 div 元素,并设置类样式为“ test”、
设置文本内容为“ Click me!”、绑定一个 click 事件,然后插入 body 节点的末尾,当点击该
div 元素时,还会切换类样式 test:
$("<div/>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");
2.1.3 jQuery( element )、jQuery( elementArray )
如果传入一个 DOM 元素或 DOM元素数组,则把 DOM 元素封装到 jQuery 对象中并返回。
这个功能常见于事件监听函数,即把关键字 this 引用的 DOM 元素封装为 jQuery 对象,
然后在该 jQuery 对象上调用 jQuery 方法。例如,在下面的例子中,先调用 $(this) 把被点击
的 div 元素封装为 jQuery 对象,然后调用方法 slideUp() 以滑动动画隐藏该 div 元素:
$('div.foo').click(function() {
$(this).slideUp();
});
2.1.4 jQuery( object )
如果传入一个普通 JavaScript 对象,则把该对象封装到 jQuery 对象中并返回。
这个功能可以方便地在普通 JavaScript 对象上实现自定义事件的绑定和触发,例如,执
行下面的代码会在对象 foo 上绑定一个自定义事件 custom,然后手动触发这个事件,执行绑
定的 custom 事件监听函数,如下所示:
// 定义一个普通 JavaScript 对象
var foo = {foo:'bar', hello:'world'};
// 封装成 jQuery 对象
var $foo = $(foo);
// 绑定一个事件
$foo.on('custom', function (){
console.log('custom event was called');
});
// 触发这个事件
$foo.trigger('custom'); // 在控制台打印 "custom event was called"
2.1.5 jQuery( callback )
如果传入一个函数,则在 document 上绑定一个 ready 事件监听函数,当 DOM 结构加载
完成时执行。ready 事件的触发要早于 load 事件。ready 事件并不是浏览器原生事件,而是
DOMContentLoaded 事件、onreadystatechange 事件和函数 doScrollCheck() 的统称。
2.1.6 jQuery( jQuery object )
如果传入一个 jQuery 对象,则创建该 jQuery 对象的一个副本并返回,副本与传入的
jQuery 对象引用完全相同的 DOM 元素。
2.1.7 jQuery()
如果不传入任何参数,则返回一个空的 jQuery 对象,属性 length 为 0。注意,在 jQuery
1.4 之前,会返回一个含有 document 对象的 jQuery 对象。
这个功能可以用来复用 jQuery 对象,例如,创建一个空的 jQuery 对象,然后在需要时
先手动修改其中的元素,再调用 jQuery 方法,从而避免重复创建 jQuery 对象。