如何正確有效的學(xué)習(xí)jquery
眾所周知，jQuery現(xiàn)在已經(jīng)非常流行，百度新首頁(yè)中也已經(jīng)開始使用jQuery，所以學(xué)習(xí)它的人很多，為了幫助人更好的學(xué)習(xí)jquery，以下是學(xué)習(xí)啦小編分享給大家的有效的學(xué)習(xí)jquery的方法，希望可以幫到你!
有效的學(xué)習(xí)jquery的方法
1.正確引用jQuery
1.盡量在body結(jié)束前才引入jQuery，而不是在head中。
2.借助第三方提供的CDN來(lái)引入jQuery，同時(shí)注意當(dāng)使用第三方CDN出現(xiàn)問(wèn)題時(shí)，要引入本地的jQuery文件。(對(duì)于已經(jīng)使用了cdn的網(wǎng)站可以忽略，現(xiàn)在用戶帶寬都升級(jí)了，這個(gè)可以忽略了，放別人機(jī)器不一定穩(wěn)定)
3.如果在</body>前引入script文件的話，就不用寫document.ready了，因?yàn)檫@時(shí)執(zhí)行js代碼時(shí)DOM已經(jīng)加載完畢了。
<body>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>
2.優(yōu)化jQuery選擇器
高效正確的使用jQuery選擇器是熟練使用jQuery的基礎(chǔ)，而掌握jQuery選擇器需要一定的時(shí)間積累，我們開始學(xué)習(xí)jQuery時(shí)就應(yīng)該注意選擇器的使用。
<div id="nav" class="nav">
<a class="home" href="http://www.jb51.net">腳本之家</a>
<a class="articles" href="http://www.jb51.net/list/list_172_1.htm">jQuery教程</a>
</div>
如果我們選擇class為home的a元素時(shí)，可以使用下邊代碼：
$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3
1.方法1會(huì)使jQuery在整個(gè)DOM中查找class為home的a元素，性能可想而知。
2.方法2為要查找的元素添加了上下文，在這里變?yōu)椴檎襥d為nav的子元素，查找性能得到了很大提升。
3.方法3使用了find方法，它的速度更快，所以方法三最好。
關(guān)于jQuery選擇器的性能優(yōu)先級(jí)，ID選擇器快于元素選擇器，元素選擇器快于class選擇器。因?yàn)镮D選擇器和元素選擇器是原生的JavaScript操作，而類選擇器不是，大家順便可以看下find context 區(qū)別，find() children區(qū)別。
3.緩存jQuery對(duì)象
緩存jQuery對(duì)象可以減少不必要的DOM查找，關(guān)于這點(diǎn)大家可以參考下緩存jQuery對(duì)象來(lái)提高性能。
4.正確使用事件委托
事件委托可以使事件更好的執(zhí)行，在動(dòng)態(tài)添加的元素上綁定事件也需要委托來(lái)實(shí)現(xiàn)，在新版本的jQuery中推薦大家使用on來(lái)給元素綁定一個(gè)或多個(gè)事件的處理函數(shù)。
<table id="t">
<tr>
<td>我是單元格</td>
</tr>
</table>
比如我們要在上邊的單元格上綁定一個(gè)單擊事件，不注意的朋友可能隨手寫成下邊的樣子：
$('#t').find('td').on('click', function () {
$(this).css({ 'color': 'red', 'background': 'yellow' });
});
這樣會(huì)為每個(gè)td綁上事件，在為100個(gè)單元格綁定click事件的測(cè)試中，兩者性能相差7倍之多，好的做法應(yīng)該是下邊寫法：
$('#t').on('click', 'td', function () {
$(this).css({ 'color': 'red', 'background': 'yellow' });
});
5.精簡(jiǎn)jQuery代碼
如在上述代碼中我們對(duì)jQuery代碼進(jìn)行了適當(dāng)?shù)暮喜?，類似的還有.attr()方法等，我們沒(méi)有寫成下邊的方式：
$('#t').on('click', 'td', function () {
$(this).css('color', 'red').css('background', 'yellow');
});
6.減少DOM操作
剛開始使用jQuery時(shí)可能會(huì)頻繁的操作DOM，這是相當(dāng)耗費(fèi)性能的。如我們要在body中動(dòng)態(tài)輸出一個(gè)表格，一些朋友會(huì)這樣寫：
var $t = $('body');
$t.append('<table>');
$t.append('<tr><td>1</td></tr>');
$t.append('</table>');
好的做法：
$('body').append('<table><tr><td>1</td></tr></table>');
這樣在拼接完table串后再添加到body中，對(duì)DOM的操作只需一次。群里以前有朋友就因?yàn)檫@個(gè)導(dǎo)致在IE下輸出時(shí)出現(xiàn)問(wèn)題，而關(guān)于字符串的拼接可以參考下最快創(chuàng)建字符串的方法。
7.不使用jQuery
原生函數(shù)總是最快的，這點(diǎn)不難理解，在代碼書寫中我們不應(yīng)該忘記原生JS。
就先總結(jié)這幾條吧，每條建議并不難理解，但總結(jié)全面的話還是要花費(fèi)不少時(shí)間的。
有效的學(xué)習(xí)jquery的技巧
1關(guān)于頁(yè)面元素的引用
通過(guò)jquery的$引用元素包括通過(guò)id、class、元素名以及元素的層級(jí)關(guān)系及dom或者xpath條件等方法，且返回的對(duì)象為jquery對(duì)象(集合對(duì)象)，不能直接調(diào)用dom定義的方法。
2jQuery對(duì)象與dom對(duì)象的轉(zhuǎn)換
只有jquery對(duì)象才能使用jquery定義的方法。注意dom對(duì)象和jquery對(duì)象是有區(qū)別的，調(diào)用方法時(shí)要注意操作的是dom對(duì)象還是jquery對(duì)象。普通的dom對(duì)象一般可以通過(guò)$轉(zhuǎn)換成jquery對(duì)象。
如：$(document.getElementById("msg"))則為jquery對(duì)象，可以使用jquery的方法。
由于jquery對(duì)象本身是一個(gè)集合。所以如果jquery對(duì)象要轉(zhuǎn)換為dom對(duì)象則必須取出其中的某一項(xiàng)，一般可通過(guò)索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]這些都是dom對(duì)象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下幾種寫法都是正確的：
$("#msg").html;
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3如何獲取jQuery集合的某一項(xiàng)
對(duì)于獲取的元素集合，獲取其中的某一項(xiàng)(通過(guò)索引指定)可以使用eq或get(n)方法或者索引號(hào)獲取，要注意，eq返回的是jquery對(duì)象，而get(n)和索引返回的是dom元素對(duì)象。對(duì)于jquery對(duì)象只能使用jquery的方法，而dom對(duì)象只能使用dom的方法，如要獲取第三個(gè)
元素的內(nèi)容。
有如下兩種方法：
$("div").eq(2).html;//調(diào)用jquery對(duì)象的方法
$("div").get(2).innerHTML;//調(diào)用dom的方法屬性
4同一函數(shù)實(shí)現(xiàn)set和get
Jquery中的很多方法都是如此，主要包括如下幾個(gè)：
$("#msg").html;//返回id為msg的元素節(jié)點(diǎn)的html內(nèi)容。
$("#msg").html("new content");
//將“new content” 作為html串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁(yè)面顯示粗體的new content
$("#msg").text;//返回id為msg的元素節(jié)點(diǎn)的文本內(nèi)容。
$("#msg").text("newcontent");
//將“new content” 作為普通文本串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁(yè)面顯示new content
$("#msg").height;//返回id為msg的元素的高度
$("#msg").height("300");//將id為msg的元素的高度設(shè)為300
$("#msg").width;//返回id為msg的元素的寬度
$("#msg").width("300");//將id為msg的元素的寬度設(shè)為300
$("input").val(");//返回表單輸入框的value值
$("input").val("test");//將表單輸入框的value值設(shè)為test
$("#msg").click;//觸發(fā)id為msg的元素的單擊事件
$("#msg").click(fn);//為id為msg的元素單擊事件添加函數(shù)
同樣blur,focus,select,submit事件都可以有著兩種調(diào)用方法
有效的學(xué)習(xí)jquery的書籍推薦
JavaScript: 語(yǔ)言精粹
JavaScript: 語(yǔ)言精粹 的作者是 Douglas Crockford，這是一本在 JavaScript 書籍歷史上具有開創(chuàng)性的，是每一位 JavaScript 編程者都需要閱讀的書。 Douglas Crockford 也是 JSON 和 JSLint 的作者，對(duì) JavaScript 的發(fā)展做出了很多貢獻(xiàn)。
JavaScript: 語(yǔ)言精粹 專注于讓 JavaScript 成為最偉大的面向?qū)ο蟮恼Z(yǔ)言。涉及到函數(shù)，對(duì)象，語(yǔ)法，聲明等。這些好的想法和糟糕的點(diǎn)子混在一起是不好，例如： 基于全局變量的編程模型。這本書向你展示了怎樣避開語(yǔ)言有缺陷的地方，利用該語(yǔ)言優(yōu)秀的地方寫出最好的代碼。
JavaScript: 語(yǔ)言精粹 向你展現(xiàn)了無(wú)論你以什么方式使用JavaScript這門語(yǔ)言，都可以寫出優(yōu)雅的代碼的方式。如果你開發(fā)一個(gè)網(wǎng)站或者 Web 應(yīng)用，這本書是必讀的。如果你需要寫出復(fù)雜的交互，做很多計(jì)算并且把JS視為一門面向?qū)ο蟮恼Z(yǔ)言的話，這本書更是你閱讀的首選。
你不知道的 JavaScript
你不知道的 JavaScript 的作者是 Kyle Simpson，這本書是關(guān)于 JavaScript 的系列書籍，其中將會(huì)展現(xiàn)一些你不知道 JavaScript 知識(shí)缺口，也會(huì)教您用來(lái)填補(bǔ)這些缺口的關(guān)于 JavaScript 一切您需要知道的知識(shí)。Kyle Simpson 是最好的 JavaScript 老師之一，任何一位認(rèn)真對(duì)待 JavaScript 的開發(fā)者都應(yīng)該關(guān)注 Kyle 的教學(xué)。
你不知道的 JavaScript 系列書籍著重處理 JavaScript 令人棘手的部分，幫助你成為一位真正的 JavaScript 大師。這系列書籍的知識(shí)點(diǎn)都很相似，并且涵蓋了那些平時(shí)不容易理解的話題。你不知道的 JavaScript 對(duì)每一水平的開發(fā)者都是適用的。書籍對(duì)每一個(gè)知識(shí)點(diǎn)都有具體的解釋，這是它最大的優(yōu)點(diǎn)。
你不知道的 JavaScript 系列書籍對(duì)所有的 JavaScript 開發(fā)者都是必讀書籍。書籍短小精悍，讓你能夠快速讀完，而不會(huì)顯得枯燥。這系列書籍是最建議閱讀的。
JavaScript: 權(quán)威指南
JavaScript: 權(quán)威指南 的作者是 David Flanagan，這是一本“名副其實(shí)”的書，絕對(duì)可以稱得上是最好的 javaScript 書籍之一。David Flanagan 在 Mozilla 工作，他將生命中很多時(shí)間都投注于編程相關(guān)書籍的寫作中。
JavaScript: 權(quán)威指南 分為兩個(gè)部分: 討論和參考。每個(gè)部分又包含核心章節(jié)和客戶端章節(jié)。核心章節(jié)涵蓋了語(yǔ)言的特點(diǎn)，比如： 數(shù)據(jù)類型，函數(shù)，類等?？蛻舳苏鹿?jié)涵蓋了 JavaScript 在瀏覽器中的使用。JavaScript: 權(quán)威指南 基于作者的經(jīng)驗(yàn)提供了準(zhǔn)確的文檔。
JavaScript: 權(quán)威指南 有多個(gè)版本，每隔幾年就會(huì)更新一次，這是好的地方。這本書經(jīng)常改進(jìn)，作者也參與到新版本的制定，包含一些其他 JavaScript 書籍缺少的東西。無(wú)論是哪個(gè)版本，這本書的核心都和 JavaScript 語(yǔ)言規(guī)范保持一致。
JavaScript: 權(quán)威指南 是一本關(guān)于 JavaScript 的權(quán)威性的指南，從每一個(gè)基本的語(yǔ)法開始到高級(jí)特性。JavaScript: 權(quán)威指南 屬于每個(gè)編程開發(fā)者的書架，強(qiáng)力推薦。
JavaScript 忍者秘籍
JavaScript 忍者秘籍 的作者是 John Resig, Bear Bibeault 和 Josip Maras ，是一本經(jīng)典作品，把你變成 JavaScript 的編程忍者高手。John Resig 是 jQuery 的作者，Bear Bibeault 是一位 web 開發(fā)者， Josip Maras 是一位博士后.
JavaScript 忍者秘籍 由四部分組成。每一個(gè)部分聚焦在幾個(gè)話題上，并且這些是相互關(guān)聯(lián)的，從基礎(chǔ)到高級(jí)。這些話題包括函數(shù)，對(duì)象，原型，promise 等。 這本書有大量有用的的總結(jié)和練習(xí)。
JavaScript 忍者秘籍 用非常實(shí)際的例子清楚地解釋每個(gè)核心概念和技術(shù)。JavaScript 忍者秘籍 也包含了 API ,最佳實(shí)踐，跨瀏覽器測(cè)試等。
JavaScript 忍者秘籍 非常的巧妙, 并不令人驚奇，因?yàn)樽髡哂写罅康拈_發(fā)經(jīng)驗(yàn)。JavaScript 忍者秘籍 建議每一位想成為高手的開發(fā)者閱讀。
猜你喜歡：
2.如何系統(tǒng)游有效學(xué)習(xí)java基礎(chǔ)