前端開發(fā)者都應(yīng)知道的 jQuery 小技巧.docx

《前端開發(fā)者都應(yīng)知道的 jQuery 小技巧.docx》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、一個簡單技巧的集合，幫你提升jQuery技能。MattSmith發(fā)起的一個小項(xiàng)目，目前已有14個小技巧。伯樂在線會持續(xù)跟進(jìn)更新。1.回到頂部按鈕2.預(yù)加載圖片3.檢查圖片是否加載完畢4.自動修復(fù)損壞的圖片5.Hover上的Class開關(guān)6.禁用input字段7.停止鏈接加載8.淡入淡出/滑動開關(guān)9.簡單的折疊效果10.將兩個Div設(shè)為相同高度11.在新窗口打開外部鏈接12.找到文本元素13.切換可視與隱藏的觸發(fā)器?回到頂部按鈕通過使用jQuery中的?animate?和?scrollTop?方法，你無需插件便可創(chuàng)建一個簡單地回到頂部動畫：JavaScri

2、pt12345//Backtotop$('a.top').click(function(e){??e.preventDefault();??$(document.body).animate({scrollTop:0},800);});JavaScript12Backtotop將?scrollTop?的值改為你想要scrollbar停止的地方。然后你要做的就是，設(shè)置在800毫秒內(nèi)回到頂部。預(yù)加載圖片如果你的頁面使用了大量不能初始可見的圖片（例如綁定在hove

3、r上），預(yù)加載它們是十分有用的：JavaScript123456$.preloadImages=function(){??for(vari=0;i').attr('src',arguments[i]);??}};?7$.preloadImages('img/hover-on.png','img/hover-off.png');檢查圖片是否加載完畢有時你或許要檢查圖片是否完全加載完畢，才能在腳本中進(jìn)行后續(xù)操作：JavaScript123$('img').load(function(){?

4、?console.log('imageloadsuccessful');});你也可以通過把img標(biāo)簽替換成ID或class，來檢查特定圖片是否加載完成。自動修復(fù)損壞的圖片如果你發(fā)現(xiàn)自己網(wǎng)站的圖片鏈接掛了，一個一個替換很麻煩。這段簡單的代碼可以幫上大忙：JavaScript123$('img').on('error',function(){??$(this).prop('src','img/broken.png');});即使你沒有任何損壞的鏈接，增加這段代碼也不會有什么影響。Hover上的Class切換如果用戶的鼠標(biāo)懸停在頁面上某個可點(diǎn)擊元素時，你想要

5、改變這個元素的視覺表現(xiàn)?？梢允褂孟旅孢@段代碼，當(dāng)用戶懸停時，為該元素增加一個class；當(dāng)用戶鼠標(biāo)離開后移除這個class：JavaScript12345$('.btn').hover(function(){??$(this).addClass('hover');},function(){??$(this).removeClass('hover');});你僅需增加必須的CSS。如果需要更簡單的方式，還可以使用?toggleClass?方法：JavaScript123$('.btn').hover(function(){??$(this).toggleC

6、lass('hover');});注意：CSS或許是這個例子更快速的解決方式，但大家仍然值得知道這一點(diǎn)。禁用input字段有時你也許想讓表單的提交按鈕或其文本輸入框變得不可用，直到用戶執(zhí)行了一個特定行為（例如確認(rèn)“我已經(jīng)閱讀該條款”的復(fù)選框）。增加?disabled?attribute到你的input，就可以實(shí)現(xiàn)自己想要的效果：JavaScript1$('input[type="submit"]').prop('disabled',true);當(dāng)你想把?disabled?的值改為?false?時，僅需在該input上再運(yùn)行一次?prop?方法。JavaS

7、cript1$('input[type="submit"]').prop('disabled',false);停止鏈接加載有時你不想鏈接跳轉(zhuǎn)到某個頁面或重加載該頁面，而希望可以做一些其他事情，比如觸發(fā)其他腳本。下面的代碼是禁止默認(rèn)行為的一個小訣竅：JavaScript123$('a.no-link').click(function(e){??e.preventDefault();});淡入淡出/滑動開關(guān)淡入淡出與滑動是我們經(jīng)常使用jQuery?做成的動畫效果。或許你只是想在用戶點(diǎn)擊某物時展現(xiàn)一個元素，使用?fadeIn?和?slideDown?都很棒。但

8、如果想讓該元素在第一次點(diǎn)擊時顯現(xiàn)，第二次點(diǎn)擊時消失，下面的代碼可以很好地完成這個