3. init: function(){}

这个方法很重要，这个方法要需要处理的情况比较多。下面举些例子

$(function(){});     // 当dom加载完成后就调用此方法(我们自己写的代码都在这里面)
$("li");                   // 选择所有的li标签
$("
"); // 创建元素
$("li", $(".class1")); // 选择所有的li标签，这个li标签必须在.class1标签下

可以看到init方法中有大量的if判断(毕竟要完成大量的判断呢)， 我们先整理下吧。写个简版吧。

jQuery源码中也给每一种的情况写了注释，在jQuery源码算是少见的注释了。

情况一
// 容错处理 $(""), $(null), $(undefined), $(false)
if (!selector) {
    return this;
}
情况二
// 字符串的情况: 如选择器$("div")， $("div p") ， 创建元素, $("
")，$("
")
if (typeof selector === "string"){

情况三
// $(this), $(document) 
}else if(selector.nodeType){

情况四  
// $(function(){})
}else if(jQuery.isFunction(selector){
    
}

if (){}

情况一:

这是容错处理，就算用户乱输入，也尽量不报错

 

情况二: 

情况二比较复杂，因为我们不但能选择元素，还能创建元素。

选择器可能是复杂选择器(如"div p")，也可能是简单选择器(如"div").

创建的元素可能是单个元素，也可能是多个元素。因此采取的策略都不太一样。

// 111-117
if (selector.charAt(0) === "" && selector.length >= 3){ // 创建元素  情况1

　　　　match = [null, selector, null];

}else{ // 选择器    情况2

　　　　match = rquickExpr.exec(selector);

}

这个if判断还是很长的。首先这个字符串的第一个字符得是 ， 其次这个选择器的长度得大于等于3.

这么一看, 那便是创建 元素的情况。 $("

")和$("

")

 

有人可能会问了，假如我传入了这种的 $("

123")。jQuery会怎么处理?

这种情况肯定是走else了，放心，在else中会针对这种情况来进行处理的。

 

 

else语句中的rquickExpr是啥?

那是一个正则表达式(75行)

rquickExpr = /^(?:\s*()[^>]*|#([\w-]*))$/,

源码也有详细的解释

// A simple way to check for HTML strings
// Prioritize #id over  to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with 

 

我来稍微说一个这个正则表达式吧。(如果看明白了这个正则表达式，也就知道了match的结果了)

rquickExpr = /^(?:\s*()[^>]*|#([\w-]*))$/

^必须是什么什么开始
$ 必须以什么什么结束

(?:\s*()[^>]*|#([\w-]*))
这是为啥子要包裹一下括号，而且还有?:
这是非捕获型分组，主要是提高性能用的。

\s*()[^>]*|#([\w-]*)
\s (space)是空格的意思。\r\n\f\v\\x20 等都可以被认为是空格

*代表可以重复0次或多次。*可以联想到天上的星星。有时候没有，而有时候数都数的不过来

注意到中间有一个管道符，这代表或的意思。
情况一
()[^>]*

情况二
#([\w-]*))


情况一
()[^>]*
注意分组内容 
这个正则很有意思 
必须以 开头，中间的字符任意(包括空格)， 个数大于等于1。
[^>]* 代表除了^之外，啥字符都能匹配的上，匹配次数是0次或者多次


情况二
#([\w-]*) 
这是匹配id选择器用的
第一个字符得是 #
[\w-]的字符范围比较广，0到9，a到z，A到Z以及字符-。

View Code

 

下面是情况1和情况2的总结

情况1总结

可能的情况: $("

") 和 $("

")

match的结果: 

1. $("

") [null, ‘

‘, null] 2. $("

") [null, ‘

‘, null]

情况2总结

可能的情况: $("#main") $("div p") $("

rquickExpr = /^(?:\s*()[^>]*|#([\w-]*))$/

1. $("#main") 
["#main", undefined, "main"]

2. $("div p")  // 对，没错，选择器其实不在这里做处理
null 

3. $("

// 120-174

if (match && (match[1] || !context)){

// 创建标签或者id选择器的情况

// id选择器的match的第二个元素为undefined，但是id选择器是没有context的。
// context是啥? $(“li”, $("div")) $的第二个参数便是context，但我们如果使用id选择器的话，是不会传入第二个参数来缩小上下文的。
// 因此id选择器也算一个

　　if (match[1]){
　　// 创建标签的情况，见下面
　　　　

　　}else{
　　// id选择器的情况， 见下面
　　
　　}

}else if (!context || context.jquery){

}else{

}

// 124
context = context instanceof jQuery ? context[0] : context;

$("li", $("div")); //此时context便是jQuery的实例，但是这玩意不能直接用的，因此要将jQuery转为dom。
// (因为jQuery实例是一种伪数组的形式，因此直接context[0])

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

var arr1 = [1,2];
var arr2 = [3,4];
$.merge(arr1, arr2);
console.log(arr1);  //  [1,2,3,4]
console.log(arr2);  //  [3,4]


var obj = {
    0: 1,
    1: 2,
    length: 2
}
var arr3 = [3,4];
$.merge(obj, arr3);
console.log(obj);  // {0:1, 1:2, 2:3,3:4, length: 4}
console.log(arr3); // [3,4]

$.parseHTML("

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

context && context.nodeType ? context.ownerDocument || context : document

$("

{
    0: li      
}

$("
", {title: 111, html: 123}}).appendTo($(document.body));

// 
123

if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) {
    for (match in context) {
        // Properties of context are called as methods if possible
        if (jQuery.isFunction(this[match])) {
            this[match](context[match]);

            // ...and otherwise set as attributes
        } else {
            this.attr(match, context[match]);
        }
    }
}

rsingleTag = /^(?:|)$/

\1 是反向引用，这里的字符得和第一个分组的结果一样,即这部分 (\w+)

如果是这样的html字符 

if (jQuery.isFunction(this[match]))

$("

return this;

// 调用原生方法
elem = document.getElementById(match[2]);

// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
// 通过这个索引(#6963)可以去jQuery官网查看更详细的说明
// 这里也写了原因，是因为黑莓4.6删除了node后，这个node还会存在。因为需要判断下这个node的父节点在不在
if (elem && elem.parentNode) {
    // Inject the element directly into the jQuery object
    this.length = 1;
    this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;

else if (!context || context.jquery){
    return (context || rootjQuery).find(selector);
}
// rootjQuery = jQuery(document); 见867行

$(‘li‘)               // context 不存在 $(document).find(‘li‘)

$(‘li‘, $(‘div‘))     // $(‘div‘).find(‘li‘)