jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.1 构造函数jQuery()-阿里云开发者社区

开发者社区> 华章计算机> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》——2.15 本章小结
本节书摘来自华章计算机《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》一书中的第2章,第2.15节,作者:新设计团队著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
967 0
响应式 Web 设计的 20 个有用的 jQuery 插件
响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的! 本文介绍 20 个 jQuery 插件适合进行响应式 Web 网站设计。
608 0
《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》——2.11 初始化硬盘
本节书摘来自华章计算机《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》一书中的第2章,第2.11节,作者:新设计团队著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
787 0
《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》——2.14 进程0由0特权级翻转到3特权级,成为真正的进程
本节书摘来自华章计算机《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》一书中的第2章,第2.14节,作者:新设计团队著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1148 0
让小程序在自有App中启动的技术来了:mPaaS小程序架构深度解析
mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放。不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App、支付宝、钉钉甚至其他小程序开放平台。
1586 0
《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》——2.9 初始化进程0
本节书摘来自华章计算机《Linux内核设计的艺术:图解Linux操作系统架构设计与实现原理》一书中的第2章,第2.9节,作者:新设计团队著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1447 0
javascript 表达式、括号、常用函数和jquery库怎么样实现的分析
(一)javascript表达式 表达式是什么?表达式是对变更进行赋值、更改或计算等操作的语句。它是变量、常量、操作符的综合。根据操作符的不类型,可以分为字符操作表达式、赋值表达式、逻辑表达式、关系表达式、自增自减表达式、位表达式等。
719 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载