6 6 Query中的事件與DOM操作

2021-08-20 13:13:54 字數 1854 閱讀 2858

一、jquery對dom 操作

樣式操作

內容和value操作

節點操作

節點和屬性遍歷

節點遍歷

css-dom操作

1,使用

css()

為指定的元素新增樣式值或獲採樣式值 

css(name,value)                     css(name)

2,使用

addclass()

為元素追加樣式

addclass("class1 class2 class3......classn");

3,使用

removeclass()

移除樣式

removeclass("class1 class2 class3......classn");

4,toggleclass()

切換樣式:模擬addclass和removeclass實現樣式的新增和移除過程

.toogleclass(class);

5,hasclass()

用來判斷是否是否包含指定的樣式

.hasclass(class);、

html**操作:

html()可以對html**進行操作

,類似於js中innerhtml(識別標籤)

獲取:.html()

設定:.html( "");     //設定元素中間的html**

text()可以獲取或時設定元素的文字內容(但是並不識別標籤)

、獲取:.text()

設定:.text( 文字內容 )

val()

可以設定或獲取元素的value屬性值

獲取:.val()

設定:.val(value)

節點操作:

工廠函式$()用於獲取或建立節點

1 通過選擇器獲取節點              $(「div」)

2 將dom節點轉化成jquery節點    $( objdom)

3 使用 html 字串建立節點   $(「

」)插入節點:

parepend(content)   a.parepend(b) 將把b前置插入到a中

parependto(content)   a.parependto(b) 將把a前置插入到b中

after     a.after(b)  在a後面新增同級元素b  

befor   a.befor(b)  在a前面新增同級元素b  

/ $("input").click(function () )

removeattr(_)用來刪除元素的屬性

removeattr(name)

節點的遍歷

遍歷子節點:

children()  可以獲取元素的所有子元素

next()獲取緊鄰其後的元素

prev()獲取緊鄰匹配元素之間的元素

silbings() 用於獲取同輩的其它所有元素

遍歷父輩元素

parent()獲取父級元素

parents()獲取元素的祖先元素

each()類似於for  迴圈遍歷每個匹配元素規定的執行函式

end()將元素還原成之前的狀態

遍歷陣列

$(document).ready(function() )

})

*:css()還有獲取元素高度,寬度等的樣式操作   方法

$("ul").find("li:eq(2)").end().css()

JS中的DOM事件

1.html事件處理程式 html事件缺點 html和js 緊密的耦合在一起,js 個html都需要進行修改。2.dom0級事件處理程式 較傳統的方式 把乙個函式賦值給乙個事件的處理程式屬性用的比較多的方法,簡單,跨瀏覽器的優勢 沒有html事件處理程式的缺點。3.dom2級事件處理程式 dom2級...

DOM 中的事件處理

根據 w3c dom 2 events 描述,eventtarget 介面被所有支援 dom 事件模型的節點 node 實現。該介面提供了 addeventlistener 和 removeeventlistener 方法,用來繫結或解綁乙個 eventlisteners 介面到乙個 eventta...

DOM 中的事件處理介紹

該介面提供了 addeventlistener 和 removeeventlistener 方法,用來繫結或解綁乙個 eventlisteners 介面到乙個 eventtarget。dom 2 events 中定義了 event 介面,用來提供事件的上下文資訊,它提供了若干標準屬性和方法。實現 e...