jQuery.prototype.init選擇器構造函數源碼思路分析
2024-05-06 14:19:41
供稿：網友
一、源碼思路分析總結
概要：
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屬性
實際執行代碼為：
代碼如下:
