快捷導(dǎo)航

jquery原理以及學(xué)習(xí)技巧介紹

更新時(shí)間：2015年11月11日 09:56:53 投稿：lijiao

JQuery上手簡(jiǎn)單，也很容易學(xué)，即使是剛接觸JQuery的開(kāi)發(fā)人員，借助JQuery手冊(cè)，也很快能在項(xiàng)目中使用開(kāi)發(fā)，這篇文章針對(duì)jquery原理以及學(xué)習(xí)技巧進(jìn)行介紹，感興趣的小伙伴們可以參考一下

對(duì)于JQuery，想必大家都很熟悉。目前，很多web項(xiàng)目，在實(shí)施的過(guò)程中，考慮到各瀏覽器原生JS API的兼容性，大都會(huì)選用JQuery或類(lèi)似于JQuery這樣的框架來(lái)進(jìn)行網(wǎng)頁(yè)效果開(kāi)發(fā)。JQuery上手簡(jiǎn)單，也很容易學(xué)，即使是剛接觸JQuery的開(kāi)發(fā)人員，借助JQuery手冊(cè)，也很快能在項(xiàng)目中使用開(kāi)發(fā)。

雖然JQuery相對(duì)簡(jiǎn)單，但要全面掌握，且快速靈活的使用它也并不那么容易，它提供了很多方法，包含了網(wǎng)頁(yè)開(kāi)發(fā)的各個(gè)知識(shí)面，所以要全面掌握這些知識(shí)點(diǎn)，個(gè)人認(rèn)為還是需要對(duì)jquery有深入的理解，對(duì)這些知識(shí)點(diǎn)做分類(lèi)整理記憶，這樣你才能面對(duì)一些JQuery代碼的時(shí)候不會(huì)感到迷惑，才會(huì)知道采用何種方式實(shí)現(xiàn)某個(gè)特效是最佳實(shí)踐，才能快速的采用JQuery來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)。

簡(jiǎn)單模擬JQuery

JQuery里的代碼是出了名的刁鉆，里面的奇技淫巧太多太多，如果你想通過(guò)源碼來(lái)學(xué)習(xí)JQuery，沒(méi)有一定的功底是很難做到的。所以下面寫(xiě)一個(gè)非常簡(jiǎn)單的庫(kù)來(lái)模擬JQuery，方便大家理解。
總體代碼

(function(window) {
 var doc = window.document;
 // -------------代碼段二 ------------------
 var JQuery = function(selector) {
  return new JClass(selector);
 }
 
 // --------------- 代碼段三 ----------------
 JQuery.html = function(obj) {
  if(obj && obj.nodeType === 1) {
   return obj.innerHTML;
  }
 }
 
 // ---------代碼段一 --------------
 var JClass = function(selector) {
  if (selector.nodeType ) { // 如果傳入的是DOM元素
 this.length = 1;
  }else if(selector.charAt(0) === '#') { //如果傳入的是'#..'形式
 this.length = 1;
   this[0] = doc.getElementById(selector.slice(1));
  }else if(typeof selector === 'string') {
   //傳入的是字符串，假設(shè)全部為html標(biāo)簽 ，如'div' 'p'等
   var nodes = doc.getElementsByTagName(selector);
   this.length = nodes.length;
   for(var i=0,len=nodes.length;i<len;i++) {
    this[i] = nodes[i];
   }
  }else { //都不是的話(huà)，就不識(shí)別咯
   this.length = 0;
  }
 };
 
 // ------------ 代碼段四 --------------------
 JQuery.prototype.html = function() {
  if(this[0]) {
   return JQuery.html(this[0]);
  }
 }
 JClass.prototype = JQuery.prototype; 

 // ------------ 代碼段五 ---------------
 window.$ = window.JQuery = JQuery;
 
}(window));

首先，先看代碼段一，我們創(chuàng)建一個(gè)javascript引用類(lèi)型，可以根據(jù)該引用類(lèi)型以及輸入的參數(shù)創(chuàng)建一個(gè)實(shí)例對(duì)象，輸入的參數(shù)模擬JQuery選擇參數(shù)，但沒(méi)有JQuery強(qiáng)大，支持部分類(lèi)型。

我們知道，可以通過(guò)new JClass(...)來(lái)構(gòu)造一個(gè)實(shí)例對(duì)象，這沒(méi)問(wèn)題，但是JClass也是一個(gè)函數(shù)，可以被直接調(diào)用，而直接調(diào)用并不是我們想要的結(jié)果，為了防止JClass被開(kāi)發(fā)人員直接調(diào)用，我們不能將JClass暴露給開(kāi)發(fā)人員，那我們只能通過(guò)代碼段二方式來(lái)構(gòu)造JClass實(shí)例對(duì)象。

在代碼段二，我們可以將JQuery暴露給開(kāi)發(fā)人員，因?yàn)闊o(wú)論是通過(guò)new JQuery()還是JQuery(),返回的都是JClass實(shí)例對(duì)象，這是我們要的結(jié)果。

在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，為了代碼的復(fù)用，我們常常會(huì)提供一些工具方法來(lái)方便開(kāi)發(fā)，既然JQuery是完全暴露給開(kāi)發(fā)人員使用的，我們完全可以將這些工具方法作為JQuery的靜態(tài)屬性。具體可參照代碼段三，當(dāng)然，我們還可以按照這種方式添加其它的工具方法如text,val,attr,css ........

這些工具方法確實(shí)不錯(cuò)。JClass實(shí)例對(duì)象（封裝了DOM）也存在一些公用的方法，正好這些方法也可以借助工具方法來(lái)實(shí)現(xiàn)，那怎么為JClass實(shí)例對(duì)象創(chuàng)建公用方法呢？可以通過(guò)代碼段四的方式實(shí)現(xiàn)（如果對(duì)這里不理解，請(qǐng)百度JS的原型繼承概念）。

最后可通過(guò)代碼段五，將JQuery取個(gè)別名 $ 且作為全局變量暴露出來(lái)。然后將代碼引入到HTML文件中進(jìn)行測(cè)試，可參照下面代碼：

<html>
<head>
 <title>jquery-t2</title>
 <script src="JQ.js"></script>
</head>
<body>
 <div style="margin:10px 10px;">
  <span id='result'>
  點(diǎn)擊看效果
  </span>
 </div>
 <div id='tst'>div文本值</div>
</body>
<script>
 alert($.html(document.getElementById('result '))); //點(diǎn)擊看效果
 alert($('span').html()); //點(diǎn)擊看效果
 alert($('#tst').html()); //div文本值
</script>
</html>

JQuery的知識(shí)點(diǎn)分類(lèi)

通過(guò)上面模擬的JQuery庫(kù)，我們應(yīng)該可以大概知道JQuery的主要功能：通過(guò)強(qiáng)大的選擇器獲得DOM元素，然后針將這些DOM元素的日常操作封裝成對(duì)應(yīng)的方法，如取值、賦值、修改、刪除等，同時(shí)JQuery還為網(wǎng)頁(yè)開(kāi)發(fā)提供了一些工具類(lèi)方法，如each、ajax、isArray、extend等。所以總的來(lái)說(shuō)，JQuery知識(shí)點(diǎn)可分為三大類(lèi)：

JQuery選擇器
JQuery對(duì)象的操作，如DOM操作、表單操作等
JQuery的工具方法
JQuery插件編寫(xiě)（知識(shí)擴(kuò)展）

JQuery太流行了，網(wǎng)上的資料太多太多，以致于很多初學(xué)者根本不知道從哪學(xué)起，這里看一篇博客，那里翻一翻源碼，收集了大量的資料，最后發(fā)現(xiàn)根本沒(méi)時(shí)間學(xué)習(xí)，即使花了大量的時(shí)間學(xué)習(xí)，學(xué)習(xí)到的JQuery也成不了一個(gè)體系，到最后全部忘記了。開(kāi)發(fā)的時(shí)候又只能去翻手冊(cè)，一直翻手冊(cè)能寫(xiě)出好的代碼么？不可能吧。

