jQuery事件：

jQuery中的事件和javascript中的事件基本相似，不同的是jQuery中的事件處理函數寫在事件后面的括號中，如：

<script>$('input').click(function() {alert('hello word');});</script>

jQuery中常見事件：

jQuery中常見效果：

jQuery中常見的效果有：hide()/show()/toggle():隱藏/顯示/切換hide()和show()、slideDown()/slideUp()/slideToggle():滑出/滑入/slideDown和slideUp切換，更多如下表：

效果函數描述案例

toggle()和slideToggle()	兩種方法都有對元素顯示和隱藏的作用，toggle控制元素hide和show，slideToggle控制元素slideDown和slideUp，里面傳入毫秒數則控制效果的時間	$(‘input’).click(function() {$(“div”).slideToggle();});
show()和hide()	控制元素的顯示和隱藏，從左上角開始顯示或隱藏，里面傳入毫秒數則控制效果的時間	$(‘input’).click(function() {$(“div”).hide(1000);});
slideDown()和slideUp()	控制元素向下 顯示或向上隱藏，從元素的上邊發生變化，里面傳入毫秒數則控制效果的時間	$(‘input’).click(function() {$(“div”).slideUp(1000);});
animate(styleObj,speed,easing,fn)	自定義動畫，可以出入四個參數，第一個參數是控制元素屬性的對象，第二個參數是控制速度的，可省略；第三個是控制運動軌跡的，可省略；第四個參數是一個回調函數，當animate執行完后，回調函數會被調用	$(‘input’).click(function() {$(“div”).animate({height: ‘300px’,width: ‘300px’}, function() {$(“div”).css(‘backgroundColor’, ‘green’);});});
clearQueue()	當有多組動畫時，停止當前運動后的動畫，即這次動畫運動完后，下一動畫被停止	$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).clearQueue();});
dequeue()	當前動畫沒有運動完，直接進入下一動畫	$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).dequeue();});
fadeIn()和fadeOut()	漸變的控制元素的顯示和隱藏，可以傳入毫秒數控制效果時間	$(‘input’).click(function() {$(“div”).fadeIn()});
fadeTo(speed,opacity,fn)	控制元素的透明度，第一個參數傳入毫秒數，表示漸變過程的時間；第二參數表示透明值，第三個參數是回調函數	$(‘button’).click(function() {$(“div”).fadeTo(null, 0.1);});
stop()	暫停當前運動的動畫或效果	$(‘button’).click(function() {$(“div”).stop();});

隱式迭代：

隱式迭代：jQuery中遍歷內部 DOM 元素（偽數組形式存儲）的過程。簡單理解：給匹配到的所有元素進行循環遍歷，執行相應的方法，而不用我們再進行循環，簡化我們的操作，方便我們調用。

$('div').hide(); // 頁面中所有的div全部隱藏，不用循環操作

鏈式編程：

jQuery中允許我們在一條語句中寫多個 jQuery 方法在相同的元素上，鏈式編程可以節省代碼量，看起來更優雅美觀，如：

$(this).css('color', 'red').sibling().css('color', 'white');

jQuery 樣式操作：

jQuery中常用的樣式操作有兩種：css() 和 設置類樣式。

使用CSS操作樣式：

jQuery 可以使用 css 方法來修改簡單元素樣式，css() 多用于樣式少時操作，多了則不太方便，常用以下三種形式 :

// 1.參數只寫屬性名，則是返回屬性值var strSize = $('p').css('fontSize');// 2. 參數是屬性名+屬性值，中間用逗號分隔，是設置一組樣式，屬性必須加引號$('div').css('color', 'red');// 3. 參數可以是對象形式，方便設置多組樣式。屬性名和屬性值用冒號連接$('p').css({ "color":"white","font-size":"20px"});

通過設置類名設置樣式：

jQuery提供了可以刪除添加及刪除添加互相轉換的方法來操作某個類名，提醒：操作某個類時，其他類不會發生改變(原生javascript中的className會覆蓋所有類名)，類名前面不需要加點;設置類樣式方法比較適合樣式多時操作，可以彌補css()的不足,如：

// 1.添加類$("div").addClass("hide");// 2.刪除類$("div").removeClass("show");// 3.切換類$("div").toggleClass("showHide");

動畫隊列：

動畫一旦觸發必將執行完，才可以進入下一動畫，這樣會發生在連續觸發動畫時，動畫會產生不友好的體驗，可以使用jQuery提供的stop()方法來停止當前動畫，這樣就解決了不友好的體驗，如：

<script>$('button').click(function() {$('div').stop().slideToggle(2000);});</script>

hover事件切換:

jQuery提供了一個新事件 hover() ; 類似 css 中的偽類 :hover ，hover(fn1,fn2)里面傳入兩個函數做為參數，第一個參數表示鼠標移入某個元素時觸發的函數，第二個參數表示鼠標移出某個元素時觸發的函數；如果只傳入一個函數作為參數，則移出和移入都執行這個函數，如：

<script>$('div').hover(function() {$('li').hide();}, function() {$('li').show();});</script>

jQuery中不同元素綁定相同事件：

jQuery中on支持給不同元素綁定相同的處理事件,其元素之間僅用逗號隔開即可，如：

$('.btn2,input,a').on('click', function() {$box.toggleClass('fade'); });

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。