10個jQuery小技巧

2022-07-17 02:45:07 字數 2382 閱讀 9707

收集的10個 jquery 小技巧/**片段,可以幫你快速開發。

1.返回頂部按鈕

你可以利用animatescrolltop來實現返回頂部的動畫,而不需要使用其他外掛程式。

1 $('a.top').click(function

() , 800);

3return

false

4 });

改變scrolltop的值可以調整返回距離頂部的距離,而animate的第二個引數是執行返回動作需要的時間(單位:毫秒)。

2.預載入

1 $.preloadimages = function

() };

5 $.preloadimages('img/hover1.png', 'img/hover2.png');

3.檢查是否載入完成

1 $('img').load(function

() );

你可以把img替換為其他的id或者class來檢查指定是否載入完成。

4.自動修改破損影象

1 $('img').on('error', function

() );

5.滑鼠懸停(hover)切換class屬性

假如當使用者滑鼠懸停在乙個可點選的元素上時,你希望改變其效果,下面這段**可以在其懸停在元素上時新增class屬性,當使用者滑鼠離開時,則自動取消該class屬性:

1 $('.btn').hover(function

() , function

() );

你只需要新增必要的css**即可。如果你想要更簡潔的**,可以使用toggleclass方法:

1 $('.btn').hover(function

() );

注:直接使用css實現該效果可能是更好的解決方案,但你仍然有必要知道該方法。

6.禁用 input 字段

有時你可能需要禁用表單的submit按鈕或者某個input字段,直到使用者執行了某些操作(例如,檢查「已閱讀條款」核取方塊)。可以新增disabled屬性,直到你想啟用它時:

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

你要做的就是執行removeattr方法,並把要移除的屬性作為引數傳入:

$('input[type="submit"]').removeattr('disabled');

7.阻止鏈結載入

1 $('a.no-link').click(function

(e) );

8.切換 fade/slide

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

1 $('.btn').click(function

() );

4 $('.btn').click(function

() );

9.簡單的手風琴效果

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

1 $('#accordion').find('.content').hide();

2 $('#accordion').find('.accordion-header').click(function

() );

10.讓兩個 div 高度相同

有時你需要讓兩個 div 高度相同,而不管它們裡面的內容多少。可以使用下面的**片段:

1

var $columns = $('.column');

2var height = 0;$columns.each(function

() 6

});7 $columns.height(height);

這段**會迴圈一組元素,並設定它們的高度為元素中的最大高。

人人必知的10個jQuery小技巧

1.返回頂部按鈕 你可以利用 animate 和 scrolltop 來實現返回頂部的動畫,而不需要使用其他外掛程式。back to top back to top a.top click function 800 return false back to top 改變 scrolltop 的值可以...

10個Python小技巧

flag true if flag x 1else x 2print x 簡化形式 flag true x 1 if flag else 2 print x sum 0 for i in range 0,101 sum i print sum 利用求和函式sum print sum range 0,...

discuz優化10個小技巧

首先想到的是內建的效能優化,在後台的 全域性 效能優化 是否優化更新主題瀏覽量 是 檢視數開啟防重新整理 是。如果選擇 否 主題 空間 日誌每訪問一次,瀏覽量增1,會增大伺服器壓力,建議選擇 是 開啟延時載入 是。當開啟後,頁面中的在瀏覽器的當前視窗時再載入,可明顯降低訪問量很大的站點的伺服器負擔,...