一些簡單的小技巧讓您對 jQuery 更得心應手。
也可以看看由 @sindresorhus 整理,一些其他很不錯的清單集合: awesome lists.
- 使用
noConflict()
- 檢查 jQuery 是否成功載入
- 檢查元素是否存在
- 使用
.on()
做 Binding,而不要使用.click()
- 返回最頂端的按鈕
- 預先載入圖片
- 檢查圖片是否成功載入
- 自動修復載入失敗的圖片
- 發布的AJAX表單
- 透過 Hover 切換 Class
- 讓 input field 無法輸入
- 停止載入連結
- 快取 jQuery 選擇器
- 切換 Fade/Slide
- 簡單可收放元件(Accordion)
- 使兩個 Div 一樣高
- 在新分頁/視窗開啟外部連結
- 利用文字找到元素
- Visibility 改變時觸發事件
- Ajax 程序的錯誤處理
- 串連 Plugin 的函式呼叫
- 照字母順序排序清單元素(list)
- 停用右鍵
其他JavaScript库也使用jQuery使用的$
别名。 为了确保jQuery不会与不同库的$
对象发生冲突,请在文档的开头使用noConflict()
方法:
jQuery.noConflict();
现在,您将使用jQuery
变量名称而不是$
来引用jQuery对象(例如jQuery('div p').hide()
)。如果你在同一页面上有多个jQuery版本,你可以使用noConflict()
来设置一个特定版本的别名:
let $x = jQuery.noConflict();
在你使用 jQuery 做任何事情之前,你應該先確定其是否成功載入:
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
在使用HTML元素之前,您需要確保它是DOM的一部分。
if ($("#selector").length) {
//do something with element
}
使用 .on()
比起使用 .click()
多了一些好處,像是可以加上多個事件(events)...
.on('click tap hover')
...這樣的連結(binding)也會對動態產生的元素產生效用(不需要每產生一個 DOM element 就做一次連結)...
...還能夠使用命名空間(namespace):
.on('click.menuOpening')
命名空間讓你能取消對特定事件(event)的連結(例如: .off('click.menuOpening')
)。
利用 jQuery 中 animate
以及 scrollTop
的函式, 你不需要外加特別的插件來完成「返回最頂端」的功能:
// Back to top
$('.container').on('click', '.back-to-top', function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<div class="container">
<a href="#" class="back-to-top">Back to top</a>
</div>
改變 scrollTop
的數值可以改變你希望捲軸停在哪裡,而你實際上是使用 animate()
函式以動畫的方式並花費 800 毫秒的時間滾動到文件的頂端。
注意: 看看一些使用 scrollTop
而導致的奇怪行為 。
如果你的網頁有很多圖片並非一開始就是看得到的(例如:hover 才會看到),讓這些圖片預先載入是很合理的:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
有時候你會想要確定圖片是否成功載入後再執行接下來的動作:
$('img').on('load', function () {
console.log('image load successful');
});
你也可以透過替換 <img>
成其他 ID 或 class 來檢查特定圖片。
如果你覺得一個一個替換掉載入失敗的圖片連結很痛苦,這段程式碼可以讓你不會這麼頭痛:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
另外,如果你想简单地隐藏破碎的形象这个片段将利用该护理:
$('img').on('error', function () {
$(this).hide();
});
jQuery的AJAX方法來請求文本,HTML,XML或JSON的常用方法。如果你想通過AJAX發送的形式,你可以通過val()
方法收集用戶輸入:
$.post('sign_up.php', {
user_name: $('input[name=user_name]').val(),
email: $('input[name=email]').val(),
password: $('input[name=password]').val(),
});
然而,所有這些val()
調用的是昂貴的。收集用戶輸入的一個更好的辦法是使用CSS()
函數,它收集用戶輸入一個字符串:
$.post('sign_up', $('#sign-up-form').serialize());
如果說你想要在一個可點擊元件的外貌被 hover 過的時候改變他的外貌,你可以在使用者 hover 時加上一個 class,當使用者停止 hover 時就移除該 class:
$('.btn').on('hover', function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
你只要加上必要的 CSS 即可。如果你想要使用更簡單的方法,可以使用 toggleClass
函式:
$('.btn').on('hover', function () {
$(this).toggleClass('hover');
});
注意: 使用 CSS 可能是更快的解決方法,但是這個方法還是值得我們學習。
常常你會希望在使用者進行一些特定動作前, input field 是無法輸入,或是一個 form 的 submit 按鈕是無法點擊的。(例如:點選「我已經閱讀條約。」的checkbox),在 input 加上 disabled
的屬性你就能夠在你想要時開啟權限:
$('input[type="submit"]').prop('disabled', true);
你只需要再執行一次 prop
函式,不過是將 disabled
的數值設成 false
:
$('input[type="submit"]').prop('disabled', false);
有時候你不想讓連結連至特定網站或是重新載入頁面,你可能想要讓他們做一些其他行為,例如:觸發其他程式,以下將會避免預設的行為發生:
$('a.no-link').on('click', function (e) {
e.preventDefault();
});
想想看你在同一個專案中寫了多少次樣的選擇器,每一個 $('.element')
選擇器每一次都會搜尋整個 DOM,不管該選擇器是否在之前執行過。因此,執行一次選擇器並且將結果存在變數中:
var blocks = $('#blocks').find('li');
現在你能夠在任何地方使用 blocks
變數而不用每一次都搜尋整個DOM:
$('#hideBlocks').on('click', function () {
blocks.fadeOut();
});
$('#showBlocks').on('click', function () {
blocks.fadeIn();
});
快取 jQuery 選擇器是能夠簡單又能增進效能的小技巧。
Sliding 以及 fading 是我們經常使用 jQuery 來完成的動畫效果。你可能只是想要在使用者點擊某個東西時秀出一個元件,此時 fadeIn
以及 slideDown
就是你的最佳選擇。如果你想要讓元件在第一次點擊時現身,並且在第二次點擊時消失,以下程式碼也可以很好地實現這個效果:
// Fade
$('.btn').on('click', function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').on('click', function () {
$('.element').slideToggle('slow');
});
這是一個簡單實現可收放元件(accordion)的做法:
// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').on('click', function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
加上這段程式碼後,你要做的只剩下加上必要的 HTML 即可。
有時候不論兩個 Div 裡面的內容為何,你會希望他們有同樣的高度:
$('.div').css('min-height', $('.main-div').height());
這個例子設定 min-height
,表示其只能比 .main-div
的 height
大,永遠不會比它小。然而,在一組元素中循環並將各元素之 height
調整至最高的元素高度為另一種更彈性的方法:
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());
});
注意: 這件事可以使用幾種方法完成,使用 CSS 這跟你的需求有關,但也值得知道如何使用 jQuery完成。
在瀏覽器新的分頁或視窗中開啟新的外部連結,並且確定同樣 host 的連結會在同樣的分頁或視窗開啟:
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
注意: window.location.origin
在 IE 10 中無效。這個方法 可以解決這個問題。
利用 jQuery 中 contains()
選擇器,你可以找到元素內容中的文字。如果沒有文字,該元素會被隱藏:
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
當使用者不再停留在某分頁,或是重新停留在某分頁,觸發 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!');
}
});
當一個 Ajax 程序呼叫後回傳 404 或是 500 錯誤,錯誤處理程序將會被執行。如果沒有定義錯誤處理程序,其他 jQuery 的程式碼可能不會運作。定義一個全域 Ajax 錯誤處理程序:
$(document).on('ajaxError', function (e, xhr, settings, error) {
console.log(error);
});
jQuery 允許「串連」 plugin 函式的呼叫來減少重複搜尋 DOM 以及產生多個 jQuery 物件。以下的程式碼展示了 plugin 函式的呼叫:
$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
可以利用串連來改進:
$('#elem')
.show()
.html('bla')
.otherStuff();
另外一種方法是利用一個變數來快取(cache)一個元素(在變數前面加上 $
):
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();
jQuery 中串連以及快取的方法是最簡潔且最快速的實作方式。
如果在清單中有太多元素,或許其內容是被ㄧ CMS 所製造的且你希望照字母順序來排序:
var ul = $('#list'),
lis = $('li', ul).get();
lis.sort(function (a, b) {
return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
});
ul.append(lis);
就是這樣!
如果要停用右鍵,您可以對整個頁面這麼做...
$(document).ready(function () {
$(document).bind('contextmenu', function (e) {
return false;
})
})
...而您也可以為特定元素做同樣的事情:
$(document).ready(function () {
$('#submit').bind('contextmenu', function (e) {
return false;
})
})
現今版本的 Chrome,Firefox,Safari,Opera,Edge 以及 IE11。