jquery源码解析:jQuery原型方法init的详解

先来了解几个jQuery方法:

<li></li>

<li></li>

<li></li>

$("li")  ->  this  ->  jQuery对象  ->    {  0 : "li", 1 : "li", 2 : "li", length : 3  }

$("<li>aaa")  的效果跟   $("<li>")的效果是一样的。

然后来看一下init方法,也就是新建jQuery对象调用的方法:

jQuery.fn = jQuery.prototype = {

  jquery: core_version,        //jQuery的版本

  constructor:jQuery,          //修正constructor的指向,不写这个的话,constructor会指向Object,因此你重写了JQuery的prototype。

   //新建一个构造函数时,会自动在构造函数的prototype对象中新添constructor属性(指向构造函数)。但是为了防止原型对象的覆盖,比如:Person.prototype = {};这时里面的constructor指向会出问题,需要修正,Person.prototype = { constructor: Person}

  init:function(selector,context,rootjQuery){

    var match,elem;

    if(!selector){             //处理这种情况:$(""), $(null), $(undefined), $(false)

      return this;

    }

    if ( typeof selector === "string" ) {
      if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
        // $("<li>")  ->   match = [ null, "<li>", null ];

        // $("<li>1</li><li>2</li>")  ->   match = [ null, "<li>1</li><li>2</li>", null ];
        match = [ null, selector, null ];

      } else {

        //    此正则rquickExpr匹配后,会出现以下几种情况:

        //  1. match = null;           $(".box"), $("div"), $("#div1 div.box")

        //  2. match = ["#div1",null,"div1"];    $("#div1")

        //  3. match = ["<li>aaa","<li>",null];  $("<li>aaa")     

        match = rquickExpr.exec( selector );
      }

      // $("#div1")通过id匹配元素,是在document中执行,不会传入context,所以context为空,因此进入if语句
      if ( match && (match[1] || !context) ) {

        if ( match[1] ) {   // $("<li>"), $("<li>aaa"),$("<li>1</li><li>2</li>")

          //context就是document,因为创建元素只能在document中执行。但是页面里面有iframe时,iframe中的document与页面的document不同,所以$("<li>",document)有第二个参数。一般用不上。
          context = context instanceof jQuery ? context[0] : context;

          //$("<li>",$(document)),得到原生的document。         

          jQuery.merge( this, jQuery.parseHTML(match[1],context && context.nodeType ? context.ownerDocument || context : document,
true
          ) );

          //parseHTML方法:第一个参数传入标签字符串"<li>",第二个参数传入执行上下文document,第三个参数true代表可以新建script标签"<script><\/script>"(script前面的反斜杠需要转义,其他标签不需要),false代表不能。返回值是一个数组:$("<li>") ->   ["li"],  $("<li>1</li><li>2</li>") ->["li","li"]

          //merge方法是把数组转换成jQuery对象:["li"] ->  {0:"li",length:1} ;["li","li"]   ->  {0:"li",1:"li",length:2}

          rsingleTag匹配单标签的,$("<li>"),$("<li></li>")
          if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {

            //$("<li>",{title:"hi",html:"abcd"})  针对这种情况的,context 为json对象。
            for ( match in context ) {
              //如果属性是jQuery方法,就执行方法
              if ( jQuery.isFunction( this[ match ] ) ) {
                this[ match ]( context[ match ] );

              
              } else {

                //如果不是方法,就设置属性。
                this.attr( match, context[ match ] );
              }
            }
          }

          return this;

         
        }

        else {
          elem = document.getElementById( match[2] );

          // Blackberry 4.6:elem存在,但是页面上没有,所以添加了elem.parentNode,如果都满足,则elem一定存在页面上。
          
          if ( elem && elem.parentNode ) {
            this.length = 1;
            this[0] = elem;
          }

          this.context = document;
          this.selector = selector;    //"#div"
          return this;
        }

     
      }

      else if ( !context || context.jquery ) {
          return ( context || rootjQuery ).find( selector );  //rootjQuery  = $(document)

          // 处理这种$(expr, context),context是否是jQuery对象(context.jquery存在就是jQuery对象),会转换成$(context).find(expr)

          //或者$(expr),会转换成$(document).find(expr)
      }

      else {   //如果context存在,但是不是jQuery对象,就执行
          return this.constructor( context ).find( selector );   //新建jQuery对象,并调用find方法
      }       

    }

    else if ( selector.nodeType ) {       //如果是dom节点,比如:$(document)  
          this.context = this[0] = selector;
          this.length = 1;
          return this;

    }

    else if ( jQuery.isFunction( selector ) ) {     //文档加载有两种方式:$(function(){});$(document).ready(function(){});
          return rootjQuery.ready( selector );
    }

    if ( selector.selector !== undefined ) {      //$($("#div1")),当传入jQuery对象时
        this.selector = selector.selector;
        this.context = selector.context;
    }

    return jQuery.makeArray( selector, this );     //传入数组和json对象时,比如:$([]),$({})

    //makeArray把selector(类数组)转换成数组(外部使用),当传入第二个参数时(内部使用),就会转换成jQuery对象的形式。

  },

  length:0,    //匹配到的元素的长度,默认为0.

  ......

};

