前端乾貨，超實用的JQuery小技巧

JQuery是一個 JavaScript 庫，她極大的簡化了我們對 JavaScript 的編程，今天我們總結了下平常項目中用到的一些小技巧，僅供參考。

 

 1、替換元素

有時候需要直接替換掉html中的某個元素時，可以以這麼做。

 

2、延時加載

當頁面中元素過多或者需要控制某些元素的加載順序時，我們可以對這些元素進行延時加載。

 

3、返回頂部按鈕

可以利用 animate 和 scrollTop 來實現返回頂部的動畫，而不需要使用其他插件。

 

4、檢查瀏覽器版本

注: 在版本jQuery 1.4中，.support替換掉了.support替換掉了.browser 變量。

 

5、預加載圖片

當頁面中使用了很多不可見的圖片（如： hover 顯示），可能需要預加載它們。

 

6、檢查圖片是否加載完成

有時候需要確保圖片完成加載完成後，再執行後續的操作。

 

7、自動修改破損圖像

如果你碰巧在你的網站上發現了破碎的圖像鏈接，你可以用一個不易被替換的圖像來代替它們。添加這個簡單的代碼可以節省很多麻煩。

 

8、阻止鏈接加載

有時不希望鏈接到某個頁面或者重新加載它，可能希望它來做一些其他事情或者觸發一些其他腳本，可以這麼做。

 

9、禁止右鍵點擊

某些情況下需要控制頁面元素，禁止右鍵點擊的行爲，可以這麼做。

 

10、切換 fade/slide

fade 和 slide 是我們在 jQuery 中經常使用的動畫效果，它們可以使元素顯示效果更好。但是如果你希望元素顯示時使用第一種效果，而消失時使用第二種效果，則可以這麼做。

 

11、ID與Class之間轉換

當改變Window大小時，在ID與Class之間切換。

 

12、檢查某個元素是否存在

驗證某個元素是否存在，我們可以使用length屬性來判斷。

 

13、驗證元素是否爲空

 

14、把創建的元素動態地添加到DOM中

新創建的元素，動態添加DOM，可以這麼做。

 

15、統計元素個數

統計頁面中某個元素標籤的個數，比如，

 

16、與其他Javascript類庫衝突解決方案

當頁面中引入了多個Javascript類庫時，若有不同類庫之間方法衝突的情況發生，可以重命名JQuery的調用名。

 

好了，以上JQuery的一些小技巧，你都瞭解了嗎。