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 相关文章推荐
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
JS计算斐波拉切代码实例
2019/09/12 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python实现对输入的密文加密
2019/03/20 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
中专自荐信
2013/10/13 职场文书
护理专业个人求职简历的自我评价
2013/10/13 职场文书
函授本科毕业生自我鉴定
2013/10/16 职场文书
打架检讨书800字
2014/01/10 职场文书
工作会议方案
2014/05/21 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
出国签证在职证明范本
2014/11/24 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书