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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
webpack 模块热替换原理
Apr 09 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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个人网站架设连环讲(二)
2006/10/09 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
新手入门常用代码集锦
2007/01/11 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
一个基于flask的web应用诞生(1)
2017/04/11 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python多进程读图提取特征存npy
2019/05/21 Python
python中的协程深入理解
2019/06/10 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
感恩节活动方案
2014/01/27 职场文书
秘书英文求职信范文
2014/01/31 职场文书
迟到检讨书300字
2014/02/14 职场文书
餐饮投资计划书
2014/04/25 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL