jQuery技术内幕：深入解析jQuery架构设计与实现原理. 2.1 构造函数jQuery()

<b>2.1　构造函数jquery()</b>

如果调用构造函数jquery()时传入的参数不同，创建jquery对象的逻辑也会随之不同。构造函数jquery()有7种用法，如图2-1所示。

图2-1　构造函数jquery()

下面分别介绍构造函数jquery()的7种用法。

<b>2.1.1　jquery( selector [,</b>

context] )

如果传入一个字符串参数，jquery会检查这个字符串是选择器表达式还是html代码。如果是选择器表达式，则遍历文档，查找与之匹配的dom元素，并创建一个包含了这些dom元素引用的jquery对象；如果没有元素与之匹配，则创建一个空jquery对象，其中不包含任何元素，其属性length等于0。字符串参数是html代码的情况会在下一小节介绍。

默认情况下，对匹配元素的查找将从根元素document对象开始，即查找范围是整个文档树，不过也可以传入第二个参数context来限定查找范围（本书中把参数context称为“选择器的上下文”，或简称“上下文”）。例如，在一个事件监听函数中，可以像下面这样限制查找范围：

$('div.foo').click(function() {

$('span', this).addclass('bar'); // 限定查找范围

});

在这个例子中，对选择器表达式“span”的查找被限制在了this的范围内，即只有被点击元素内的span元素才会被添加类样式“bar”。

如果选择器表达式selector是简单的“#id”，且没有指定上下文context，则调用浏览器原生方法document.getelementbyid()查找属性id等于指定值的元素；如果是比“#id”复杂的选择器表达式或指定了上下文，则通过jquery方法.find()查找，因此$('span', this)等价于$(this).find('span')。

至于方法.find()，会调用css选择器引擎sizzle实现，在第3章中将会进行介绍和分析。

<b>2.1.2　jquery( html [,</b>

ownerdocument] )、jquery( html, props )

如果传入的字符串参数看起来像一段html代码（例如，字符串中含有&lt;tag…&gt;），jquery则尝试用这段html代码创建新的dom元素，并创建一个包含了这些dom元素引用的jquery对象。例如，下面的代码将把html代码转换成dom元素并插入body节点的末尾：

$('&lt;p id="test"&gt;my

&lt;em&gt;new&lt;/em&gt; text&lt;/p&gt;').appendto('body');

如果html代码是一个单独标签，例如，$('&lt;img/&gt;')或$('&lt;a&gt;&lt;/a&gt;')，jquery会使用浏览器原生方法document.createelement()创建dom元素。如果是比单独标签更复杂的html片段，例如上面例子中的$('&lt;p id =

"test"&gt;my&lt;em&gt;new&lt;/em&gt;text&lt;/p&gt;')，则利用浏览器的innerhtml机制创建dom元素，这个过程由方法jquery.buildfragment()和方法jquery.clean()实现，相关内容分别在2.4节和2.5节介绍和分析。

第二个参数ownerdocument用于指定创建新dom元素的文档对象，如果不传入，则默认为当前文档对象。

如果html代码是一个单独标签，那么第二个参数还可以是props，props是一个包含了属性、事件的普通对象；在调用document.createelement()创建dom元素后，参数props会被传给jquery方法.attr()，然后由.attr()负责把参数props中的属性、事件设置到新创建的dom元素上。

参数props的属性可以是任意的事件类型（如“click”），此时属性值应该是事件监听函数，它将被绑定到新创建的dom元素上；参数props可以含有以下特殊属性：val、css、html、text、data、width、height、offset，相应的jquery方法：.val()、.css()、.html()、.text()、.data()、.width()、.height()、.offset()将被执行，并且属性值会作为参数传入；其他类型的属性则会被设置到新创建的dom元素上，某些特殊属性还会做跨浏览器兼容（如type、value、tabindex等）；可以通过属性名class设置类样式，但要用引号把class包裹起来，因为class是javascript保留字。例如，在下面的例子中，创建一个div元素，并设置类样式为“test”、设置文本内容为“click me!”、绑定一个click事件，然后插入body节点的末尾，当点击该div元素时，还会切换类样式test：

$("&lt;div/&gt;", {

"class": "test",

text: "click me!",

click: function(){

$(this).toggleclass("test");

   }

}).appendto("body");

方法.attr()将在8.2节介绍和分析。

<b>2.1.3　jquery( element )、jquery(</b>

elementarray )

如果传入一个dom元素或dom元素数组，则把dom元素封装到jquery对象中并返回。

这个功能常见于事件监听函数，即把关键字this引用的dom元素封装为jquery对象，然后在该jquery对象上调用jquery方法。例如，在下面的例子中，先调用$(this)把被点击的div元素封装为jquery对象，然后调用方法slideup()以滑动动画隐藏该div元素：

$(this).slideup();

<b>2.1.4　jquery( object )</b>

如果传入一个普通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"

<b>2.1.5　jquery( callback )</b>

如果传入一个函数，则在document上绑定一个ready事件监听函数，当dom结构加载完成时执行。ready事件的触发要早于load事件。ready事件并不是浏览器原生事件，而是domcontentloaded事件、onreadystatechange事件和函数doscrollcheck()的统称，将在9.11节介绍和分析。

<b>2.1.6　jquery( jquery</b>

object )

如果传入一个jquery对象，则创建该jquery对象的一个副本并返回，副本与传入的jquery对象引用完全相同的dom元素。

<b>2.1.7　jquery()</b>

如果不传入任何参数，则返回一个空的jquery对象，属性length为0。注意，在jquery 1.4之前，会返回一个含有document对象的jquery对象。

这个功能可以用来复用jquery对象，例如，创建一个空的jquery对象，然后在需要时先手动修改其中的元素，再调用jquery方法，从而避免重复创建jquery对象。