jQuery工做原理解析以及源代碼示例

jQuery的開篇聲明裏有一段很是重要的話：jQuery是爲了改變javascript的編碼方式而設計的。從這段話能夠看出jQuery自己並非UI組件庫或其餘的通常AJAX類庫。jQuery改變javascript編碼方式！javascript

那麼它是如何實現它的聲明的呢？這裏，用如下的一段簡短的使用流程：一、查找(建立)jQuery對象：$("selector"); 二、調用jQuery對象的方法完成咱們須要完成的工做：$("selector").doOurWork();html

好了，jQuery就是以這種能夠說是最簡單的編碼邏輯來改變javascript編碼方式的。這兩個步驟是jQuery的編碼邏輯核心！java

要實現這種簡潔編碼方式，建立jQuery對象這一環節相當重要。所以，jQuery的dom元素查找能力至關強悍。此外，jQuery對象的方法確定是有限的，有限的方法知足不了日益增加各有所需的要求，因此，必須提供jQuery對象方法的擴展能力。強悍的dom元素查找能力，以及爲所欲爲的方法擴展，這兩點正是jQuery的核心所在！jquery

來一個簡單的示例，來講明jQuery是如何工做的：編程

< !DOCTYPE html PUBLIC 」-//W3C//DTD XHTML 1.0 Transitional//EN」 」http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> 
<html xmlns=」http://www.w3.org/1999/xhtml」 > 
<head> 
<title>無標題頁</title> 
</head> 
<body id=」bd」> 
<a href=」http://www.baidu.com」>baidu</a> 
</body> 
</html> 
<script type=」text/javascript」 src=」../Script/jquery.js」></script> 
<script type=」text/javascript」 > 
$(function(){ 
	$(「a「).click(function(e){//1)查找$(」a」);2)jQuery對象事件click;3)jQuery對象方法hide 
	$(this).hide(「slow「); 
	return false; 
}); 
}); 
</script>

jQuery中有一個「配置」的思想，這一點使得對象的屬性/事件等設置變得容易理解且十分簡便，以下一個拖拽組件的初始化：數組

$(document).ready( 
	function() 
	{ 
	$(’#drag1′).Draggable({ 
		handle: 「ax「, //屬性設置 
		onStart: function(el,x,y){ //事件監聽器設置 
		} 
	}); 
	} 
);

能夠看到，$("#drag1")是查找並建立一個jquery對象，而後調用Draggable方法進行拖拽初始化，在此方法調用時，傳遞一個「配置」對象，進行拖拽操做的初始化配置。這一「配置」的思想，極大簡化了一些編碼步驟，並至關直觀和易懂。app

如下我進行三個問答：框架

一、問：爲何$(selector)以後，返回的是jQuery對象？dom

答：從jQuery的源代碼中，咱們能夠知道：var $ = jQuery 。所以當咱們$(selector)操做時，其實就是jQuery(selector)，建立的是一個jQuery對象。固然正確的寫法應該是這樣的：var jq = new $(selector); 而jQuery使用了一個小技巧在外部避免了new，在jquery方法內部：if ( window == this ) return new jQuery(selector);ide

二、問：爲何建立一個jQuery對象以後，咱們能夠這樣寫$(selector).each(function(index){…});進行遍歷操做呢？

答：其實jQuery(selector)方法調用時，在jQuery(selector)方法內部，最後返回的是一個數組：return this.setArray(a); 而each方法體內部是一個for循環，在循環體內是這樣調用的：method.call(this[i]，i) 。

三、問：爲何jQuery能作到jQuery對象屬性/方法/事件的插件式擴展？

答：若是您有一些javasciprt的面向對象方面的知識，就會知道，jQuery.prototype原型對象上的擴展屬性/方法和事件，將會給jQuery的對象「擴展」。基於這一點，jQuery是這樣寫的：jQuery.fn = jQuery.prototype 。因此，當咱們擴展一個插件功能時，以下：

jQuery.fn.check = function() { return this.each(function() { this.checked = true; }); };

其實就是：

jQuery.prototype.check = function() { return this.each(function() { this.checked = true; }); };

綜上所述,jQuery給咱們帶來了一個簡潔方便的編碼模型(1>建立jQuery對象;2>直接使用jQuery對象的屬性/方法/事件),一個強悍的dom元素查找器($),插件式編程接口(jQuery.fn),以及插件初始化的」配置」對象思想.

附:實現本身的jQuery

< !DOCTYPE html PUBLIC 」-//W3C//DTD XHTML 1.0 Transitional//EN」 」http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> 
<html xmlns=」http://www.w3.org/1999/xhtml」> 
<head> 
<title>Untitled Page</title> 
</head> 
<body> 
<div id=」d」>divvv</div> 
<div id=」fsd」>fdsf</div> 
</body> 
</html> 
<script type=」text/javascript」> 
//實現本身的MyQuery框架 
var MyQuery = function(selector){ 
if ( window == this ) return new MyQuery(selector); 
//這裏只實現dom類型的簡單查找,嘿嘿 
var doms = document.getElementsByTagName(selector); 
var arr = []; 
for(var i=0; i<doms .length; i++){ 
arr.push(doms.item(i)); 
} 
return this.setArray(arr); 
} 
MyQuery.prototype.setArray = function( arr ) { 
this.length = 0; 
[].push.apply( this, arr ); 
return this; 
} 
MyQuery.fn = MyQuery.prototype; 
var $ = MyQuery; 
//插件擴展1)each 
MyQuery.fn.each = function(method){ 
for(var i=0,l=this.length; i<l; i++){ 
method.call(this[i],i); 
} 
} 
//插件擴展2)show 
MyQuery.fn.show = function(){ 
this.each(function(i){ 
alert(i+「:「+this.id+「:「+this.innerHTML); 
}); 
} 
//debugger 
$(「div「).show(); 
</script></doms></script>