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