JavaScript和JQuery實用代碼片段（一）

更新時間：2010年04月07日 13:53:42 作者：

JavaScript和JQuery實用代碼片段，喜歡學習jquery的朋友可以參考下。

（一）怎樣用JQuery刷新一幅圖片？
說明：我們都知道，當我們在請求一個資源（比如網(wǎng)頁，圖片等）的時候，如果該資源被緩存到瀏覽器了，那么請求返回的就是緩存的副本，不是我們希望獲取的資源（該資源內(nèi)容已經(jīng)被更新了），此時最普遍的一個辦法就是在請求的頁面后面或者圖片的src后面加上一個查詢字符串"ran=" + Math.random()，這樣就會請求到最新版本的資源啦！
代碼：

復制代碼代碼如下:

$(imageObj).attr('src',$(imageObj).attr('src') + '?' + Math.random());

（二）怎樣用JQuery查看一幅圖片是否被完全加載？
說明：在一個頁面未加載完全的時候調(diào)用JavaScript操作常常會失敗，因為此時DOM未解析完畢?？梢栽趙indoiw.onload方法中執(zhí)行要執(zhí)行的JavaScript/JQuery方法（此時圖片肯定加載完成，可以獲取其高度等屬性），也可以在$(function(){})中執(zhí)行(此時DOM雖解析完畢，但是所請求的資源未必全部加載完成)。
如果在使用圖片之前，要事先檢測圖片是否加載完成，可以采用如下的代碼：
代碼：

復制代碼代碼如下:

 
var imgsrc = "img/img.png"; 
$(imageObj).load(function() 
{ 
alert('圖片加載完成'); 
}).error(function() 
{ 
alert('圖片加載出錯'); 
}).attr('src',imgsrc); 

（三）怎樣用JQuery查看多幅幅圖片是否被完全加載？
說明：說明如上，加入你頁面有十幅圖片要加載，此時可以設置一個變量記錄加載圖片數(shù)，當該變量等于總的圖片數(shù)時，加載就大功告成了！

復制代碼代碼如下:

 
var totalImages = 10; 
var loadedImages = 0; 
$('img').load(function() 
{ 
++loadedImages; //此處為閉包 
if(loadedImages == totalImages) 
{ 
alert('所有圖片加載完畢！'); 
} 
}); 

（四）怎樣用JQuery對無序列表（ul）排序？
說明：有時候我們需要對一個無序列表（ul）排序（當然可以用有序列表ol），但是ul能夠提供更多定制功能，且能自定義排序器。
代碼：（1）待排序列表為：

復制代碼代碼如下:

 
<ul class='to_order'> 
<li>cloud</li> 
<li>sun</li> 
<li>rain</li> 
<li>snow</li> 
</ul> 

（2）JQuery代碼為：

復制代碼代碼如下:

 
var items = $('.to_order li').get(); //獲取所有待排序li 
items.sort(function(a,b) //調(diào)用javascript內(nèi)置函數(shù)sort，參數(shù)為一閉包函數(shù)，也就是排序器 
{ 
var keyA = $(a).val(); 
var keyB = $(b).val(); 
if(keyA < keyB) return -1; 
if(keyA > keyB) return 1; 
return 0; 
}); 
var ul = $('.to_order'); 
$.each(items,function(i,li) //此時items為排好隊的集合 
{ 
ul.append(li); 
}); 

（五）怎樣禁止鼠標右鍵（contextmenu）？
說明：有時候我們希望用戶不能使用鼠標右鍵，從而避免復制，另存為等行為。

復制代碼代碼如下:

 
$(function(){ 
$(document).bind('contextmenu',function(e){ 
return false; 
}); 
}); 

（六）怎樣實現(xiàn)一幅圖片淡出(FadeOut)后，另一幅圖片淡入(FadeIn)的效果？
說明：是時候展現(xiàn)一些比較cool效果了，淡入淡出的效果可以采用JQuery的FadeIn和FadeOut效果來實現(xiàn)。

復制代碼代碼如下:

 
$('img').fadeOut(function(){ 
$(this).load(function(){ 
$(this).fadeIn(); 
}).attr('src',AnotherSource); 
}); 

（七）檢測一個DOM對象是否存在？
說明：在對一個DOM對象操作前，先檢測其是否存在。

復制代碼代碼如下:

 
//方法一 
if($('#elementId').length) 
{ 
//存在 
} 
//方法二 
if($('#elementId').size() > 0) 
{ 
//存在 
} 
//方法三 
if($('#elementId')[0]) 
{ 
//存在 
} 
//方法四~方法N 
期待大家補充，哈哈！ 