DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JavaScript和JQuery實用代碼片段(一)
JavaScript和JQuery實用代碼片段(一)
編輯: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
期待大家補充,哈哈!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved