jQuery的開篇聲明裏有一段很是重要的話:jQuery是爲了改變javascript的編碼方式而設計的.
從這段話能夠看出jQuery自己並非UI組件庫或其餘的通常AJAX類庫.
jQuery改變javascript編碼方式!
那麼它是如何實現它的聲明的呢?這裏,用如下的一段簡短的使用流程:
1)查找(建立)jQuery對象:$(」selector」);
2)調用jQuery對象的方法完成咱們須要完成的工做:$(」selector」).doOurWork();
ok,jQuery就是以這種能夠說是最簡單的編碼邏輯來改變javascript編碼方式的.這兩個步驟是jQuery的編碼邏輯核心!
要實現這種簡潔編碼方式,建立jQuery對象這一環節相當重要.所以,jQuery的dom元素查找能力至關強悍.此外,jQuery對象的方法確定是有限的,有限的方法知足不了日益增加各有所需的要求,因此,必須提供jQuery對象方法的擴展能力.
強悍的dom元素查找能力,以及爲所欲爲的方法擴展,這兩點正是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方法進行拖拽初始化,在此方法調用時,傳遞一個\」配置」對象,進行拖拽操做的初始化配置.
這一」配置」的思想,極大簡化了一些編碼步驟,並至關直觀和易懂.
如下我進行三個問答:
1) 問:爲何$(selector)以後,返回的是jQuery對象?
答:從jQuery的源代碼中,咱們能夠知道:var $ = jQuery.所以當咱們$(selector)操做時,其實就是jQuery(selector),建立的是一個jQuery對象.固然正確的寫法應該是這樣的:var jq = new $(selector);而jQuery使用了一個小技巧在外部避免了new,在jquery方法內部:if ( window == this ) return new jQuery(selector);
2) 問:爲何建立一個jQuery對象以後,咱們能夠這樣寫$(selector).each(function(index){…});進行遍歷操做呢?
答:其實jQuery(selector)方法調用時,在jQuery(selector)方法內部,最後返回的是一個數組:return this.setArray(a);而each方法體內部是一個for循環,在循環體內是這樣調用的:method.call(this[i],i).
3) 問:爲何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>javascript