zoukankan      html  css  js  c++  java
  • 关于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,而是简单选择器,目的就是定义范围,提高速度。

  • 相关阅读:
    Git本地windows凭证账号更改
    解决vue ui创建项目很慢的原因
    跨域问题总结
    JS柯里化
    vue diff算法讲解
    当面试官问你闭包时,他究竟想听到些什么?
    JS中的 ==
    必须知道的 prototype, [[prototype]], __proto__
    Deepcopy in Javascript
    http问题整理
  • 原文地址:https://www.cnblogs.com/joesbell/p/5950209.html
Copyright © 2011-2022 走看看