不要在乎別人如何看你,要在乎你自己如何看未來,看夢想,看世界..!
你應該知道的jQuery技巧【收藏】
jQuery的存在,讓學習前端開發(fā)的人感到前端越來越容易入門了,用簡單的幾行代碼就可以實現(xiàn)需求,但是,你真的會用jQuery么,當代碼運行 后無法看到自己預期的效果,是不是覺得jQuery出了問題,其實,問題還是出在了自己會不會用上面。下面列舉一些開發(fā)中經(jīng)常遇到的應用實例,發(fā)現(xiàn)一下另 一個不同的jQuery世界。
回到頂部按鈕
利用jQuery里的animate和scrollTop方法,你便不需要使用插件創(chuàng)建簡單的滾動到頂部動畫。
$('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); });
通過scrollTop的值來改變你想要滾動到的位置。其實你就是做了:在接下來的800毫秒中讓頁面滾動,直到它滾動到文檔的頂部。
圖片預加載
如果你的網(wǎng)頁使用了很多隱藏圖片文件(例如:鼠標懸停展示的圖片),那么圖片的預加載是有意義的:
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');
判斷圖片是否加載完
有時候你可能需要檢查圖像是否已經(jīng)加載完成,以便于可以繼續(xù)執(zhí)行相應的js代碼:
$('img').load(function () { console.log('image load successful'); });
曾經(jīng)遇到過的使用場景:有些元素需要按圖片的實際尺寸來設置其大小,以絕對布置方式放置。元素的大小設置可以在圖片加載完成后計算。
自動修補破損圖像
如果你碰巧發(fā)現(xiàn)在你的網(wǎng)站上發(fā)現(xiàn)破損的圖像鏈接,一個個去替代他們是痛苦的。這個簡單的代碼可以節(jié)省很多的麻煩:
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });
即使你沒有任何斷開的鏈接,加入這代碼也不會有任何影響。
禁用輸入
有時你可能需要用表單的提交按鈕或者某個輸入框直到用戶執(zhí)行了某個動作(比如:檢查“我已閱讀條款”復選框)。在你的輸入框上設置disabled屬性,然后當你需要的時候啟用該屬性:
$('input[type="submit"]').prop('disabled', true);
你需要做的只是需要在輸入框上再次運行prop方法,但設置的被禁用值是false:
$('input[type="submit"]').prop('disabled', false);
對地不了解prop函數(shù)的jQuery開發(fā)者來說,最常使用的是attr函數(shù),可能開發(fā)很多程序都沒有發(fā)現(xiàn)什么問題,但是,在開發(fā)例如 checkbox、radio、select時,會發(fā)現(xiàn)使用attr無法讓屬性生效,以為是jQuery的bug,下面來說說attr和prop的使用建 議:
在遇到要獲取或設置checked,selected,readonly和disabled等屬性時,用prop方法顯然更好
使兩個DIV同等高度
有時你會想要兩個DIV有相同的高度,無論他們都有什么內容:
$('.div').css('min-height', $('.main-div').height());
這個例子設置了DIV的最小高度,這意味著它的高度只可以比這個設置的高度大而不能小。然而,一個更靈活的方法是循環(huán)的一組元素,并設置將最高元素的高度作為高度:
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()選擇器,你能找到一個元素內的文本內容。如果文本不存在,則這個元素將被隱藏:
var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();
可見變化的觸發(fā)
當用戶不再聚焦或者重新聚焦一個標簽時觸發(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!'); } });
歡迎關注我的公眾號(同步更新文章):DoNet技術分享平臺
作者:天使不哭
微信號:hgmyzhl
微信公眾號:
出處:http://www.cnblogs.com/hgmyz/
本文版權歸作者和博客園共有,歡迎轉載,但未經(jīng)作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利.
http://www.cnblogs.com/hgmyz/p/7105137.html