下面我分享一下個(gè)人認(rèn)為比較好的資料供初學(xué)者一步一步學(xué)習(xí)。

JQuery入門(mén)(書(shū)籍+一篇博客)
鋒利的JQuery（第二版）
JQuery設(shè)計(jì)思想
JQuery深入學(xué)習(xí)（深入學(xué)習(xí)JQuery和javascript很好的資料）
JQuery源碼分析系統(tǒng)

JQuery的一些概念

學(xué)習(xí)永遠(yuǎn)都不是記憶，記憶的東西遲早會(huì)被遺忘。真正要學(xué)習(xí)一門(mén)技術(shù)，最基本的原則就是要理解它。學(xué)習(xí)JQuery也是，在學(xué)習(xí)JQuery的知識(shí)點(diǎn)時(shí)，你首先要理解一些概念來(lái)輔助你理解這些知識(shí)點(diǎn)。 JQuery中的概念主要有這三個(gè)： JQuery()、JQuery對(duì)象和DOM對(duì)象。

先說(shuō)DOM對(duì)象，這個(gè)很簡(jiǎn)單，它定義了訪(fǎng)問(wèn)HTML文檔對(duì)象的一套屬性、方法和事件，沒(méi)有JQuery前，我們通常直接操作DOM，比較熟悉的API有g(shù)etElementById 、GetElementByTagName等。

JQuery，它在JQuery中有個(gè)別名 $ 。通過(guò)上面章節(jié)的模擬代碼（對(duì)應(yīng)模擬代碼中的JQuery)可知，其實(shí)就是一個(gè)函數(shù)，說(shuō)得更細(xì)致點(diǎn)就是JQuery對(duì)象的工廠(chǎng)方法，它可以根據(jù)不同的入?yún)?lái)構(gòu)造JQuery對(duì)象，如：

