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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 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
destoon二次开发入门示例
2014/06/20 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
List the Codec Files on a Computer
2007/06/18 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
关于vue面试题汇总
2018/03/20 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
跟老齐学Python之变量和参数
2014/10/10 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python中常用的内置方法
2019/01/28 Python
python输出决策树图形的例子
2019/08/09 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Python文件操作基础流程解析
2020/03/19 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
军人违纪检讨书
2014/02/04 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
大学生实习介绍信
2015/05/05 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书