快捷導(dǎo)航

JavaScript和JQuery實(shí)用代碼片段（一）

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

JavaScript和JQuery實(shí)用代碼片段，喜歡學(xué)習(xí)jquery的朋友可以參考下。

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

（四）怎樣用JQuery對(duì)無(wú)序列表（ul）排序？
說(shuō)明：有時(shí)候我們需要對(duì)一個(gè)無(wú)序列表（ul）排序（當(dāng)然可以用有序列表ol），但是ul能夠提供更多定制功能，且能自定義排序器。
代碼：（1）待排序列表為：

復(fù)制代碼代碼如下:

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

（2）JQuery代碼為：

復(fù)制代碼代碼如下:

 
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) //此時(shí)items為排好隊(duì)的集合 
{ 
ul.append(li); 
}); 

（五）怎樣禁止鼠標(biāo)右鍵（contextmenu）？
說(shuō)明：有時(shí)候我們希望用戶不能使用鼠標(biāo)右鍵，從而避免復(fù)制，另存為等行為。

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

（七）檢測(cè)一個(gè)DOM對(duì)象是否存在？
說(shuō)明：在對(duì)一個(gè)DOM對(duì)象操作前，先檢測(cè)其是否存在。

復(fù)制代碼代碼如下:

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