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

  • 相关阅读:
    centOS7虚拟机连接大网
    [CSP-S模拟测试48]反思+题解
    [CSP-S模拟测试47]反思+题解
    [bzoj2456]mode 题解
    [CSP-S模拟测试45]题解
    [CSP模拟测试43、44]题解
    [CSP-S模拟测试41]题解
    [NOIP模拟测试38]题解
    一些idea
    [NOIP模拟测试37]反思+题解
  • 原文地址:https://www.cnblogs.com/joesbell/p/5950209.html
Copyright © 2020-2023  润新知