JQuery选择器$()的工作原理浅析

每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同。泗阳县民用航空局

当我们使用选择器的时候$(selector,content),就会执行init(selectot,content),我们看看inti中是怎样执行的:

view source

print?

01 if ( typeof selector == "string" )
02 {
03     //正则匹配,看是不是HTML代码或者是#id
04     var match = quickExpr.exec( selector );
05     //没有作为待查找的 DOM 元素集、文档或 jQuery 对象。
06     //selector是#id的形式
07     if ( match && (match[1] || !context) )
08     {
09         // HANDLE: $(html) -> $(array)
10         //HTML代码,调用clean补全HTML代码
11         if ( match[1] ){
12             selector = jQuery.clean( [ match[1] ], context );
13         }
14         // 是: $("#id")
15         else {
16             //判断id的Dom是不是加载完成
17             var elem = document.getElementById( match[3] );
18             if ( elem ){
19                 if ( elem.id != match[3] )
20                 return jQuery().find( selector );
21                 return jQuery( elem );//执行完毕return
22             }
23             selector = [];
24         }
25         //非id的形式.在context中或者是全文查找
26     }
27     else{
28         return jQuery( context ).find( selector );
29     }
30 }

这里就说明只有选择器写成$(‘#id‘)的时候最快,相当于执行了一次getElementById,后边的程序就不用再执行了。当然往往我们需要的选择器并不是这么简单,比如我们需要id下的CSS为className, 有这样的写法$(‘#id.className‘)和$(‘#id‘).find(‘.className‘);这两种写法的执行结果都是一样的,比如<div id=”id”><span class=”className”></span></div>,返回的肯定都是<span class=”className”></span>,但是执行的效率是完全不一样的。

在分析一下上边的代码,如果不是$(‘#id‘)这样的简单选择器的话,都会执行find函数,那我们再看看find到底是做用的:

view source

print?

01 find: function( selector ) {
02     //在当前的对象中查找
03     var elems = jQuery.map(this, function(elem){
04         return jQuery.find( selector, elem );
05     });
06     //下边的代码可以忽略,只是做一些处理
07     //这里应用了js的正则对象的静态方法test
08     //indexOf("..")需要了解一下xpath的语法,就是判断selector中包含父节点的写法
09     //本意就是过滤数组的重复元素
10     return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
11         jQuery.unique( elems ) :
12         elems );
13 }

如果这样写$(‘#id .className‘),就会执行到扩展的find(‘#id .className‘,document),因为当前的this是document的jQuery数组,那我们在看看扩展的find他的实现,代码比较 多,就不列出来,总之就是从第二个参数传递进行的dom第一个子节点开始找,遇见#比对id,遇见.比对ClassName,还有:<+-等处理。 那我们要优化,是不是就要想办法让第二个参数context的范围最小,那样遍历是不是就很少了?

如果我们这样写$(‘#id‘).find(‘.className‘),那程序只这样执行 的,第一次init的时候执行一步getElementById,就return了,接着执行 find(‘.className‘,divDocument),divDocument就是我们第一次选择的是div标签,如果document下有很 多dom对象的时候,这次只遍历divDocument是不是少了很多次,而且在第一次选择id的速度也要比遍历快的多。

现在大家应该是明白了吧。就是说第一层选择最好是ID,而是简单选择器,目的就是定义范围,提高速度。

时间: 2024-10-07 16:28:23

JQuery选择器$()的工作原理浅析的相关文章

Kubernetes NetworkPolicy工作原理浅析

Kubernetes能够把集群中不同Node节点上的Pod连接起来,并且默认情况下,每个Pod之间是可以相互访问的.但在某些场景中,不同的Pod不应该互通,这个时候就需要进行访问控制.那么如何实现呢? 简介 ??Kubernetes提供了NetworkPolicy的Feature,支持按Namespace和按Pod级别的网络访问控制.它利用label指定namespaces或pod,底层用iptables实现.这篇文章简单介绍Kubernetes NetworkPolicy在Calico上的工作

OpenVAS漏洞扫描插件工作原理浅析

开始阅读此文之前请安装好OSSIM v4.15OpenVAS釆用***测试原理,利用Scanner模块中的脚本引擎对目标进行安全检测.Openvas的Scanner的扫描性能依赖于同时进行扫描的并发进程数,不同的硬件环境上可设置的最有效并发扫描数各不相同,Openvas的扫描引擎设备可在保证系统稳定的前提下达到最佳的扫描性能,对于大型网络使用标准设备进行部署可大大降低安装和维护成本.脚本引擎根据用户提交的配置与要求,首先对脚本进行加载与调度,按照顺序依次调用脚本并解析执行,实现扫描功能. 0.什

SPI协议及其工作原理浅析

转载自:http://bbs.chinaunix.net/thread-1916003-1-1.html一.概述. SPI, Serial Perripheral Interface, 串行外围设备接口, 是 Motorola 公司推出的一种同步串行接口技术. SPI 总线在物理上是通过接在外围设备微控制器(PICmicro) 上面的微处理控制单元 (MCU) 上叫作同步串行端口(Synchronous Serial Port) 的模块(Module)来实现的, 它允许 MCU 以全双工的同步串

缓冲池工作原理浅析

Ⅰ.缓冲池介绍 innodb存储引擎缓冲池(buffer pool) ,类似于oracle的sga,里面放着数据页 .索引页 .change buffer .自适应哈希 .锁(5.5之前)等内容 综上所示: 每次读写数据都是通过Buffer Pool 当Buffer Pool中没有用户所需要的数据时才去硬盘中获取 通过innodb_buffer_pool_size进行设置总容量,该值设置的越大越好 Ⅱ.缓冲池性能问题 2.1 性能线性扩展 假设服务器72核,ht超线程后,144个逻辑核,跑测试按

jQuery工作原理解析

jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的. 从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库. jQuery改变javascript编码方式! 那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程: 1)查找(创建)jQuery对象:$(”selector”); 2)调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork(); ok,jQuery就是以这种可

jQuery的工作原理

jQuery是为了改变javascript的编码方式而设计的. jQuery本身并不是UI组件库或其他的一般AJAX类库. 那么它是如何实现它的声明的呢? 先看一段简短的使用流程: (1).查找(创建)jQuery对象:$(”selector”); (2).调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork(): 可以说,是用最简单的编码逻辑来改变javascript编码方式的. 有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对

jQuery工作原理解析以及源代码示例

jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的. 从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库. jQuery改变javascript编码方式! 那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程: 1)查找(创建)jQuery对象:$(”selector”); 2)调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork(); ok,jQuery就是以这种可

【Ceph浅析笔记】Ceph的工作原理

本章主要对Ceph的工作原理进行介绍. 寻址过程 如果Client来了一个请求,不管个请求是读还是写都需要先寻址,才能找到数据应该放哪里或者说需要从哪里去. 之前我们说过Ceph的寻址方式是基于计算的,这样就避免的查表,也避免了使用一个单独的元数据服务器. 概述 对于Client传来的一个File,为了方便处理,我们可以将其分割为若干大小相同的小块Object. 然后可以将这些Object映射到OSD上,如果使用一种固定的映射算法,则一个Object每次都会固定的映射到一组OSD上,那么如果这个

Ajax和Jsonp的工作原理,以及区别。

Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求.AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据. 过程的话 第一步:创建一个ajax引擎对象,ie6的是new ActiveXObject其他浏览器是new一个xmlHttpRequest对象 第二步 调用open方法启动一个请求以备