快捷導(dǎo)航

jQuery的鏈?zhǔn)秸{(diào)用淺析

更新時間：2010年12月03日 19:00:53 作者：

并不是所有的瀏覽器都暴露了dom的對象原型,所以不能通過簡單擴(kuò)展原型方法并通過return this的形式來實(shí)現(xiàn)跨瀏覽器的鏈?zhǔn)秸{(diào)用,jquery采用了包裝器的方式來解決了這個問題。

jQuery式的方法鏈核心部分是三點(diǎn)：
1)jquery的包裝器函數(shù)（也就是jQuery(),以此來構(gòu)建包裝器對象）,以此構(gòu)造函數(shù)可以產(chǎn)生飽含了原生DOM對象的包裝器對象。
它大概是這個樣子的…(當(dāng)然跟官方庫的規(guī)模跟功能以及實(shí)現(xiàn)方式都差很多，我只是寫了個大概的實(shí)現(xiàn)方式)：
呃…………我的失誤,請大家如果有興趣嘗試下代碼記得不要引入jQuery庫，命名沖突了

復(fù)制代碼代碼如下:

 
(function(){ 
//簡化起見不支持子類選擇器屬性選擇器等等,只接受形如".className"或者"#id"或者"tagName"以及它們之間的組合形式 自定義的工具函數(shù)（紅色）會在下面說明 
function _jQuery(els){ 
this.elements = new Array(); 
for (var i = 0; i < els.length; i++) { 
var element = els[i]; 
if (typeof element == 'string') { 
element = element.trim(); //防止手抽多打入前后的空格 
var sign = element.substr(0, 1); 
if (sign == "#") { //按id查找 
element = document.getElementById(element.substr(1)); 
this.elements.push(element); 
} 
else 
if (sign == ".") { 
//按類名查找 這里用到一個自定義的按類名返回dom數(shù)組的工具函數(shù)getElementsByClassName 
element = getElementsByClassName(element.substr(1)); //element此時為數(shù)組對象,此方法為自定義見下文 
this.elements = this.elements.merge(element); 
} 
else { //無任何標(biāo)識符按標(biāo)簽名查找 
element = document.getElementsByTagName(element); //element此時為數(shù)組對象 
this.elements = this.elements.merge(element);//這個方法可以使得elements數(shù)組中只會存在不相同的dom對象 就如同set一樣 
} 
} 
else { 
this.elements.push(element); 
} 
} 
} 
/*這里可以開始擴(kuò)展包裝器對象的原型函數(shù)比如 
_ jQuery.prototype.addEvent=function(){………} 
*/ window['jQuery'] = function(){ return new _jQuery(arguments) }; if (!window['$']) window['$'] = window['jQuery']; })()//自執(zhí)行匿名函數(shù) 

OK了插入下面這段簡單html文檔來測試一下(不要鄙視偶的這個html寫的規(guī)范不規(guī)范…測試而已)

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>my function addtion</title> 
</head> 
<body> 
<div id="header"> 
<p id="header1" class="entrance"> 
header1 
</p> 
<p id="header2"class="entrance"> 
header2 
</p> 
<p id="header3"class="entrance"> 
<a href="http://chabaoo.cn/index.html">header3</a> 
</p> 
</div> 
<hr/> 
<div id="content" class="news"> 
<p id="content1" class="topic"> 
node1 
</p> 
<p id="content2" class="topic"> 
node2 
</p> 
<p id="content3" class="topic"> 
<a href="http://chabaoo.cn/index.html">node3</a> 
</p> 
</div> 
<hr/> 
<div id="foot"> 
<p id="foot1" class="entrance"></p> 
</div> 
</body> 
</html> 

輸入:

復(fù)制代碼代碼如下:

 
var f=$(‘#header').elements[0]; 
consoles.write("nodeName: "+f.nodeName+"==> Id:"+f.id) 
/*自定義的代替alert的一個調(diào)試面板工具,由于在用的這個是照搬的某本書上的有點(diǎn)bug而且功能和操作性都不太好,過兩天可能我會修改一下在放上來，自己調(diào)試可以用alert代替*/ 

輸出：

輸入:

復(fù)制代碼代碼如下:

 
var e=jQuery(' div ',' p').elements; //這里故意多輸了幾個空格 
for(var i=0;i<e.length;i++){ 
consoles.write("nodeName: "+e[i].nodeName+"==> Id:"+e[i].id); 
} 

輸出：

雖然整合了dom對象查找的幾個方法，但是還是可以看到每次都使用循環(huán)語句來操作dom對象是一件十分煩躁的事情，并且接下來還會以此包裝器為基礎(chǔ)引入很多針對此包裝器對象的方法比如上面的addEvent方法等等，這些方法的引入最終是為了操作對象中包裝的原生dom對象，所以每一個方法中又必須引入for或者while語句,這個引出第二個核心函數(shù)==> jQuery.each(){}; 太晚了…明天再總結(jié)
本文使用到的工具函數(shù)(都是很有用的函數(shù))：

復(fù)制代碼代碼如下:

 
//className:類名 tag:在此標(biāo)簽名范圍內(nèi)尋找 parent:在此父節(jié)點(diǎn)內(nèi)尋找 
function getElementsByClassName(className, tag, parent){ 
parent = parent || document; //缺省默認(rèn)為document 
var tag = tag || '*'; //缺省默認(rèn)為查找所有標(biāo)簽 
var elements = new Array(); 
var re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
var allList = parent.getElementsByTagName(tag); 
var element; 
for (var i = 0; i < allList.length; i++) { 
element = allList[i]; 
if (element.className.match(re)) { 
elements.push(element); 
} 
} 
return elements; 
} 

復(fù)制代碼代碼如下:

 
if (!String.prototype.trim) {//去除首尾空格 
String.prototype.trim = function(){ 
return this.replace(/^\s+|\s+$/g, ''); 
} 
} 

if (!Array.prototype.merge) { 
Array.prototype.merge = function(arr){ //使得數(shù)組有類似set的特性 相同的對象無法放入同一個數(shù)組不要鄙視偶算法的問題只是闡述下原理 
for (var i = 0; i < arr.length; i++) { 
var signals=false; 
for (var j = 0; j < this.length; j++) { 
if (arr[i] == this[j]) 
signals=true; 
} 
if (!signals) this.push(arr[i]); 
} 
return this; 
} 
} 