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

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

• 回到頂部按鈕
• 圖片預先載入
• 判斷圖片是否載入完
• 自動修補破損影像
• Hover切換class類
• 禁用輸入
• 停止正在載入的連結
• toggle fade/slide
• 簡單的手風琴
• 使兩個DIV同等高度
• 在瀏覽器標籤/新視窗中開啟外部連結
• 根據文字取得元素
• 可見變化的觸發
• Ajax呼叫錯誤處理
• 鍊式操作
  

1、回到上方按鈕

利用jQuery裡的animate和scrollTop方法，你便不需要使用插件來創建簡單的滾動到頂部動畫。

// 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、判斷圖片是否載入完

有時候你可能需要檢查圖片是否已經載入完成，以便於可以繼續執行對應的js程式碼：

$('img').load(function () {
 console.log('image load successful');
});

你也可以檢查一個特定的圖片是否載入完並且被帶有Id或者class的標籤取代。

4、自動修補破損影像

如果你碰巧發現在你的網站上發現破損的圖像鏈接，一個個去替代他們是痛苦的。這個簡單的程式碼可以節省很多的麻煩：

$('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、停用輸入

有時你可能需要用表單的提交按鈕或某個輸入框直到使用者執行了某個動作（例如：檢查「我已閱讀條款」複選框）。在你的輸入框上設定disabled屬性，然後當你需要的時候啟用該屬性：

複製程式碼 程式碼如下:

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

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

複製程式碼 程式碼如下:

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

7、停止正在載入的連結

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

$('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、簡單的手風琴

這是一個簡單快速的方法來創建一個手風琴：

// 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的最小高度，这意味着它的高度只可以比这个设置的高度大而不能小。然而，一个更灵活的方法是循环的一组元素，并设置将最高元素的高度作为高度：

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^="//"]').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、可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发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的错误时，将执行该错误处理。如果该处理未定义，则其他jQuery代码便可能不会执行了。定义一个全局Ajax错误处理程序：

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

15、链式操作

jQuery允许通过链式操作来减轻反复查询DOM和创建多个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应用能力。