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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
js里的prototype使用示例
Nov 19 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
微信小程序实现点击页面出现文字
Sep 21 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
PHPlet在Windows下的安装
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
送货司机岗位职责
2013/12/11 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
业绩考核岗位职责
2014/02/01 职场文书
商场主管竞聘书
2014/03/31 职场文书
家长会演讲稿
2014/04/26 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
七年级作文之下雨天
2019/12/23 职场文书