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 相关文章推荐
popdiv
Jul 14 Javascript
js脚本学习 比较实用的基础
Sep 07 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
js仿京东放大镜效果
Aug 09 Javascript
详解vue身份认证管理和租户管理
May 25 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python实现学生管理系统
2018/01/11 Python
python实现磁盘日志清理的示例
2020/11/05 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
学习标兵获奖感言
2014/02/20 职场文书
学校门卫岗位职责
2014/03/16 职场文书
群教班子对照检查材料
2014/08/26 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
离婚协议书标准格式
2014/10/04 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年度考核工作总结
2014/12/24 职场文书
工作经验交流材料
2014/12/30 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python