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

2.1 构造函数jQuery()

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

 

图2-1 构造函数jQuery()

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

2.1.1 jQuery( selector [,
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章中将会进行介绍和分析。

2.1.2 jQuery( html [,
ownerDocument] )、jQuery( html, props )

如果传入的字符串参数看起来像一段HTML代码(例如,字符串中含有<tag…>),jQuery则尝试用这段HTML代码创建新的DOM元素,并创建一个包含了这些DOM元素引用的jQuery对象。例如,下面的代码将把HTML代码转换成DOM元素并插入body节点的末尾:

$('<p id="test">My
<em>new</em> text</p>').appendTo('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()实现,相关内容分别在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:

$("<div/>", {

  
"class": "test",

  
text: "Click me!",

  
click: function(){

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

   }

}).appendTo("body");

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

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()的统称,将在9.11节介绍和分析。

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对象。

时间: 2025-01-24 13:02:34

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.1 构造函数jQuery()的相关文章

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.3 jQuery.fn.init( selector, context, rootjQuery )

2.3 jQuery.fn.init( selector, context, rootjQuery ) 2.3.1 12个分支 构造函数jQuery.fn.init()负责解析参数selector和context的类型,并执行相应的逻辑,最后返回jQuery.fn.init()的实例.参数selector和context共有12个有效分支,如表2-1所示. 表2-1 参数selector和context的12个分支          selector   context    示 例 1    

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.5 jQuery.clean( elems, context, fragment, scripts )

2.5 jQuery.clean( elems, context, fragment, scripts ) 2.5.1 实现原理 方法jQuery.clean( elems, context, fragment, scripts )负责把HTML代码转换成DOM元素,并提取其中的script元素.该方法先创建一个临时的div元素,并将其插入一个安全文档片段中,然后把HTML代码赋值给div元素的innerHTML属性,浏览器会自动生成DOM元素,最后解析div元素的子元素得到转换后的DOM元素.

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 3.12 jQuery扩展

3.12 jQuery扩展 3.12.1 暴露Sizzle给jQuery 下面的代码将Sizzle的方法和属性暴露给了jQuery: 5288 // EXPOSE 5289 // Override sizzle attribute retrieval 5290 Sizzle.attr = jQuery.attr; 5291 Sizzle.selectors.attrMap = {}; 5292 jQuery.find = Sizzle; 5293 jQuery.expr = Sizzle.sel

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.6 jQuery.extend()、jQuery.fn.extend()

2.6 jQuery.extend().jQuery.fn.extend() 2.6.1 如何使用 方法jQuery.extend()和jQuery.fn.extend()用于合并两个或多个对象的属性到第一个对象,它们的语法如下: jQuery.extend( [deep], target, object1 [, objectN] ) jQuery.fn.extend( [deep], target, object1 [, objectN] ) 其中,参数deep是可选的布尔值,表示是否进行深度

jQuery技术内幕:深入解析jQuery架构设计与实现原理1

jQuery技术内幕:深入解析jQuery架构设计与实现原理 高 云 著 图书在版编目(CIP)数据 jQuery技术内幕:深入解析jQuery架构设计与实现原理 / 高云著. -北京:机械工业出版社,2013.11 ISBN 978-7-111-44082-6 I. j- II. 高- III. JAVA语言-程序设计 IV. TP312 中国版本图书馆CIP数据核字(2013)第221662号 版权所有·侵权必究 封底无防伪标均为盗版 本书法律顾问 北京市展达律师事务所     本书由阿里巴

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.2 总体结构

2.2 总体结构 构造jQuery对象模块的总体源码结构如代码清单2-1所示. 代码清单2-1 构造 jQuery 对象模块的总体源码结构  16 (function( window, undefined ) {         // 构造 jQuery 对象  22    var jQuery = (function() {  25       var jQuery = function( selector, context ) {  27              return new jQ

基于微服务和Docker容器技术的PaaS云平台架构设计

本文讲的是基于微服务和Docker容器技术的PaaS云平台架构设计[编者的话]在系统架构上,PaaS云平台主要分为微服务架构.Docker容器技术.DveOps三部分,这篇文章重点介绍微服务架构的实施. [3 天烧脑式容器存储网络训练营 | 深圳站]本次培训以容器存储和网络为主题,包括:Docker Plugin.Docker storage driver.Docker Volume Pulgin.Kubernetes Storage机制.容器网络实现原理和模型.Docker网络实现.网络插件.

基于云技术的ELC集群式服务器架构设计与实现

基于云技术的ELC集群式服务器架构设计与实现 西安电子科技大学 张文 本文提出了一种基于云技术的弹性负载均衡集群式服务器架构(Elastic and Load Balancing Cluster Server Architecture based on CloudTechnology,ELC集群式服务器架构).本架构以Eucalyptus云计算平台为基础设施,按照计算与存储分离原则整体分为两部分.其中,计算服务系统在Eucalyptus云平台的计算模块基础上,通过虚拟服务器实例方式对外提供服务,

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 导读

   本书由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jQuery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jQuery中的实现技巧和技术精髓,同时本书也对广大开发者如何通过阅读源代码来提升编码能力和软件架构能力提供了指导.     本书首先通过"总体架构"梳理了各个模块的分类.功能和依赖关系,让大家对jQuery的工作原理有大致的印象:进而通过"构造jQuery对象"章节分析了构造函数jQuery()的各种用法和内部构造过程:接

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.8 静态属性和方法

2.8 静态属性和方法 在构造jQuery对象模块中还定义了一些重要的静态属性和方法,它们是其他模块实现的基础.其整体源码结构如代码清单2-3所示. 代码清单2-3 静态属性和方法 388 jQuery.extend({ 389     noConflict: function( deep ) {}, 402     isReady: false, 406     readyWait: 1, 409     holdReady: function( hold ) {}, 418     read