jQuery中的事件與DOM有什麼不同呢???

2021-10-10 13:15:51 字數 3308 閱讀 2965

"btn"

>

按鈕button

>

dom 提供了load事件用於頁面載入完畢之後執行機制,jquery 提供了ready()方法實現相似功能。

但是 dom 中的load事件與 jquery 中的ready()方法具有以下三種區別:

單事件的繫結與解綁

單事件繫結

jquery 提供了bind()方法完成事件繫結功能,

$element.

bind

(type, data, callback)

;

單事件解綁

jquery 提供了unbind()方法完成事件繫結功能,

$element.

unbind

(type[

,data,callback]

);

"btn"

>

按鈕button

>

>

function

click1()

function

click2()

$("#btn").

bind

("click"

, click1);$

("#btn").

bind

("click"

, click2);/*

unbind

情況如果只傳遞事件名稱的話 - 解綁該事件的所有處理函式

如果傳遞事件名稱和指定的處理函式 - 解繫結該事件的指定函式

*/// $('#btn').unbind('click',click1);

/* bind()與unbind()中的data引數

data引數的值 ->利用event事件物件的data屬性進行接收

特點 - 該引數的資料內容只能在事件的處理函式中被使用

*/$(

"#btn").

bind

("click",,

function

(event));

script

>

效果:

多事件繫結與解綁

bind()方法和unbind()方法

還提供了多事件繫結。事件名稱之間使用空格分隔

lang

="en"

>

>

charset

="utf-8"

/>

name

="viewport"

content

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

/>

>

documenttitle

>

src=

"jquery-3.5.1.js"

>

script

>

>

#title

ulli

style

>

head

>

>

"title"

>

選單div

>

>

>

北京li

>

>

天津li

>

>

廊坊li

>

ul>

>

/* 滑鼠懸停事件

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

mouseout - 表示滑鼠從指定元素上移開

*/// $('#title').bind('mouseover',function());

// $('#title').bind('mouseout',function());

//jquery支援鏈式操作

// $('#title').bind('mouseover',function()).bind('mouseout',function());

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

"#title").

bind

("mouseover mouseout"

,function()

else})

;/*unbind()方法

沒有指定任何事件 - 將指點的元素的所有事件全部繫結

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

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

*/// $('#title').bind('mouseover mouseout')

script

>

body

>

html

>

事件繫結的方法(經典面試題)

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

hover()方法模擬滑鼠懸停事件效果

$element.

hover

([over,

]out)

;

**:

//jquery提供hover(over,out)方法$(

"#title").

hover

(function()

,function()

);

toggle()方法,1.9 後被刪除,功能轉移至動畫了trigger()方法 - 模擬使用者觸發事件

"btn"

>

按鈕button

>

>

//繫結事件 - 由使用者行為進行觸發,呼叫處理函式$(

"#btn").

bind

("click"

,function()

);//模擬使用者觸發事件$(

"#btn").

trigger

("click");

script

>

JQuery與DOM中的區別

一 query與dom的區別 1.頁面載入 dom window.onload function jquery function 2.獲取物件 jquery中有 dom document.getelementbyid id jquery id 3.取值 dom通過屬性 jquery通過方法 domj...

jquery操作DOM和事件

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

DOM物件與jQuery物件有什麼不同

jquery物件和dom物件使用說明,需要的朋友可以參考下。1.jquery物件和dom物件 第一次學習jquery,經常分辨不清哪些是jquery物件,哪些是 dom物件,因此需要重點了解jquery物件和dom物件以及它們之間的關係.dom物件,即是我們用傳統的方法 j ascript 獲得的物...