分享15個大家都熟知的jquery小技巧
幫助提高你jQuery應用的15個大家都熟知的jquery小技巧,分享給大家
- 回到頂部按鈕
- 圖片預加載
- 判斷圖片是否加載完
- 自動修補破損圖像
- Hover切換class類
- 禁用輸入
- 停止正在加載的鏈接
- toggle fade/slide
- 簡單的手風琴
- 使兩個DIV同等高度
- 在瀏覽器標簽/新窗口打開外部鏈接
- 根據文本獲取元素
- 可見變化的觸發(fā)
- Ajax調用錯誤處理
- 鏈式操作
1、回到頂部按鈕
利用jQuery里的animate和scrollTop方法,你便不需要使用插件創(chuàng)建簡單的滾動到頂部動畫。
// Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class="top" href="#">Back to top</a>
通過scrollTop的值來改變你想要滾動到的位置。其實你就是做了:在接下來的800毫秒中讓頁面滾動,直到它滾動到文檔的頂部。
備注:來看一些scrollTop的調皮行為 。
2、圖片預加載
如果你的網頁使用了很多隱藏圖片文件(例如:鼠標懸停展示的圖片),那么圖片的預加載是有意義的:
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');
3、判斷圖片是否加載完
有時候你可能需要檢查圖像是否已經加載完成,以便于可以繼續(xù)執(zhí)行相應的js代碼:
$('img').load(function () { console.log('image load successful'); });
你還可以檢查一個特定的圖片是否加載完并且被帶有Id或者class的<img>標簽代替。
4、自動修補破損圖像
如果你碰巧發(fā)現在你的網站上發(fā)現破損的圖像鏈接,一個個去替代他們是痛苦的。這個簡單的代碼可以節(jié)省很多的麻煩:
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });
即使你沒有任何斷開的鏈接,加入這代碼也不會有任何影響。
5、Hover切換class類
比方說,當用戶將鼠標懸停在你頁面上的元素時,你想改變其視覺效果。當用戶鼠標懸停在元素上,你可以在該元素上添加一個class類,當鼠標停止懸停事件時移除此class類:
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });
如果你想要一個更簡單的方式使用toggleClass方法,則僅僅需要添加必要的CSS:
$('.btn').hover(function () { $(this).toggleClass('hover'); });
備注:CSS在這種情況下使用是一個快速的解決方案,但要知道這點知識依舊是值得去了解下的。
6、禁用輸入
有時你可能需要用表單的提交按鈕或者某個輸入框直到用戶執(zhí)行了某個動作(比如:檢查“我已閱讀條款”復選框)。在你的輸入框上設置disabled屬性,然后當你需要的時候啟用該屬性:
你需要做的只是需要在輸入框上再次運行prop方法,但設置的被禁用值是false:
7、停止正在加載的鏈接
有時你不想鏈接到特定的網頁或者重新載入頁面;你可能想讓他們做一些其他事情,如觸發(fā)一些其他的腳本。這是防止違約行動的技巧:
$('a.no-link').click(function (e) { e.preventDefault(); });
8、toggle fade/slide
滑動和淡入/淡出 是我們在jQuery中經常大量使用的動畫。你可能僅僅想在用戶做某些點擊事件的時候顯示一個元素,這時候需要淡入/淡出或者滑動方法。但是如果你需要那個元素在你第一次點擊的時候出現,在第二次點擊的時候消失,代碼如下:
// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); });
9、簡單的手風琴
這是個簡單快速的方法創(chuàng)建一個手風琴:
// Close all panels $('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; });
通過添加這個腳本,你需要做的則是必要的HTML操作在你的頁面上。
10、使兩個DIV同等高度
有時你會想要兩個DIV有相同的高度,無論他們都有什么內容:
這個例子設置了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()); });
11、在瀏覽器標簽/新窗口打開外部鏈接
在新的瀏覽器標簽或窗口中打開外部鏈接,并確保在同一個標簽或窗口中打開的是同一個源的鏈接:
$('a[href^="http"]').attr('target', '_blank'); $('a[href^="http://"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
備注:window.location.origin 在IE10不工作。
12、根據文本獲取元素
通過jQuery中的contains()選擇器,你能找到一個元素內的文本內容。如果文本不存在,則這個元素將被隱藏:
var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();
13、可見變化的觸發(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!'); } });
14、Ajax調用錯誤處理
當一個Ajax調用返回一個404或500的錯誤時,將執(zhí)行該錯誤處理。如果該處理未定義,則其他jQuery代碼便可能不會執(zhí)行了。定義一個全局Ajax錯誤處理程序:
$(document).ajaxError(function (e, xhr, settings, error) { console.log(error); });
15、鏈式操作
jQuery允許通過鏈式操作來減輕反復查詢DOM和創(chuàng)建多個jQuery對象的過程。比如下面是你的方法調用:
$('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff();
這代碼可以通過鏈式大大的提高:
$('#elem') .show() .html('bla') .otherStuff();
另一個方法是在一個可變的元素緩存($作為前置):
var $elem = $('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff();
鏈式和jQuery緩存方法是最好的做法,導致更短、更快的代碼。
以上就是本文的全部內容,希望幫助大家提高jQuery應用能力。
相關文章
用原生JavaScript實現jQuery的$.getJSON的解決方法
本篇文章介紹了,用原生JavaScript實現jQuery的$.getJSON的解決方法。需要的朋友參考下2013-05-05JQuery團隊打造的javascript單元測試工具QUnit介紹
元測試又稱為模塊測試,是針對程序模塊(軟件設計的最小單位)來進行正確性檢驗的測試工作。單元測試主要是用來檢驗程式的內部邏輯,也稱為個體測試、結構測試或邏輯驅動測試。通常由撰寫程式碼的程式設計師負責進行。2010-02-02基于JQuery的$.ajax方法進行異步請求導致頁面閃爍的解決辦法
這篇文章主要介紹了基于JQuery的$.ajax方法進行異步請求導致頁面閃爍的解決辦法的相關資料,非常具有參考借鑒價值,需要的朋友可以參考下2016-05-05