JavaScript和JQuery實用程式碼片段(一)

來源:互聯網
上載者:User

(一)怎樣用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
期待大家補充,哈哈!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.