jQuery 的事件操作

2021-10-10 08:19:46 字數 3531 閱讀 4441

dom 中提供了load事件用於載入頁面完畢之後的執行機制,jquery 提供了ready()方法實現相似功能。但 dom 中的load事件與 jquery 中的 ready() 方法的區別如下表所示:

dom 中的load事件:

jquery 中的read()方法:

沒有任何簡寫形式

具有簡寫形式

當 html 頁面載入完畢之後觸發load事件

當 dom 節點述載入完畢之後呼叫ready()方法

乙個 html 頁面僅允許存在乙個load事件

乙個 html 頁面允許存在多個ready()方法

jquery 提供了ready()方法,來實現類似於window.obload事件的功能。當dom載入就緒可以查詢及操縱時繫結乙個要執行的函式。

$

(document)

.ready

(function()

);

其中$(document).ready()可以進行簡寫為:

// 1$(

).ready

(function()

)// 2$(

function

($))

;

jquery 中提供了bind()unbind()方法完成事件繫結與解綁功能,具體語法如下:

$element.

bind

(type,data,callback)

;$element.

unbind

(type[

,data.callback]);

// 這裡的 type 用於刪除含有乙個事件型別的字串

用法示例:

// 乙個事件可以繫結多個方法$(

'#btn').

bind

('click'

,function()

);$(

'#btn').

bind

('click'

,function()

);

如下圖所示:

unbind(type,data,callback)方法用於解綁事件,在使用過程中存在兩種情況:

$

('#btn').

bind

('click'

,function()

);$(

'#btn').

bind

('click'

,function()

);$(

'#btn').

unbind

('click',)

;

用法示例:

function

click1()

function

click2()

$('#btn').

bind

('click'

,click1);$

('#btn').

bind

('click'

,click2);$

('#btn').

unbind

('click'

,click1)

;

bind()方法,多事件繫結,事件名稱之間使用空格分隔

用法示例:

// 滑鼠懸停事件

// * mouseover 表示滑鼠懸停在指定元素之上

// * mouseout 表述滑鼠從指定元素上移開$(

'#title').

bind

('mouseover mouseout'

,function()

else

})

多事件繫結的unbind()方法分為三種情況:

沒有指定任何事件時,將指定元素的所有事件全部解綁

指定乙個事件名稱時,將指定元素的指定當個事件解綁

指定多個事件名稱時,將指定元素的指定多個事件解綁

jquery 由於版本不同,完成事件繫結的方法不僅bind()方法,還有以下幾種方法:

jquery 中提供多組事件繫結與解繫結的方法:

live()die()jquery 1.7 版本後刪除方法

delegate()undelete()- jquery 1.6 版本後新增方法,jquery 3.0 版本後刪除方法

one()為事件繫結一次性的函式

jquery 提供了hover()方法模擬滑鼠懸停事件效果,具體語法如下:

$element.

hover

([over,

]out)

;

用法示例:

$

('#title').

hover

(function()

,function()

);

jquery 提供了toggle()方法用於繫結兩個或多個事件處理器函式,以響應被選元素的輪流的click事件。具體語法如下:

$element.

toggle

(fn,fn2[

,fn3,fn4,

...]

);

說明:需要注意的是在 1.9 版本這個方法發生了變化,不再是事件切換的方法而是變成了動畫方法。

jquery 提供了trigger()方法用於模擬觸發匹配元素繫結的事件,具體語法如下:

$element.

trigger

(type[

,data]

);

用法示例:

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

事件模擬title

>

前端 jQuery 事件操作

jquery事件 給未來元素繫結事件 姓名 愛好操作 1小強吃冰激凌 刪除 2二哥 girl 刪除 新增一行資料 jquery鍵盤相關事件 批量操作 姓名 愛好操作 小強吃冰激凌 下線上線 離線 二哥girl 下線上線 離線 二哥girl 下線上線 離線 二哥girl 下線上線 離線 二哥girl ...

jquery操作DOM和事件

1.jquery操作dom的屬性 attr 1.1 獲得節點的屬性 jquery物件.attr 屬性名 eg 獲得節點物件的屬性 alert d1 attr src 1.2 設定節點的一對屬性 jquery物件.attr 屬性名 屬性值 eg 設定節點物件的一對屬性 1.3 設定節點的多對屬性 jq...

jQuery事件 表單事件

focus 與 blur 事件 之前學過了表單處理事件focusin事件與focusout事件,同樣用於處理表單焦點的事件還有blur與focus事件 它們之間的本質區別 是否支援冒泡處理 focus 不會冒泡,在元素本身產生 focusin 會冒泡,在元素包含的元素中產生。blur與focusou...