加油!

时间: 2024-10-13 22:16:54

jquery源码解析:jQuery原型方法init的详解的相关文章

十七.jQuery源码解析之入口方法Sizzle(1)

函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: 1.解析选择器表达式,解析出块表达式和关系符. 2.如果存在位置伪类,则从左向右查找: a.查找第一个块表达式匹配的元素集合,得到第一个上下文元素集合. b.遍历剩余的块表达式和块间关系符,不断缩小上下文元素集合. 3.否则从右向左查找: a.查找最后一个块表达式匹配的元素集合,得到候选集,映射集

jQuery 源码分析(十九) DOM遍历模块详解

jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装和扩展,用于在DOM树中遍历父元素.子元素和兄弟元素. 可以通过jQuery的实例来访问,方法如下: parent()             ;获取匹配元素的父元素 parents(selector)         ;获取匹配元素的所有祖先元素                        ;s

JQuery源码解析-JQuery的工具方法(3)

这篇文章主要对下面这几个方法进行解释 error();抛出异常 parseHTML():解析节点 parseJSON():解析JSON parseXML:解析XML noop():空函数 globalEval():全局解析JS camelCase():转驼峰 nodeName():是否为指定节点(内部) error:方法: error方法的作用是抛出一个自定义异常,内部直接调用了原生解释的throw new Error error: function( msg ) { throw new Err

JQuery源码解析-JQuery的工具方法(2)

这篇对下面的方法进行讲解: isFunction():是否为函数 isArray():是否为数组 isWindow():是否为window isNumeric()是否为数字 type():判断数据类型 isPlainObject():是否为对象自变量 isEmptyObject():是否为空的对象 isFunction方法: 这个方法很简单,判断对象是否为函数,返回bool类型,看一下源码: // See test/unit/core.js for details concerning isFu

JQuery源码解析-JQuery的工具方法(5)

下面对最后这几个方法进行讲解. guid():唯一表示(内部) proxy():改变this指向 access(): 多功能值操作 now():当前时间 swap():css交换(内部) guid: 这个属性是对事件进行控制的,例如每次对dom元素进行绑定事件的时候,会通过这个属性进行绑定,这个属性每次自增,产生一个唯一的标示,所以对dom元素进行事件解绑等操作的时候,通过这个属性就可以找到. 源码: // A global GUID counter for objects guid: 1, p

JQuery源码解析-JQuery的工具方法(4)

下面对这些方法进行讲解 each():遍历集合 trim():去前后空格 makeArray():类数组转换真数组 inArray():数组版indexOf merge():合并数组 grep():过滤新数组 map():映射新数组 each方法: each是遍历集合用的方法,也是一个加强版的循环操作.例如: var arr = { Name: 'jam', Age: 15 }; $.each(arr, function (key, val) { console.log(key + ":&quo

jQuery源码分析(九) 异步队列模块 Deferred 详解

deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容) 异步队列有三种状态:待定(pending).成功(resolved)和失败(rejected),初始时处于pending状态 我们可以使用jQuery.Deferred创建一个异步队列,返回一个对象,该对象含有如下操作: done(fn/arr

四.jQuery源码解析之jQuery.fn.init()的参数解析

从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出 参数selector和context是来自我们在调用jQuery方法时传过来的.那么selector和context都有哪些可能. 对于表格中的4~9行中的可能做具体分析. 如果selector是字符串,则首先检测是html代码还是#id. 126行的if语句:以"<"开头,以">"结尾,且长度>=3.则假设额这个是HT

jQuery方法源码解析--jQuery($)方法(一)

jQuery方法源码解析--jQuery($)方法 注: 1.本文分析的代码为jQuery.1.11.1版本,在官网上下载未压缩版即可 2.转载请注明出处 jQuery方法: 这个方法大家都不陌生,在使用过程中,它还有另外一个名字,美元符号:$,$(...)其实就是jQuery(...); 它有很多种用法,通常都返回一个jquery对象,也可以作为$(document).ready(...);的简写形式,分析之前先看一下jQuery都有什么用法. 1.jQuery( selector [, co