jquery选择器原理介绍($()使用方法)


Posted in Javascript onMarch 25, 2014

每次申明一个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中是怎样执行的:

if ( typeof selector == "string" ) 
{
 //正则匹配,看是不是HTML代码或者是#id
    var match = quickExpr.exec( selector );
    //没有作为待查找的 DOM 元素集、文档或 jQuery 对象。
 //selector是#id的形式
 if ( match && (match[1] || !context) ) 
 {
  // HANDLE: $(html) -> $(array)
  //HTML代码,调用clean补全HTML代码
  if ( match[1] ){
   selector = jQuery.clean( [ match[1] ], context );
  }
  // 是: $("#id")
  else {
   //判断id的Dom是不是加载完成
   var elem = document.getElementById( match[3] );
   if ( elem ){
    if ( elem.id != match[3] )
    return jQuery().find( selector );
    return jQuery( elem );//执行完毕return
   }
   selector = [];
  }
  //非id的形式.在context中或者是全文查找
 } 
 else{
  return jQuery( context ).find( selector );
 }
}

这里就说明只有选择器写成$('#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到底是做用的:

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

如果这样写$('#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,而是简单选择器,目的就是定义范围,提高速度。

Javascript 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
vue双向绑定简要分析
Mar 23 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
jquery默认校验规则整理
Mar 24 #Javascript
Javascript连接多个数组不用concat来解决
Mar 24 #Javascript
jqeury-easyui-layout问题解决方法
Mar 24 #Javascript
让table变成exls的示例代码
Mar 24 #Javascript
JQuery 图片滚动轮播示例代码
Mar 24 #Javascript
You might like
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python探索之自定义实现线程池
2017/10/27 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
scrapy-splash简单使用详解
2021/02/21 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
初三学习计划书范文
2014/04/30 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
会计求职自荐信
2015/03/26 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB