三 jQuery中的DOM操作

2021-07-03 08:33:06 字數 2322 閱讀 4779

dom簡介

dom:document objectmodel文件物件模型,dom是一種與瀏覽器、平台、語言無關的介面,使用該介面可以輕鬆的訪問頁面中所有的標準元件。

dom操作的分類:

domcore(核心)、html-dom和css-dom

jquery中的dom操作

1.查詢節點

查詢元素節點

查詢屬性節點attr()

2.建立節點

$(html)方法會根據傳入的html標記字串,建立乙個dom物件,並將這個dom物件包裝成乙個jquery物件後返回

3.插入節點

prepend()prependto()

after()insertafter()

before()insertbefore()

4.刪除節點

從dom中刪除所有匹配的元素,傳入的引數用於根據jquery表示式來篩選元素

$("ulli").remove(":eq(1)")等價於$("ul li:eq(1)").remove()

當某個節點用remove()方法刪除後,該節點所包含的所有後代節點將同時被刪除。

這個方法的返回值是乙個指向已被刪除的節點的引用,因此可以在以後再使用這些元素。

與remove不同的是,所有繫結的事件、附加的資料都會保留下來。

empty方法不是刪除節點,而是清空節點,能清空元素中的所有後代節點

5.複製節點

$("ulli").click(function())

另:6. 替換節點

replacewith()和replaceall()

這兩個方法的作用相同,只是顛倒了操作

注意:替換後,原先繫結的事件將會消失

7.包裹節點

wrap():將所有的元素進行單獨的包裹

wrapall():將所有匹配的元素用乙個元素來包裹,如果被包裹的多個元素間有其他元素,其他元素會被放到包裹元素之後。

wrapinner():將每乙個匹配的元素的子內容用其他結構化標記包裹起來

8、屬性操作

attr(name,value)

removeattr(name)

9.樣式操作

10.設定和獲取html、文字和值

html()html(value)

text()text(value)        

val()val(value)  this.defaultvalue()

val()方法還有另外乙個用處,它能夠使select(下拉列表框)、checkbox(多選框)和radio(單選框)相應的選項被選中,在表單操作中經常用到

$("#multiple").val(["選擇2號","選擇3號"]);

$(":checkbox").val(["check1","check2"]);

$(":radio").val(["radio2"]);

以上等價於attr的以下方式:

$("#multiple>option").removeattr("selected");

$("#multiple>option:eq(1),#multiple>option:eq(2)").attr("selected",true);

$(":checkbox:eq(1),:checkbox:eq(2)").attr("checked",true);

$(":radio:eq(1)").attr("checked",true);

11.遍歷節點

css-dom操作

css-dom技術簡單來說就是讀取和設定style物件的各種屬性。style屬性很有用,但最大不足是無法通過它來提取到通過外部css設定的樣式屬性,jquery可以做到。

可以直接利用css()方法獲取元素的樣式屬性。

也可以直接利用css()方法設定元素的樣式屬性

css()方法獲取的高度值與樣式的設定有關,而height()方法獲取的高度值則是元素在頁面中的實際高度,與樣式的設定無關。

offset()

position()

scrolltop()和scollleft()

關鍵點:

$("p").is(".another")

$("p").is("#page1")

$("input").is(":checked")

$("input").is(":disabled")

$("input").removeattr("disabled")

this指向當前的文字框,this.defaultvalue就是當前文字框的預設值

示例:

jQuery中的DOM操作 三

一 查詢節點 返回jquery物件 選擇器字串 使用jquery函式,裡面引數為選擇器字串,查詢符合條件的bom物件並返回jquery物件 eg div.one span first 查詢所有類名為one的div裡面的所有後代span裡面的第乙個span元素 二 建立節點 html文字字串 使用jq...

jquery中DOM節點操作(三)

一 樣式操作 1.獲取和設定樣式 attr 2.新增樣式 addclass 3.移除樣式 removeclass 4.切換樣式 toggleclass 5.是否使用樣式 hasclass 個人愛好 二 屬性操作 1.獲取和設定屬性 attr prop 二者區別 對於布林型別的屬性。如 checked...

jQuery中的DOM操作

三 jquery中的dom操作 3.2.1 查詢節點 1.查詢元素節點 var li ul li eq 1 獲取裡第2個節點 var li text li.text 獲取第二個元素節點的文字內容 2.查詢屬性節點 var para p 獲取節點 var p text para.attr title ...