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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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脚本中include文件出错解决方法
2008/11/20 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
js图片预加载示例
2014/04/30 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python将字母转化为数字实例方法
2019/10/04 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
new修饰符是起什么作用
2015/06/28 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
2014自主招生自荐信策略
2014/01/27 职场文书
中青班党性分析材料
2014/02/16 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
母亲节演讲稿
2014/05/27 职场文书
农业项目投资意向书
2015/05/09 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS