改善你的jQuery的25個(gè)步驟 千倍級效率提升
更新時(shí)間：2010年02月11日 12:56:47 作者：
改善你的jQuery的25個(gè)步驟 -- 從頭看完會(huì)有無數(shù)收獲,千倍級效率提升
1. 從Google Code加載jQuery
Google Code上已經(jīng)托管了多種JavaScript類庫，從Google Code上加載jQuery比直接從你的服務(wù)器加載更有優(yōu)勢。它節(jié)省了你服務(wù)器上的帶寬，能夠很快的從Google的內(nèi)容分布網(wǎng)絡(luò)(CDN)上加載JS類庫。更重要的是，如果用戶訪問那些發(fā)布在Google Code上的站點(diǎn)后它會(huì)被緩存下來。
這樣做很有意義。有多少站點(diǎn)使用了沒有被緩存的相同jQuery副本，而這些很容易做到,引入:
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
2. 使用備忘單
不僅僅是jQuery，很多編程語言也有類似的備忘單，在一張A4的紙上就可以很容易看到每個(gè)函數(shù)的用法。幸運(yùn)的是已經(jīng)有好心的家伙把jQuery的備忘單做得很完善了：
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/
3. 整合所有的腳本并縮減它們
不錯(cuò)，這是JavaScript的一個(gè)常見技巧?？墒且粋€(gè)使用了jQuery的大項(xiàng)目可能使用了很多相關(guān)的jQuery插件(本站就使用了easing,localScroll,lightbox,preload)，因此它通常是適用的。瀏覽器不能同時(shí)加載JS腳本（大多數(shù)情況下），這意味著如果你同一時(shí)間加載很多腳本的話，將減緩頁面的加載速度。因此，如果每個(gè)頁面都要加載這些腳本，你應(yīng)該考慮在發(fā)布之前將這些腳本整合成一個(gè)稍大的JS腳本。一些jQuery插件已經(jīng)最小化了，但是你應(yīng)該打包你的JS腳本和那些沒有縮減過的腳本，這僅需要幾秒的時(shí)間就可以完成。
就個(gè)人而言，我推薦Packer by Dean Edwards
4. 使用Firebug出色的控制臺(tái)日志工具
如果你還沒有安裝Firebug，那么你真的應(yīng)該把它裝上。除了許多其它有用的特性（比如允許你檢查http傳輸情況、發(fā)現(xiàn)你的CSS問題），它也有極好的日志命令，允許你很容易調(diào)試JS腳本。
這里有Firebug所有特性的詳細(xì)說明。
我最喜歡的特性有”console.info“，通過它你可以把信息和變量值輸出到控制臺(tái)上，而不必使用alert；”console.time”則允許你在一組代碼上設(shè)置定時(shí)器，從而計(jì)算出JS腳本運(yùn)行所花費(fèi)的時(shí)間。這一切都很容易做到:
復(fù)制代碼 代碼如下:
console.time('create list');
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
console.timeEnd('create list');
5. 通過緩存最小化選擇操作
jQuery的選擇器棒極了。它們可以在頁面上以極其簡單的方法找到任何元素，但是在內(nèi)部它們必須通過大量的步驟才可以實(shí)現(xiàn)選擇操作，如果你錯(cuò)誤的使用它們，那么你可能發(fā)現(xiàn)一切都變得相當(dāng)慢。
如果你一次又一次的選擇相同元素(例如在一個(gè)循環(huán)中)，那么你可以一次選擇出它并放入內(nèi)存中，同時(shí)你可以在核心內(nèi)容里操作它?？聪旅娴睦?，這里我們利用循環(huán)往UL里添加條目：
復(fù)制代碼 代碼如下:
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
這在我的PC上Firefox 3花費(fèi)了1066毫秒時(shí)間（可以設(shè)想一下在IE6中的情況?。?，對JavaScript而言這個(gè)操作相當(dāng)慢?，F(xiàn)在讓我們來看看下面的代碼，這里我們僅使用了一次選擇操作：
復(fù)制代碼 代碼如下:
var myList = $('.myList');
for (i = 0; i < 1000; i++) {
myList.append('This is list item ' + i);
}
僅僅用了224毫秒，通過移動(dòng)一行代碼就快了將近4倍。
6. 最小化DOM操作
我們通過減少對DOM的插入操作可以讓上面的代碼運(yùn)行得更快。DOM的插入操作（像.append(),.prepend(),.after(),.wrap()）是相當(dāng)耗時(shí)的，執(zhí)行這些操作會(huì)拖慢程序的運(yùn)行。
我們所要做的就是使用字符串拼接來構(gòu)造一個(gè)list項(xiàng)并用一個(gè)函數(shù)往列表里添加這些項(xiàng)，比如.html()。請看下面的例子：
復(fù)制代碼 代碼如下:
var myList = $('#myList');
for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}
在我的PC上花費(fèi)了216毫秒，僅僅在1/5秒左右。但是如果我們使用字符串構(gòu)造list項(xiàng)，使用下面的HTML方法完成插入操作：
復(fù)制代碼 代碼如下:
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myList.html(myListItems);
它耗時(shí)185毫秒，盡管沒有快很多，但是也提高了31毫秒的時(shí)間。
7. 處理DOM插入操作時(shí)，將需要的內(nèi)容包裝在一個(gè)元素中
嗯，不要問我為什么要這樣做（我相信一個(gè)有相當(dāng)經(jīng)驗(yàn)的程序員會(huì)給你解釋）。
在上面的例子中我們使用.html()將1000個(gè)item項(xiàng)插入到UL中。如果在插入操作之前我們將這些項(xiàng)包裝在UL標(biāo)簽中，然后把完整的UL插入到另一個(gè)DIV標(biāo)簽中，那么我們實(shí)際上僅僅插入一個(gè)標(biāo)簽而不是1000個(gè)，這看起來要更高效些。請看下面這個(gè)例子：
復(fù)制代碼 代碼如下:
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
現(xiàn)在所花費(fèi)的時(shí)間僅19毫秒，比我們之前的第一個(gè)例子明顯提高了50倍。
8. 盡可能使用ID而不是class
jQuery利用classes進(jìn)行DOM元素選擇操作與通過ID進(jìn)行選擇一樣容易，因此與之前相比更自由的使用classes進(jìn)行元素選擇操作很有吸引力。不過由于jQuery使用瀏覽器固有的方法（getElementById ）進(jìn)行選擇操作，因此利用ID進(jìn)行選擇操作更有優(yōu)勢。有多快呢？讓我們來看看。
我使用前一個(gè)例子，修改它以便于我們創(chuàng)建的每個(gè)LI有一個(gè)唯一的class。然后我將遍歷之，每次選擇一個(gè)元素：
復(fù)制代碼 代碼如下:
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}
正如所想的，我的瀏覽器花費(fèi)了5066毫秒的時(shí)間（5秒多）。因此我修改上述代碼以使用ID而不是class，然后通過ID進(jìn)行選擇。
復(fù)制代碼 代碼如下:
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}
僅僅耗時(shí)61毫秒，幾乎快了100倍
9. 給選擇器提供上下文
默認(rèn)情況下，當(dāng)你使用類似$('.myDiv')的選擇器時(shí)將在整個(gè)DOM文檔查找元素，這有很大的代價(jià)。
當(dāng)執(zhí)行選擇操作時(shí)，jQuery函數(shù)可以指定第二個(gè)參數(shù)：jQuery( expression, context )通過給選擇器提供一個(gè)上下文，那就會(huì)在這個(gè)context中進(jìn)行元素查找，而不必在整個(gè)DOM文檔中查找元素。
為了解釋這個(gè)，我們采用前面的第一段代碼。它創(chuàng)建一個(gè)有1000項(xiàng)內(nèi)容的UL，每項(xiàng)都有一個(gè)單獨(dú)的class。
然后遍歷之每次選擇一項(xiàng)。你應(yīng)該記得通過class選擇所有的1000項(xiàng)item需要耗時(shí)5秒多。
復(fù)制代碼 代碼如下:
var selectedItem = $('#listItem' + i);
然后我給其添加一個(gè)上下文，以便于僅在UL中執(zhí)行選擇操作：
復(fù)制代碼 代碼如下:
var selectedItem = $('#listItem' + i, $('.myList'));
由于效率太差，仍耗時(shí)3818毫秒的時(shí)間，但是通過一個(gè)很小的修改仍獲得了25%的速度提升。
10. 正確使用方法鏈
jQuery最炫的一個(gè)特性就是jQuery能夠連續(xù)的進(jìn)行方法調(diào)用。舉例來說，你想去切換元素的class：
復(fù)制代碼 代碼如下:
$('myDiv').removeClass('off').addClass('on');
如果你像我這樣，你可能在前五分鐘的jQuery學(xué)習(xí)就可以更進(jìn)一步使用它。首先它仍可以跨行操作(jQuery是JavaScript) ，這意味著你能夠?qū)懗鱿旅孢@樣工整的代碼：
復(fù)制代碼 代碼如下:
$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('<span>This cell is now red</span>');
使用鏈表的習(xí)慣將有助于你減少選擇器的使用。然而可以更深入使用之，你想在一個(gè)元素上執(zhí)行好幾個(gè)函數(shù)，但是以某種方式改變了操作的元素：
復(fù)制代碼 代碼如下:
$('#myTable').find('.firstColumn').css('background','red');
我們選擇了一個(gè)表格，在其中找到class為”firstColumn”的單元格，然后使之背景變?yōu)榧t色。
現(xiàn)在我們希望將所有class為”lastColumn”的單元格背景設(shè)為藍(lán)色。因?yàn)槲覀円呀?jīng)使用了find()函數(shù)過濾出class不為”firstColumn”的所有單元格，因此我們需要再一次對表格使用選擇操作，我們難道不能連續(xù)進(jìn)行方法調(diào)用嗎？幸運(yùn)的是jQuery提供了end()函數(shù)，這將匹配的元素列表變?yōu)榍耙淮螤顟B(tài)以便于你可以執(zhí)行方法鏈表：
復(fù)制代碼 代碼如下:
$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');
寫一個(gè)能夠進(jìn)行方法鏈?zhǔn)秸{(diào)用的自定義jQuery函數(shù)也很容易。你所做的就是要寫個(gè)能修改元素并返回元素的函數(shù)。
復(fù)制代碼 代碼如下:
$.fn.makeRed = function() {
return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');
它很簡單吧！
11. 學(xué)會(huì)正確使用效果
在我剛開始使用jQuery的時(shí)候，就很喜歡這一點(diǎn)：它可以很容易使用預(yù)定義好的各種動(dòng)畫效果，像slideDown()和fadeIn()之類的。由于jQuery提供的animate()方法十分易用和強(qiáng)大，我們很容易深入使用它。事實(shí)上，在jQuery源代碼中不少方法就是通過animate()函數(shù)來實(shí)現(xiàn)效果的。
復(fù)制代碼 代碼如下:
slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},
fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}
animate()方法僅僅作用在CSS上，根據(jù)數(shù)值平滑的進(jìn)行轉(zhuǎn)換。因此你能夠改變寬度、高度、透明度、背景色、top、left、margin、顏色、字體大小以及任何你想要的。
給菜單項(xiàng)添加高度變化的效果是很容易做到的：
復(fù)制代碼 代碼如下:
$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});
不像其他的jQuery函數(shù)，動(dòng)畫效果自動(dòng)的排進(jìn)隊(duì)列，因此如果在第一個(gè)特效完成之后你想運(yùn)行第二個(gè)特效，需要兩次調(diào)用animate方法：
復(fù)制代碼 代碼如下:
$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
});
如果你想動(dòng)畫效果同時(shí)發(fā)生，那么需要將所有的styles作為一個(gè)參數(shù)對象傳入方法中：
復(fù)制代碼 代碼如下:
$('#myBox').mouseover(function() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});
你能夠給值是數(shù)字的屬性添加動(dòng)畫效果。你也可以下載插件幫助你給非數(shù)字值的屬性添加動(dòng)畫效果，像colors and background colors
12. 了解事件代理
與之前相比，jQuery能夠更容易得向DOM元素?zé)o縫添加事件。這是很棒的特性，然而向元素添加太多的事件是效率很差的。在很多情況下事件代理允許你用少量的事件實(shí)現(xiàn)同樣的目的。最好的解釋方法就是使用實(shí)例：
復(fù)制代碼 代碼如下:
$('#myTable TD').click(function(){
$(this).css('background', 'red');
});
當(dāng)我們點(diǎn)擊表格中的單元格時(shí)，上面的代碼將使所有單元格背景變?yōu)榧t色。比方說，你有一個(gè)10列、50行的網(wǎng)格，那么就會(huì)綁定上500個(gè)事件。嗯，這時(shí)就是事件代理出場的時(shí)候了：
復(fù)制代碼 代碼如下:
$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});
e'包含了事件的信息，包括了實(shí)際接收到click事件的目標(biāo)元素。我們所要做的就是檢查是哪個(gè)單元格被點(diǎn)擊了。相當(dāng)?shù)那擅睿?
事件代理帶來了另外一個(gè)好處。正常情況下，在你往一個(gè)元素集合綁定一個(gè)事件，該事件僅僅只是綁定到這些集合元素上。如果你向DOM中添加了新的元素，盡管這些新元素被選擇器所匹配，但是這些新元素并不會(huì)綁定上事件處理（你同意我的觀點(diǎn)嗎？），因此不會(huì)有事件發(fā)生。
當(dāng)使用事件代理時(shí)，你能夠在事件被DOM綁定后仍然可以添加多個(gè)被匹配的元素到其中，而它們同樣能夠正常工作。
13. 利用classes存儲(chǔ)狀態(tài)
這是在html中存儲(chǔ)信息最基本的方法。jQuery擅長基于classes進(jìn)行元素的操作，因此如果你需要存儲(chǔ)元素的狀態(tài)信息，為什么不試試使用額外的class來存儲(chǔ)它呢？
這里有一個(gè)例子。我們想創(chuàng)建一個(gè)展開的菜單。當(dāng)你點(diǎn)擊按鈕時(shí)，我們希望通過slideDown()和slideUp()進(jìn)行菜單的展開與收縮。請看下面的HTML：
復(fù)制代碼 代碼如下:
<div class="menuItem expanded">
<div class="button">
click me
</div>
<div class="panel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</div>
</div>
非常的簡單！我們僅僅向包裝器DIV添加一個(gè)額外的class，它只是告訴我們item項(xiàng)的狀態(tài)。因此在按鈕點(diǎn)擊之后我們所需要的只是click事件處理，這會(huì)執(zhí)行相應(yīng)的slideUp()和slideDown()方法。
復(fù)制代碼 代碼如下:
$('.button').click(function() {
var menuItem = $(this).parent();
var panel = menuItem.find('.panel');
if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});
這是很簡單的一個(gè)例子，不過你可以給一個(gè)元素或HTML片斷添加額外的classes以存儲(chǔ)所有種類的信息。
然而，除了在簡單的情況之外我們更應(yīng)該使用下面這個(gè)技巧。
14. 更好的方法是利用jQuery內(nèi)置的data()方法存儲(chǔ)狀態(tài)
由于某些原因，這方面沒有很好的文檔可以參考。jQuery提供了內(nèi)置的data()方法，與DOM元素不同的是，它可以用來存儲(chǔ)key/value類型的數(shù)據(jù)。數(shù)據(jù)的存儲(chǔ)是很容易的：
復(fù)制代碼 代碼如下:
$('#myDiv').data('currentState', 'off');
我們修改上一個(gè)例子的代碼，以便于我們可以使用相同的HTML內(nèi)容(除了沒有”expanded”類)并使用data()函數(shù)來進(jìn)行狀態(tài)的存儲(chǔ)：
復(fù)制代碼 代碼如下:
$('.button').click(function() {
var menuItem = $(this).parent();
var panel = menuItem.find('.panel');
if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});
我相信你也會(huì)贊同這種方法的使用的確更加的精巧，對于data()和removeData()的更多信息，請查看jQuery internals
15. 寫你自己的選擇器
jQuery有許多內(nèi)置的選擇器用以通過ID、class、標(biāo)簽、屬性以及其他元素進(jìn)行選擇操作。然而當(dāng)你需要基于其它一些內(nèi)容進(jìn)行元素選擇而jQuery卻沒有提供該選擇器時(shí)，你能做什么呢？
嗯，一個(gè)解決方案可能是從一開始就給元素添加上classes，從而利用這些classes進(jìn)行元素的選擇操作。然而這被證明很難對jQuery擴(kuò)展出新的選擇器。
最好的解釋方法就是使用實(shí)例：
復(fù)制代碼 代碼如下:
$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});
代碼的前一部分創(chuàng)建一個(gè)自定義的選擇器，它可以找出所有長度超過100px的元素。接下來的代碼僅僅是將click事件綁定到使用該選擇器查找出來的那些元素上。
這里我不做更具體的講解，但是你能設(shè)想一下它有多么的強(qiáng)大！如果你在google上搜索”custom jquery selector”，你會(huì)看到有很多這方面的例子。
16. 精簡你的HTML并在頁面加載后修改它
這個(gè)標(biāo)題可能沒有多大意思，但是這個(gè)技巧可能理順你的代碼、減小代碼體積和頁面的下載時(shí)間、有助優(yōu)化你的搜索引擎。請看下面的例子：
復(fù)制代碼 代碼如下:
<div class="fieldOuter">
<div class="inner">
<div class="field">This is field number 1</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>
<div class="fieldOuter">
<div class="inner">
<div class="field">This is field number 2</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>
上面是一個(gè)HTML的具體例子，為了解釋目的做了少量修改。我相信你也會(huì)認(rèn)為這段代碼相當(dāng)?shù)某舐?。如果類似代碼很長的話，你最終會(huì)形成一個(gè)相當(dāng)長且丑陋的頁面。因此你可以像下面這樣處理它：
復(fù)制代碼 代碼如下:
<div class="field">This is field 1</div>
<div class="field">This is field 2</div>
<div class="field">This is field 3</div>
<div class="field">This is field 4</div>
<div class="field">This is field 5</div>
所有你要做的就是在頁面加載完成之后通過jQuery的操作將丑陋的HTML添加回去：
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$('.field').before('<div class="fieldOuter"><div class="inner">');
$('.field').after('</div><div class="errorBar"><div class="icon">
<img src="icon.png" alt="icon" /></div><div class="message">
<span>This is an error message</span></div></div></div>');
});
這樣做并不總是可取的，在頁面加載后的一瞬間你將會(huì)看到頁面的閃動(dòng)，但是在特定情況下你有很多重復(fù)的HTML內(nèi)容，這時(shí)通過這個(gè)方法你可以顯著的減小頁面代碼體積，減少無關(guān)且重復(fù)的標(biāo)記能使你的SEO從中受益。
17. 為了速度和SEO方面的考慮，延遲加載內(nèi)容
另外還有一個(gè)方法可以提升頁面加載速度，理順Spiders搜索的HTML內(nèi)容，通過在頁面加載之后使用AJAX請求晚加載其他內(nèi)容，這樣用戶就可以馬上開始瀏覽，讓Spider看到你想要它們進(jìn)行索引的內(nèi)容。
我們已經(jīng)在自己的網(wǎng)站上使用了這個(gè)技術(shù)。本頁面上部的紫色按鈕會(huì)彈出三個(gè)表格，方位與Google地圖，這會(huì)使我們頁面大小增加兩倍。因此我們僅需要把這些HTML內(nèi)容放入一個(gè)靜態(tài)頁面中，在頁面加載完成之后通過load()函數(shù)加載它：
復(fù)制代碼 代碼如下:
$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});
我不會(huì)在頁面上隨處使用這個(gè)技巧。對此，你必須權(quán)衡考慮。你需要有額外的頁面請求，而且頁面上的部分內(nèi)容不能立即呈現(xiàn)給用戶，但是正確的使用這個(gè)技巧對優(yōu)化會(huì)很有幫助。
18. 使用jQuery提供的工具函數(shù)
jQuery不僅僅有閃光的效果。jQuery作者也提供了一些相當(dāng)實(shí)用的方法，這填補(bǔ)了JacaScript的一些缺陷。
http://docs.jquery.com/Utilities
尤其，提供一些常見的數(shù)組函數(shù)的瀏覽器支持是一個(gè)補(bǔ)丁。jQuery提供了迭代、過濾、克隆、合并和從數(shù)組中去除重復(fù)項(xiàng)的方法。
其他常用的函數(shù)包括得到下拉框中的選擇項(xiàng)。用傳統(tǒng)的JavaScript方法，你就必須使用getElementById得到<select>元素，然后通過遍歷它的子元素找出被選中的元素。而jQuery提供了相當(dāng)容易使用的方法：
復(fù)制代碼 代碼如下:
$('#selectList').val();
花時(shí)間瀏覽官方網(wǎng)站上的jQuery文檔與一些不常用的方法上是很值得的。
19. 使用noConflict重命名jQuery對象
大多數(shù)JavaScript框架都使用$符號作為縮寫，當(dāng)在同一個(gè)頁面使用多個(gè)JS框架時(shí)，頁面很容易發(fā)生沖突。幸運(yùn)的是有一個(gè)簡單的方法。noConflict()函數(shù)交回$的控制權(quán)并允許你設(shè)置成自己的變量名：
復(fù)制代碼 代碼如下:
$('#selectList').val();
20. 如何得知圖片已加載完畢
這也一個(gè)沒有很好文檔說明的問題（至少在我查找時(shí)沒看到），但是在創(chuàng)建照片庫、旋轉(zhuǎn)燈籠效果等方面，它是相當(dāng)常見的需求。而這在jQuery中很容易實(shí)現(xiàn)。
所有你要做的就是在IMG上使用.load()方法，在其中添加一個(gè)回調(diào)函數(shù)。下面的例子改變了一個(gè)圖片src的屬性同事附加上一個(gè)簡單的load函數(shù)：
復(fù)制代碼 代碼如下:
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});
你應(yīng)該可以發(fā)現(xiàn)一旦圖片加載完畢就會(huì)彈出一個(gè)alert。
21. 總是使用最新版本
jQuery仍在不斷的更新，它的作者John Resig一直在尋找提高jQuery性能的方法。jQuery當(dāng)前的版本是1.3.2，John已經(jīng)宣稱他正在寫一個(gè)新的選擇器引擎Sizzle，這可能會(huì)顯著的提高選擇器性能（在Firefox中提升了4倍），因此我們應(yīng)當(dāng)保持最新版本。
22. 如何檢查元素是否存在
你不必檢查元素是否在頁面上存在就可以使用它，因?yàn)槿绻麤]有在DOM中找到合適的元素，jQuery什么也不會(huì)做?？墒钱?dāng)我們需要檢查元素是否被選擇了，或是有多少項(xiàng)被選擇了，你可以使用length屬性：
復(fù)制代碼 代碼如下:
if ($('#myDiv).length) {
// your code
}
簡單之極。
23. 給你的HTML屬性增加JS類
我是從Karl Swedberg那學(xué)到這個(gè)技巧，過去學(xué)習(xí)jQuery時(shí)一直在看他的書。
他最近在我以前的文章留下了對該用法的評論，基本原則如下示之。
首先，在jQuery加載之后你可以使用方法將”JS”類添加到HTML標(biāo)簽中：
復(fù)制代碼 代碼如下:
$('HTML').addClass('JS');
因?yàn)檫@僅僅發(fā)生在javascript有效的時(shí)候，如果用戶打開JavaScript開關(guān)，那么你可以使用它給元素添加上CSS風(fēng)格：
復(fù)制代碼 代碼如下:
.JS #myDiv{display:none;}
因此，這意味著在JavaScript打開時(shí)我們可以隱藏內(nèi)容，然后在需要時(shí)使用jQuery顯示這些內(nèi)容（比如在用戶點(diǎn)擊時(shí)收縮或展開內(nèi)容），同時(shí)在關(guān)閉JavaScript（以及搜索Spiders）時(shí)會(huì)看到所有內(nèi)容。我將在晚些時(shí)候使用這個(gè)技巧。
可以在這里看到他的所有文章。
24. 返回'false'以防止默認(rèn)行為
這是很明顯的，也可能不是。如果你有這樣的習(xí)慣：
復(fù)制代碼 代碼如下:
<a href="#" class="popup">Click me!</a>
然后添加上如下的事件處理：
復(fù)制代碼 代碼如下:
$('popup').click(function(){
// Launch popup code
});
你在長頁面使用上述方法時(shí)，它可能可以正常工作。有些時(shí)候你會(huì)注意到在點(diǎn)擊鏈接后錨點(diǎn)會(huì)跳轉(zhuǎn)到頁面上部。
所有你要做的就是阻止它的默認(rèn)行為，或者實(shí)際上你可以把”return false;”添加到任何事件的默認(rèn)行為上。像這樣：
復(fù)制代碼 代碼如下:
$('popup').click(function(){
// Launch popup code
return false;
});
25. ready事件的簡寫
一個(gè)小技巧但是通過使用$(document).ready()的簡寫，你可以少輸入幾個(gè)字符。
取代：
復(fù)制代碼 代碼如下:
$(document).ready(function (){
// your code
});
你可以簡寫成：
復(fù)制代碼 代碼如下:
$(function (){
// your code
});
您可能感興趣的文章:
- multiSteps 基于Jquery的多步驟滑動(dòng)切換插件
- jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享
- 基于jquery實(shí)現(xiàn)的一個(gè)選擇中國大學(xué)的彈框 (數(shù)據(jù)、步驟、代碼)
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- Jquery UI震動(dòng)效果實(shí)現(xiàn)原理及步驟
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- 基于jQuery實(shí)現(xiàn)模擬頁面加載進(jìn)度條
- Jquery Uploadify多文件上傳帶進(jìn)度條且傳遞自己的參數(shù)
- Jquery使用Firefox FireBug插件調(diào)試Ajax步驟講解
- Jquery Uploadify上傳帶進(jìn)度條的簡單實(shí)例
- 一個(gè)簡單的jquery進(jìn)度條示例
- jquery實(shí)現(xiàn)的一個(gè)簡單進(jìn)度條效果實(shí)例
- 基于jquery步驟進(jìn)度條源碼分享
相關(guān)文章
基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)選項(xiàng)卡效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
實(shí)用jQuery分頁特效插件jquery.pagination.js，基于jQuery實(shí)現(xiàn)，本文給大家分享jquery分頁插件之jquery pagination，需要的朋友可以參考下2015-08-08
jQuery代碼實(shí)現(xiàn)實(shí)時(shí)獲取時(shí)間
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)實(shí)時(shí)獲取時(shí)間功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了jQuery實(shí)現(xiàn)切換字體大小的方法,實(shí)例分析了jQuery操作字體css樣式的技巧,需要的朋友可以參考下2015-03-03
jQuery中DOM節(jié)點(diǎn)刪除之empty與remove
DOM節(jié)點(diǎn)刪除相信對每個(gè)初學(xué)jQuery的新手們來說都不陌生，下面這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)刪除之empty與remove的相關(guān)資料，有需要的朋友可以參考借鑒，感興趣的下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格
這篇文章主要介紹了BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格的相關(guān)資料,需要的朋友可以參考下2016-04-04
為了避免和美工沖突，對特定操作對象加上id標(biāo)識(shí)，美工不大改也沒什么問題。2011-01-01
基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼
qq空間的一份虛擬禮物可能會(huì)讓很久不曾相見的朋友拉近一些距離。那么基于jquery代碼是如何實(shí)現(xiàn)此功能的呢？下面腳本之家小編給大家分享基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼，一起看看吧2016-05-05
jquery ajax實(shí)現(xiàn)下拉框三級無刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
jquery ajax實(shí)現(xiàn)下拉框三級無刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)。需要的朋友可以過來參考下，希望對大家有所幫助2013-10-10
用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04