字符串表達(dá)式。如 $('span') 、$('span .class')、$('#id')等
HTML 代碼片段。如 $('<span>text</span>') 等
DOM元素。如$(dom) //假設(shè) var dom = document.getElementById('id');
JS Function 。如 $(function(...) { ... } ); 一般對(duì)象或數(shù)組。如 { ｝、[ ... ]等

JQuery除了能創(chuàng)建JQuery對(duì)象的同時(shí)，JQuery自身也有很多靜態(tài)方法，也可以稱(chēng)為工具方法，如 each、ajax、trim等。這些工具方法不僅在網(wǎng)頁(yè)設(shè)計(jì)時(shí)常常會(huì)被用到，而且也會(huì)被當(dāng)作工具方法用來(lái)實(shí)現(xiàn)JQuery對(duì)象的原型方法。

JQuery對(duì)象，非常重要的一個(gè)概念，類(lèi)似于模擬代碼中的JClass實(shí)例，通常是通過(guò)JQuery構(gòu)造出的實(shí)例。在JQuery中，我們常常見(jiàn)到的JQuery對(duì)象是這樣的： $('#id') 、$('div')等。關(guān)于JQuery對(duì)象我們要明白以下幾點(diǎn)：

1、JQuery對(duì)象繼承了JQuery原型(prototype）的所有屬性和方法
2、JQuery對(duì)象不是數(shù)組，但是采用了類(lèi)似數(shù)組的結(jié)構(gòu)來(lái)存儲(chǔ)元素，而且存儲(chǔ)的元素是通過(guò)選擇器獲取得到的DOM對(duì)象。參照上面章節(jié)的模擬代碼(JClass實(shí)例對(duì)象），JQuery對(duì)象有個(gè)length屬性，表示當(dāng)前對(duì)象里存儲(chǔ)DOM對(duì)象的個(gè)數(shù)，而這些通過(guò)選擇獲得的DOM對(duì)象，是采用下標(biāo)為0、1、2、3 ... 作為屬性名來(lái)進(jìn)行存儲(chǔ)的。所以，根據(jù)以上特性，我們完全可以通過(guò)下面這種方式來(lái)訪(fǎng)問(wèn)元素：

var objs = $('div');
for(var i=0,len=objs.length;i<length;i++) {
 var o = objs[i]; //獲取dom元素
 ... ...
}

綜合來(lái)說(shuō)，JQuery、JQuery對(duì)象、DOM對(duì)象三者之間的關(guān)系是： JQuery是個(gè)工廠(chǎng)方法，用來(lái)構(gòu)造JQuery對(duì)象； JQuery對(duì)象是個(gè)類(lèi)數(shù)組對(duì)象，里面存儲(chǔ)了DOM對(duì)象；

理解了三者之間的關(guān)系，我們?cè)诶斫庀旅嬷R(shí)點(diǎn)時(shí)，相對(duì)來(lái)說(shuō)也就比較容易了：

關(guān)于過(guò)濾選擇器如何理解？如$('div:first') 。
如果理解了JQuery對(duì)象的內(nèi)部結(jié)構(gòu)，理解JQuery的過(guò)濾選擇器就很容易了，如 :first 其實(shí)就是取JQuery對(duì)象屬性為'0'的對(duì)象（封裝成JQuery對(duì)象），同理 :last取的是屬性為 length-1 的元素，:eq(index)取的是屬性為index的元素。

在JQuery中，如何驗(yàn)證某個(gè)元素是否為空？

var $o = $('div .class');
if($ == null) { // 錯(cuò)誤的做法
 //什么都沒(méi)找到
 ......
 } 
//正確的做法 
if($o.html() == null) {
 //什么都沒(méi)找到
 ... ...
 } 
//正確的做法 
if($o.length) {
 //什么都沒(méi)找到
... ...
 }

JQuery對(duì)象和DOM對(duì)象如何轉(zhuǎn)換？

var dom = document.getElementById('id');
// DOM對(duì)象轉(zhuǎn)換成JQuery對(duì)象
var $dom = $(dom); // 參照J(rèn)Query對(duì)象的構(gòu)造方式

// 將JQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象
for(var i=0,len=$dom.length;i<length;i++) {
 var o = $dom[i]; //獲取dom元素
 ... ...
}

總結(jié)

關(guān)于JQuery，上手雖然簡(jiǎn)單，但如果要高效快速的使用開(kāi)發(fā)，還是需要好好理解下JQuery的。以上只是個(gè)人學(xué)習(xí)過(guò)程中的一些感悟和整理，建議各位在學(xué)習(xí)時(shí)也按照自己的思維習(xí)慣形成一套自己的知識(shí)體系，一來(lái)便于日后的開(kāi)發(fā)，二來(lái)也便于查閱別人的代碼。最后附注一些有意思的小問(wèn)題，各位有興趣就思考下吧。

問(wèn)題一. 你覺(jué)得下面哪種方式代碼好一點(diǎn)？為什么？

 // 方式一
var $text = $("#text");
var $ts = $text.text();

//方式二
var $text = $("#text");
var $ts = $.text($text);

問(wèn)題二. 下面代碼中的this是什么呢？大概實(shí)現(xiàn)原理有什么？

全選復(fù)制放進(jìn)筆記
$('#box').click(function(){ 
 var obj = this;
 ... ...
}

以上就是關(guān)于jquery原理以及學(xué)習(xí)技巧介紹，內(nèi)容很充實(shí)，信息量很大，需要同學(xué)耐心學(xué)習(xí)，希望從中有所收獲吧。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線(xiàn)工具

數(shù)據(jù)庫(kù)

CMS

常用工具

jquery原理以及學(xué)習(xí)技巧介紹

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具