jQuery.prototype.init选择器构造函数源码思路分析-工具盒子

一、源码思路分析总结
概要：
jQuery的核心思想可以简单概括为"查询和操作dom"，今天主要是分析一下jQuery.prototype.init选择器构造函数，处理选择器函数中的参数；
这个函数的参数就是jQuery()===$()执行函数中的参数，可以先看我之前写的浅析jQuery基础框架一文，了解基础框架后，再看此文。
思路分析:
以下是几种jQuery的使用情况(用于查询dom)，每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象)，该对象包含查询的dom节点)：
1、处理 $(""), $(null), $(undefined), $(false)
如果参数为以上非法值，jQuery对象不包含dom节点
2、处理 $(DOMElement)
如果参数为节点元素，jQuery对象包含该参数节点元素，并分别增加属性值为参数节点元素、1的context、length属性和用[]访问jQuery对象中dom节点的用法
例2.1：
++复制代码++ 代码如下:

var obj = document.getElementById('container'),
jq = $(obj);

console.log(jq.length); //1
console.log(jq.context); //obj
console.log(jq.[0]); //obj

3、处理$(HTML字符串)
如果第一个参数为HTML字符串，jQuery对象包含由jQuery.clean函数创建的fragment文档碎片中的childnodes节点
例3.1：
++复制代码++ 代码如下:

var jqHTML = $('<h1>文章标题</h1><p>内容</p>');
console.log(jqHTML); //[<h1>,<p>];

如果第一个参数(HTML字符串)为一个空的单标签，且第二个参数context为一个非空纯对象
例3.2：
++复制代码++ 代码如下:

var jqHTML = $('<div></div>', { class: 'css-class', data-name: 'data-val' });

console.log(jqHTML.attr['class']); //css-class
console.log(jqHTML.attr['data-name']); //data-val

4、处理$(#id)
如果第一个参数是一个#加元素id，jQuery对象包含唯一拥有该id的元素节点，
并分别增加属性值为document、参数字符串、1、的context、selector、length属性和用[]访问jQuery对象中dom节点的用法
例4.1：
++复制代码++ 代码如下:

var jq = $('#container');

console.log(jq.[0]); //包含的dom节点元素
console.log(jq.length); //1
console.log(jq.context); //document
console.log(jq.selector); //container

5、处理$(.className)
如果第一个参数是一个.className，jQuery对象中拥有class名为className的标签元素，并增加一个属性值为参数字符串、document的selector、context属性
实际执行代码为：
++复制代码++ 代码如下:

return jQuery(document).find(className);

6、处理$(.className, context)
如果第一个参数是.className，第二个参数是一个上下文对象(可以是.className(等同于处理$(.className .className))，jQuery对象或dom节点)，
jQuery对象包含第二个参数上下文对象中拥有class名为className的后代节点元素，并增加一个context和selector属性
实际执行代码为：
++复制代码++ 代码如下:

return jQuery(context).find(className);

例6.1：
html代码:
++复制代码++ 代码如下:

<div class="main">
<h2 class="title">主内容标题</h2>
<p>主标题</p>
</div>
<div class="sub">
<h2 class="title">次内容标题</h2>
<p>次标题</p>
</div>

JavaScript代码：
++复制代码++ 代码如下:

var jq, context;
context = '.sub';
var jq = $('.title', context);
console.log(jq.text()); //次内容标题
console.log(jq.context); //document
console.log(jq.selector); //.sub .title
context = $('.sub');
var jq = $('.title', context);
console.log(jq.text()); //次内容标题
console.log(jq.context); //document
console.log(jq.selector); //.sub .title
context = $('.sub')[0];
var jq = $('.title', context);
console.log(jq.text()); //次内容标题
console.log(jq.context); //className为sub的节点元素
console.log(jq.selector); //.title

7、处理$(fn)
如果第一个参数是fn函数，则调用$(document).ready(fn);
例7.1：
++复制代码++ 代码如下:

$(function(e){
console.log('DOMContent is loaded');
})
//上面代码等同于：
jQuery(document).ready(function(e) {
console.log('DOMContent is loaded');
});

8、处理$(jQuery对象)
如果第一个参数是jQuery对象，上面已经分析过如果在查询dom时，参数是一个#加元素id，返回的jQuery对象会增加一个属性值为参数字符串、document的selector、context属性
例8.1：
++复制代码++ 代码如下:

var jq = $('#container');
console.log(jq.selector); // #container
console.log(jq.context); // document

那么当出现$($('#container'))该如何处理呢？同样的，返回的jQuery对象同情况5和6处理的情况一样
例8.2：
++复制代码++ 代码如下:

var jq2 = $($('#container'));
console.log(jq2.selector); // #container
console.log(jq2.context); // document

二、源码注释分析
[ 基于jQuery1.8.3 ]
++复制代码++ 代码如下: