jQuery中的事件和動畫

2021-09-26 19:59:37 字數 2751 閱讀 2857

$('.box').click(function(ev){})//低版本jquery沒有相容問題

ev.which//記錄滑鼠的鍵值,1、2、3/左鍵、滾輪、右鍵

on()

// 事件繫結,on(事件名,[事件委託時寫的子級],函式)

// 繫結兩個相同的事件

// $('.box').on('click',function () )

// $('.box').on('click',function () )

// 繫結兩個不同的事件

// 第一種寫法:

// $('.box').on('click',function () )

// $('.box').on('mouseover',function () )

// $('.box').on('click mouseout',function())

//第二種寫法

// 也可以把事件放入乙個物件中

// $('.box').on(,

// mouseout:function()

// })

// jq中事件委託

// $('ul').on('click', 'li', function () )

>

555li

>

')//動態新增的事件也可以新增事件

off()

// 取消事件繫結 off()

// $('.box').on('click mouseout',function () )

// $('.box').off();//括號裡什麼也沒有就把所有的事件都取消

// $('.box').off('mouseout');//只取消其中乙個事件

// $('.box').on('click.a',function () )

// $('.box').off('click');//這樣也可以去掉

// $('.box').on('click.b',function () )

// // 有兩個相同的事件,去掉其中的乙個,給事件命名

// $('.box').off('click.b');

one()

// 單次事件繫結 one()

// $('.box').one('click',function () )

hover()

// 合成事件 hover()

$('.box').hover(function())

},function())

})

// 第一組顯示隱藏:show(time,easing,callback)顯示 hide()隱藏 toggle()合成

// 改變的是寬高和透明度

// 引數分別是:time,時間,多長時間完成這件事;easing,速度;

// $('button').eq(1).click(function())

// $('button').eq(0).click(function())

// $('button').eq(2).click(function())

// 第二組顯示隱藏:fadein()顯示 fadeout()隱藏 fadeto()到多少 fadetoggle()合成

// 改變的是透明度

// $('button').eq(1).click(function())

// $('button').eq(0).click(function())

// $('button').eq(2).click(function())

// // $('button').eq(2).click(function())

//第三組顯示隱藏:slidedown()顯示 slideup()隱藏 slidetoggle()合成

// 改變的是高度

// $('button').eq(1).click(function())

// $('button').eq(0).click(function())

// $('button').eq(2).click(function())

animate()

// $('.box').animate(,1000);//寫在一塊就同時進行

// $('.box').animate(,1000);//分開寫就先執行上面的然後再執行下面的

// $('.box').animate(,1000).queue(function(next)).delay(2000).animate(,1000)

//delay,延遲兩秒以後執行後面的

$('.box').animate(,1000);

// $('.box').stop(true);//只會停止上面的,不會影響下面的

$('.box').animate(,1000);

// $('.box').stop();停止當前的,走後面的動畫

// $('.box').stop(true);//停止在它上面的所有動畫

// $('.box').stop(true,true);//直接到達當前動畫的最終狀態 ,停止後續的動畫

// $('.box').finish();//它上面所有動畫均達到完成狀態

jQuery的事件和動畫

1.偵聽事件 div on click.a function 2.僅用一次的事件 div one click function 3.事件的第二位除了可以是事件函式,還可以加入事件偵聽傳遞的引數 var obj 事件的第二位除了可以是事件函式,還可以加入事件偵聽傳遞的引數 div on click o...

jquery中的事件與動畫

1.滑鼠事件 eg 光棒效果 function mouseout function 2.鍵盤事件 3.表單事件 eg 輸入框的文字顯示效果 查詢輸入框 input name search focus function input name search blur function 4.繫結事件與移除...

JQuery的事件與動畫

toggle 方法的用法 toggle 方法用於模擬滑鼠連續單擊事件。執行為 第一次單擊執行第乙個函式,第二次單擊時執行第二個函式,可以重複呼叫,編寫網頁或新聞時,如有標題需要對其進行解釋時可以使用toggle 方法。如下 function function 中的標題就是我們要處理的乙個事件,我們可...