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 ...