分享15個大家都熟知的jquery小技巧

更新時間：2015年12月02日 12:06:46 作者：野獸''

這篇文章主要分享了15個大家都熟知的jquery小技巧，幫助提高你jQuery應用的簡單小技巧，感興趣的小伙伴們可以參考一下

幫助提高你jQuery應用的15個大家都熟知的jquery小技巧，分享給大家

回到頂部按鈕
圖片預加載
判斷圖片是否加載完
自動修補破損圖像
Hover切換class類
禁用輸入
停止正在加載的鏈接
toggle fade/slide
簡單的手風琴
使兩個DIV同等高度
在瀏覽器標簽/新窗口打開外部鏈接
根據(jù)文本獲取元素
可見變化的觸發(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ā)現(xiàn)在你的網站上發(fā)現(xiàn)破損的圖像鏈接，一個個去替代他們是痛苦的。這個簡單的代碼可以節(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屬性，然后當你需要的時候啟用該屬性：

復制代碼代碼如下:

$('input[type="submit"]').prop('disabled', true);

你需要做的只是需要在輸入框上再次運行prop方法，但設置的被禁用值是false：

復制代碼代碼如下:

$('input[type="submit"]').prop('disabled', false);

7、停止正在加載的鏈接

有時你不想鏈接到特定的網頁或者重新載入頁面；你可能想讓他們做一些其他事情，如觸發(fā)一些其他的腳本。這是防止違約行動的技巧：

$('a.no-link').click(function (e) {
 e.preventDefault();
});

8、toggle fade/slide

滑動和淡入/淡出是我們在jQuery中經常大量使用的動畫。你可能僅僅想在用戶做某些點擊事件的時候顯示一個元素，這時候需要淡入/淡出或者滑動方法。但是如果你需要那個元素在你第一次點擊的時候出現(xiàn)，在第二次點擊的時候消失，代碼如下：

// 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').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());
});

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、根據(jù)文本獲取元素

通過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應用能力。

您可能感興趣的文章:

jquery彈出框插件jquery.ui.dialog用法分析
這篇文章主要介紹了jquery彈出框插件jquery.ui.dialog用法,結合實例形式分析了彈出框插件jquery.ui.dialog的功能、下載、使用方法與相關注意事項,需要的朋友可以參考下
2016-08-08
jQuery實現(xiàn)個性翻牌效果導航菜單的方法
這篇文章主要介紹了jQuery實現(xiàn)個性翻牌效果導航菜單的方法,實例分析了jQuery操作animate、css及鼠標事件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
jquery顯示隱藏input對象
這篇文章主要介紹了jquery顯示隱藏input對象,需要的朋友可以參考下
2014-07-07
基于HTML+CSS+JS實現(xiàn)增加刪除修改tab導航特效代碼
這篇文章主要介紹了基于HTML+CSS+JS實現(xiàn)增加刪除修改tab導航特效代碼的相關資料,非常不錯，需要的朋友可以參考下
2016-08-08
jQuery使用addClass()方法給元素添加多個class樣式
這篇文章主要介紹了jQuery使用addClass()方法給元素添加多個class樣式的方法,實例分析了addClass方法的使用技巧及添加多個樣式的實現(xiàn)方法,需要的朋友可以參考下
2015-03-03
AspNet中使用JQuery上傳插件Uploadify詳解
Uploadify是JQuery的一個上傳插件，實現(xiàn)的效果非常不錯，帶進度顯示。不過官方提供的實例時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用
2015-05-05
jQuery插件zTree實現(xiàn)清空選中第一個節(jié)點所有子節(jié)點的方法
這篇文章主要介紹了jQuery插件zTree實現(xiàn)清空選中第一個節(jié)點所有子節(jié)點的方法,涉及jQuery樹形插件zTree針對節(jié)點的遍歷與移除相關操作技巧,需要的朋友可以參考下
2017-03-03
jQuery如何實現(xiàn)點擊頁面獲得當前點擊元素的id或其他信息
點擊頁面獲得當前點擊元素的id或者其他信息，使用jquery可以輕松做到這一點，下面有個不錯的示例，希望對大家有所幫助
2014-01-01
jQuery插件ajaxfileupload.js實現(xiàn)上傳文件
這篇文章主要為大家詳細介紹了jQuery插件ajaxfileupload.js實現(xiàn)上傳文件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery+CSS3實現(xiàn)樹葉飄落特效
本文給大家分享的是一段使用jQuery+CSS3實現(xiàn)樹葉飄落特效的代碼，效果非常不錯，分享給大家，希望大家能夠喜歡
2015-02-02