jQuery常用的一些技巧匯總
引子
jQuery的存在,讓學(xué)習(xí)前端開發(fā)的人感到前端越來越容易入門了,用簡單的幾行代碼就可以實(shí)現(xiàn)需求,但是,你真的會(huì)用jQuery么,當(dāng)代碼運(yùn)行后無法看到自己預(yù)期的效果,是不是覺得jQuery出了問題,其實(shí),問題還是出在了自己會(huì)不會(huì)用上面。下面列舉一些開發(fā)中經(jīng)常遇到的應(yīng)用實(shí)例,發(fā)現(xiàn)一下另一個(gè)不同的jQuery世界。
回到頂部按鈕
利用jQuery里的animate和scrollTop方法,你便不需要使用插件創(chuàng)建簡單的滾動(dòng)到頂部動(dòng)畫。
$('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); });
通過scrollTop的值來改變你想要滾動(dòng)到的位置。其實(shí)你就是做了:在接下來的800毫秒中讓頁面滾動(dòng),直到它滾動(dòng)到文檔的頂部。
圖片預(yù)加載
如果你的網(wǎng)頁使用了很多隱藏圖片文件(例如:鼠標(biāo)懸停展示的圖片),那么圖片的預(yù)加載是有意義的:
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');
判斷圖片是否加載完
有時(shí)候你可能需要檢查圖像是否已經(jīng)加載完成,以便于可以繼續(xù)執(zhí)行相應(yīng)的js代碼:
$('img').load(function () { console.log('image load successful'); });
曾經(jīng)遇到過的使用場(chǎng)景:有些元素需要按圖片的實(shí)際尺寸來設(shè)置其大小,以絕對(duì)布置方式放置。元素的大小設(shè)置可以在圖片加載完成后計(jì)算。
自動(dòng)修補(bǔ)破損圖像
如果你碰巧發(fā)現(xiàn)在你的網(wǎng)站上發(fā)現(xiàn)破損的圖像鏈接,一個(gè)個(gè)去替代他們是痛苦的。這個(gè)簡單的代碼可以節(jié)省很多的麻煩:
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });
即使你沒有任何斷開的鏈接,加入這代碼也不會(huì)有任何影響。
禁用輸入
有時(shí)你可能需要用表單的提交按鈕或者某個(gè)輸入框直到用戶執(zhí)行了某個(gè)動(dòng)作(比如:檢查“我已閱讀條款”復(fù)選框)。在你的輸入框上設(shè)置disabled屬性,然后當(dāng)你需要的時(shí)候啟用該屬性:
$('input[type="submit"]').prop('disabled', true);
你需要做的只是需要在輸入框上再次運(yùn)行prop方法,但設(shè)置的被禁用值是false:
$('input[type="submit"]').prop('disabled', false);
對(duì)地不了解prop函數(shù)的jQuery開發(fā)者來說,最常使用的是attr函數(shù),可能開發(fā)很多程序都沒有發(fā)現(xiàn)什么問題,但是,在開發(fā)例如checkbox、radio、select時(shí),會(huì)發(fā)現(xiàn)使用attr無法讓屬性生效,以為是jQuery的bug,下面來說說attr和prop的使用建議:
在遇到要獲取或設(shè)置checked,selected,readonly和disabled等屬性時(shí),用prop方法顯然更好
使兩個(gè)DIV同等高度
有時(shí)你會(huì)想要兩個(gè)DIV有相同的高度,無論他們都有什么內(nèi)容:
$('.div').css('min-height', $('.main-div').height());
這個(gè)例子設(shè)置了DIV的最小高度,這意味著它的高度只可以比這個(gè)設(shè)置的高度大而不能小。然而,一個(gè)更靈活的方法是循環(huán)的一組元素,并設(shè)置將最高元素的高度作為高度:
var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height);
如果你想要所有的列有相同的高度:
var $rows = $('.same-height-columns'); $rows.each(function () { $(this).find('.column').height($(this).height()); });
根據(jù)文本獲取元素
通過jQuery中的contains()選擇器,你能找到一個(gè)元素內(nèi)的文本內(nèi)容。如果文本不存在,則這個(gè)元素將被隱藏:
var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();
可見變化的觸發(fā)
當(dāng)用戶不再聚焦或者重新聚焦一個(gè)標(biāo)簽時(shí)觸發(fā)javascript腳本:
$(document).on('visibilitychange', function (e) { if (e.target.visibilityState === "visible") { console.log('Tab is now in view!'); } else if (e.target.visibilityState === "hidden") { console.log('Tab is now hidden!'); } });
相關(guān)文章
jQuery 浮動(dòng)廣告實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的浮動(dòng)廣告代碼,需要的朋友可以參考下。2008-12-12jquery ready()的幾種實(shí)現(xiàn)方法小結(jié)
下面是目前本人知道的幾種jQuery的ready ()的寫法.如果還有其他的寫法,望告知2010-06-06jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器(優(yōu)化篇)
相對(duì)于上一篇,優(yōu)化了拖拽的效果,具體的代碼及截圖如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-06-06jQuery對(duì)象和DOM對(duì)象之間相互轉(zhuǎn)換的方法介紹
這篇文章主要介紹了jQuery對(duì)象和DOM對(duì)象之間相互轉(zhuǎn)換的方法介紹,本文講解了jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象、DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象 方法,需要的朋友可以參考下2015-02-02再說AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理
再說AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理,這里以asp.net后臺(tái)為主,考慮到性能最好是生成xml并入緩存。2011-11-11jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法,涉及jQuery鼠標(biāo)事件及頁面元素操作的技巧,需要的朋友可以參考下2015-06-06jQuery的cookie插件實(shí)現(xiàn)保存用戶登陸信息
保存用戶登陸信息的方法有很多,本文為大家介紹的這個(gè)方法是通過cookie插件來實(shí)現(xiàn),需要的朋友可以參考下2014-04-04通過jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能
這篇文章主要介紹了通過jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能,通過Cookies讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶端的硬盤或內(nèi)存,從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù);具體實(shí)現(xiàn)過程大家通過本文一起看看吧2018-06-06jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖
unlock.js插件具有滑動(dòng)解鎖,尺寸、顏色、字體大小等都可以個(gè)性化定制等特點(diǎn),接下來通過本文給大家分享jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖思路講解,感興趣的朋友一起看看吧2017-04-04jQuery實(shí)現(xiàn)簡單網(wǎng)頁遮罩層/彈出層效果兼容IE6、IE7
自寫寫的一個(gè)jQuery插件,可以實(shí)現(xiàn)簡單網(wǎng)頁遮罩層/彈出層功能,并且兼容IE6、IE7,需要的朋友可以參考下2014-06-06