jQuery事件觸發前後進行其他的操作

2022-08-13 00:42:20 字數 3510 閱讀 3395

1

4doctype html

>

5<

html

lang

="en"

>

6<

head

>

7<

meta

charset

="utf-8"

>

8<

title

>動畫

title

>

9<

link

rel="stylesheet"

href

="css/base.css"

>

10<

style

>

11.container

16button

22.box

26style

>

27head

>

28<

body

>

29<

div

class

="container"

>

30<

button

class

="show"

>顯示

button

>

31<

button

class

="hide"

>隱藏

button

>

32<

div

class

="box"

>

div>

33div

>

34<

script

src="js/jquery.js"

>

script

>

3536

3774

7576

104body

>

105html

>

106107

***************====

108doctype html

>

109<

html

lang

="en"

>

110<

head

>

111<

meta

charset

="utf-8"

>

112<

title

>動畫

title

>

113114

<

link

rel="stylesheet"

href

="css/base.css"

>

115<

style

>

116.container

121button

127.box

131style

>

132head

>

133<

body

>

134<

div

class

="container"

>

135<

button

class

="show"

>顯示

button

>

136<

button

class

="hide"

>隱藏

button

>

137<

div

class

="box"

>

div>

138div

>

139<

script

src="js/jquery.js"

>

script

>

140<

script

>

141//

靜悄悄的顯示

142var

silent =,

150hide:

function

($ele)

157};

158var

$box =$(

'.box');

159var

$show =$(

'.show');

160var

$hide =$(

'.hide');

161//

單擊顯示按鈕 顯示$box

162$show.on(

'click',

function

())165

//單擊隱藏按鈕 隱藏$box

166$hide.on(

'click',

function

())169

170//

這裡只是進行物件事件的繫結而已。繫結了四個事件,可以使用 e.type 進行判斷具體執行哪個事件,從而執行相應的操作。

171//

該函式可以定義多次,執行其他操作。這是第一次定義:改變物件的html內容

172//

該函式定義多次,就執行多次,如console.log(e.type)就輸出多次。

173$box.on(

'show shown hide hiden',

function

(e)else

if(e.type

==='

shown

') ,

1000

);185

}186

})187

188//

這裡只是進行物件事件的繫結而已。繫結了四個事件,可以使用 e.type 進行判斷具體執行哪個事件,從而執行相應的操作。

189//

該函式可以定義多次,執行其他操作。這是第二次定義:改變物件的背景顏色

190//

該函式定義多次,就執行多次,如console.log(e.type)就輸出多次。

191$box.on(

'show shown hide hiden',

function

(e));

200}

else

if(e.type

==='

shown

') );

203},

2000

);204

}else

if(e.type

==='

hide')

else

if(e.type

==='

hiden

') ,

1000

);213

}214

})215

script

>

216body

>

217html

>

Jquery手動觸發事件

有時可能需要用 機械式的觸發乙個按鈕 文字框或網頁中其他控制項的一些事件,這個在登入的時候很常用,登入介面通常有三個文字框 使用者名稱 密碼和驗證碼,另外還有乙個登入按鈕,很多時候我們想實現每當乙個文字框失去焦點的時候和後台互動查詢使用者名稱是否存在 密碼是否正確以及驗證碼是否正確等,但同時會有另外...

JQuery 自動觸發事件

常用模擬 有時候,需要通過模擬使用者操作,來達到單擊的效果。例如在使用者進入頁面後,就觸發click事件,而不需要使用者去主動單擊。在jquery中,可以使用trigger 方法完成模擬操作。例如可以使用下面的 來觸發id為btn的按鈕的click事件。1 btn trigger click 這樣,...

jQuery事件自動觸發

27 jquery事件自動觸發 title style father son style script src js jquery 1.12.4.js script script function father click function 自動觸發事件 father trigger click f...