前端開發者都應知道的 jQuery 小技巧

一個簡單技巧的集合，幫你提升 jQuery 技能。

Matt Smith 發起的一個小專案，目前已有 15 個 小技巧。伯樂線上會持續跟進更新。

1. 回到頂部按鈕
2. 預載入圖片
3. 檢查圖片是否載入完畢
4. 自動修復損壞的圖片
5. Hover 上的 Class 開關
6. 禁用 input 欄位
7. 停止連結載入
8. 淡入淡出/滑動開關
9. 簡單的摺疊效果
10. 將兩個 Div 設為相同高度
11. 在新視窗開啟外部連結
12. 找到文字元素
13. 切換可視與隱藏的觸發器
14. Ajax 呼叫的錯誤處理
15. 鏈式操作

---

回到頂部按鈕

通過使用 jQuery 中的 animate 和 scrollTop 方法，你無需外掛便可建立一個簡單地回到頂部動畫：

將 scrollTop 的值改為你想要 scrollbar 停止的地方。然後你要做的就是，設定在 800 毫秒內回到頂部。

預載入圖片

如果你的頁面使用了大量不能初始可見的圖片（例如繫結在 hover 上），預載入它們是十分有用的：

檢查圖片是否載入完畢

有時你或許要檢查圖片是否完全載入完畢，才能在指令碼中進行後續操作：

你也可以通過把 img 標籤替換成 ID 或 class，來檢查特定圖片是否載入完成。

自動修復損壞的圖片

如果你發現自己網站的圖片連結掛了，一個一個替換很麻煩。這段簡單的程式碼可以幫上大忙：

即使你沒有任何損壞的連結，增加這段程式碼也不會有什麼影響。

Hover 上的 Class 切換

如果使用者的滑鼠懸停在頁面上某個可點選元素時，你想要改變這個元素的視覺表現。可以使用下面這段程式碼，當使用者懸停時，為該元素增加一個 class；當使用者滑鼠離開後移除這個 class：

你僅需增加必須的 CSS。如果需要更簡單的方式，還可以使用 toggleClass 方法：

注意：CSS 或許是這個例子更快速的解決方式，但大家仍然值得知道這一點。

禁用 input 欄位

有時你也許想讓表單的提交按鈕或其文字輸入框變得不可用，直到使用者執行了一個特定行為（例如確認 “我已經閱讀該條款” 的核取方塊）。增加 disabled attribute 到你的 input，就可以實現自己想要的效果：

當你想把 disabled 的值改為 false 時，僅需在該 input 上再執行一次 prop 方法。

停止連結載入

有時你不想連結跳轉到某個頁面或重載入該頁面，而希望可以做一些其他事情，比如觸發其他指令碼。下面的程式碼是禁止預設行為的一個小訣竅：

淡入淡出/滑動開關

淡入淡出與滑動是我們經常使用 jQuery 做成的動畫效果。或許你只是想在使用者點選某物時展現一個元素，使用 fadeIn 和 slideDown 都很棒。但如果想讓該元素在第一次點選時顯現，第二次點選時消失，下面的程式碼可以很好地完成這個工作：

簡單的手風琴效果

這是一個快速實現手風琴效果的簡單方法：

增加這段指令碼後，你所需做的所有事就是，檢視指令碼是否在必須的 HTML 中正常工作。

使兩個 Div 高度一樣

有時你也許想讓兩個 div 擁有同樣高度，不管它們裡面有什麼內容：

該例設定了 min-height，意味著它可以比主要 div 更大，但永遠不能更小。但有一個更加靈活的方法是遍歷一組元素的設定，然後將高度設為元素中的最高值：

如果你想讓所有列都有相同高度：

在新標籤/視窗開啟站外連結

在一個新標籤或者新視窗中開啟外接連結，並確保站內連結會在相同的標籤或視窗中開啟：

注意：window.location.origin 在 IE 10 中不可用，該 issue 的修復方法。

通過文字找到元素

通過使用 jQuery 中的 contains() 選擇器，你可以找到某個元素中的文字。如果文字不存在，該元素將會隱藏：

視覺改變觸發

當使用者焦點在另外一個標籤上，或重新回到標籤時，觸發 JavaScript：

Ajax 呼叫的錯誤處理

當某次 Ajax 呼叫返回 404 或 500 錯誤，就會執行錯誤處理。但如果沒有定義該處理，其他 jQuery 程式碼或許會停止工作。可以通過下面這段程式碼定義一個全域性 Ajax 錯誤處理：

[更新：2015-11-02]

外掛鏈式呼叫

jQuery 支援鏈式呼叫外掛，以減緩反覆查詢 DOM，並建立多個 jQuery 物件。看下面示例程式碼：

上面這段程式碼，可以通過鏈式操作大大改進：

還有另外一種方法，把元素快取在變數中（字首是  $ ）：

jQuery 中的鏈式操作和快取方法，都極大精簡和提速了程式碼。