|
9.綁定jQuery函數(shù)到$(window).load事件
大多數(shù)jQuery實(shí)例或教程都告訴我們綁定我們的jQuery代碼到$(document).ready事件。雖然$(document).ready事件在大多數(shù)情況下都OK，但是它的解析順序是在文檔準(zhǔn)備就緒，單文檔中的圖片等對象正在下載的時(shí)候開始運(yùn)行的。所以在某些時(shí)候使用$(document).ready事件并不一定能達(dá)到我們預(yù)期的效果，比如一些視覺效果和動(dòng)畫、拖拽、預(yù)讀取隱藏圖片等…通過使用$(window).load事件便可以安全的在整個(gè)文檔都準(zhǔn)備就緒之后再開始運(yùn)行你期望的代碼。
$(window).load(function(){
// 將你希望在頁面完全就緒之后運(yùn)行的代碼放在這里
});
10.使用jQuery鏈來限定選擇器，讓你的代碼更簡潔更優(yōu)雅
由于JavaScript支持鏈結(jié)構(gòu)而且支持?jǐn)嘈�，所以你的代碼可以寫成下面這樣，這個(gè)例子先在元素上移除一個(gè)class然后在同一個(gè)元素上添加另一個(gè)class：
$('#shopping_cart_items input.in_stock')
.removeClass('in_stock')
.addClass('3-5_days');
如果想讓它更簡單實(shí)用，你可以創(chuàng)建一個(gè)支持鏈結(jié)構(gòu)的jQuery函數(shù)：
$.fn.makeNotInStock = function() {
return $(this).removeClass('in_stock').addClass('3-5_days');
}
$('#shopping_cart_items input.in_stock').makeNotInStock().log();
11.使用回調(diào)函數(shù)同步效果
如果你想確保某個(gè)事件或動(dòng)畫效果要在另一個(gè)事件運(yùn)行之后再調(diào)用，那你就要使用回調(diào)函數(shù)了。你可以在這些動(dòng)畫效果后面綁定回調(diào)函數(shù)：slideDown( speed, [回調(diào)] ) ie. $(’#sliding’).slideDown(’slow’, function(){… 點(diǎn)擊這里預(yù)覽這個(gè)例子.
<style>
div.button { background:#cfd; margin:3px; width:50px;
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
#sliding { display:none; }
</style>
$(document).ready(function(){
// 使用jQuery的click事件改變視覺效果，并開啟滑動(dòng)效果
$("div.button").click(function () {
//div.button 現(xiàn)在看上去是按下的效果
$(this).css({ borderStyle:"inset", cursor:"wait" });
//#sliding 現(xiàn)在將漸隱并在完成動(dòng)作之后開啟漸顯效果
//slideup once it completes
$('#sliding').slideDown('slow', function(){
$('#sliding').slideUp('slow', function(){
//漸顯效果完成后將會(huì)改變按鈕的CSS屬性
$('div.button').css({ borderStyle:"outset", cursor:"auto" });
});
});
});
});
出處：彬Go
責(zé)任編輯：bluehearts
上一頁 jQuery代碼的14條改善技巧 [3] 下一頁 jQuery代碼的14條改善技巧 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 jQuery代碼的14條改善技巧 [4]
