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滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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+DBM的同学录程序(5)
2006/10/09 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP二维数组去重算法
2016/12/17 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
javascript实现表单验证
2016/01/29 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python如何求100以内的素数
2020/05/27 Python
Keras设置以及获取权重的实现
2020/06/19 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
微博营销计划书
2014/01/10 职场文书
国际会计专业求职信
2014/08/04 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2015年党总支工作总结
2015/05/25 职场文书