关于jquery的选择器原理

当我们使用jquery选择器的时候,$(s).回默认去执行jquery内部封装好的一个init的构造函数

每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象。

这个init不是jquery.fn上的方法,而是内部源码的一个函数。

这个函数是干什么用的呢?

当我们使用选择器的时候$(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');这两种写法的执行结果都是一样的。

都是先去查找执行init,找到id了,立刻返回return。 然后再去执行find()函数方法。

find也就是到当前dom对象下去查找选择器。

但是如果直接$('.className')的话, 这样的是去执行init函数,然后到全局全文里,全部的dom对象一个个查找遍历。

效率相比前面的低很多。

就是说第一层选择最好是ID,而是简单选择器,目的就是定义范围,提高速度。

原文地址:https://www.cnblogs.com/joesbell/p/5950209.html