JavaScript和JQuery實用程式碼片段（一）

（一）怎樣用JQuery重新整理一幅圖片？
說明：我們都知道，當我們在請求一個資源（比如網頁，圖片等）的時候，如果該資源被緩衝到瀏覽器了，那麼請求返回的就是緩衝的副本，不是我們希望擷取的資源（該資源內容已經被更新了），此時最普遍的一個辦法就是在請求的頁面後面或者圖片的src後面加上一個查詢字串"ran=" + Math.random()，這樣就會請求到最新版本的資源啦！
代碼： 複製代碼 代碼如下:$(imageObj).attr('src',$(imageObj).attr('src') + '?' + Math.random());

（二）怎樣用JQuery查看一幅圖片是否被完全載入？
說明：在一個頁面未載入完全的時候調用JavaScript操作常常會失敗，因為此時DOM未解析完畢。可以在windoiw.onload方法中執行要執行的JavaScript/JQuery方法（此時圖片肯定載入完成，可以擷取其高度等屬性），也可以在$(function(){})中執行(此時DOM雖解析完畢，但是所請求的資源未必全部載入完成)。
如果在使用圖片之前，要事先檢測圖片是否載入完成，可以採用如下的代碼：
代碼： 複製代碼 代碼如下:var imgsrc = "img/img.png";
$(imageObj).load(function()
{
alert('圖片載入完成');
}).error(function()
{
alert('圖片載入出錯');
}).attr('src',imgsrc);

（三）怎樣用JQuery查看多幅幅圖片是否被完全載入？
說明：說明如上，加入你頁面有十幅圖片要載入，此時可以設定一個變數記錄載入圖片數，當該變數等於總的圖片數時，載入就大功告成了！ 複製代碼 代碼如下: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) //調用javascript內建函數sort，參數為一閉包函數，也就是排序器
{
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;
});
});

（六）怎樣實現一幅圖片淡出(FadeOut)後，另一幅圖片淡入(FadeIn)的效果？
說明：是時候展現一些比較cool效果了，淡入淡出的效果可以採用JQuery的FadeIn和FadeOut效果來實現。 複製代碼 代碼如下:$('img').fadeOut(function(){
$(this).load(function(){
$(this).fadeIn();
}).attr('src',AnotherSource);
});

（七）檢測一個DOM對象是否存在？
說明：在對一個DOM對象操作前，先檢測其是否存在。 複製代碼 代碼如下://方法一
if($('#elementId').length)
{
//存在
}
//方法二
if($('#elementId').size() > 0)
{
//存在
}
//方法三
if($('#elementId')[0])
{
//存在
}
//方法四~方法N
期待大家補充，哈哈！