jQuery中的DOM操作
DOM操作的分類
一般來說DOM的操作分為3個方面，即DOM Core、HTML-DOM吠冤、CSS-DOM
- DOM Core：JavaScript中的getElementById()相味、getElementsByTagName()尼酿、getAttribute()下隧、serAttribute()等方法都是DOM Core的組成部分
-
HTML-DOM：HTML-DOM的出現(xiàn)甚至比DOM Core還早，它提供了一些更簡明的記號來描述各種HTML元素的屬性
document.forms和element.src -
CSS-DOM：它是針對CSS的操作谓媒。CSS-DOM的主要技術(shù)就是獲取和設(shè)置style對象的各種屬性
element.style.color = 'red'
jQuery中的DOM
查找節(jié)點
1.查找元素節(jié)點
var $li = $('ul li:eq(1)'); //獲取ul里的第二個li節(jié)點
var txt = $li.text(); // 獲取第二個li節(jié)點中的文本內(nèi)容
2.查找屬性節(jié)點
attr()方法可以獲取某一元素的各種屬性。它接受的參數(shù)可以為1個也可以是2個何乎。當(dāng)參數(shù)是一個時句惯，則是要查詢屬性的名稱
var $para = $('p');
var txt = $para.attr('title'); //獲取p元素的節(jié)點屬性title
創(chuàng)建節(jié)點
1.創(chuàng)建元素節(jié)點
創(chuàng)建新元素可以使用jQuery的工廠函數(shù) $()來完成 ===> $(html)，創(chuàng)建完新元素之后需要使用append()方法將其添加到文檔中去。
var $li_1 = $('<li></li>');
var $li_2 = $('<li></li>');
$('ul').append($li_1);
$('ul').append($li_2);
動態(tài)創(chuàng)建的元素不會自動添加到文檔中去，必須使用其他方法將其插入文檔
1.創(chuàng)建文本節(jié)點
創(chuàng)建文本節(jié)點就是在創(chuàng)建元素節(jié)點時直接把文本內(nèi)容寫入標(biāo)簽即可
var $li_1 = $('<li>111</li>');
var #complex = $('<li><em>這是</em><b>一個</b><a href="#">復(fù)雜的組合</a></li>')
插入節(jié)點
動態(tài)創(chuàng)建的節(jié)點沒什么作用蜂怎，還需要將它插入到文檔中
| 方法 | 描述 | 實例 | |
|---|---|---|---|
| append() | 向每個匹配的元素內(nèi)部追加內(nèi)容 | $('p').append('<b>Hello</b>') |
|
| appendTo() | 將所有匹配的元素追加到特定的元素中 | $('<b>Hello</b>').appendTo('p') |
|
| prepend() | 向每個匹配的元素內(nèi)部前置內(nèi)容 | $('p').prepend('<b>Hello</b>') |
|
| prependTo() | 將所有匹配的元素前置到特定的元素中 | $('<b>Hello</b>').prependTo('p') |
|
| after() | 在每個匹配的元素后面插入內(nèi)容 | $('p').after('<b>Hello</b>') |
|
| insertAfter() | 將所有匹配的元素插入到特定的元素后面 | $('<b>Hello</b>').inserAfter('p') |
谨履、 |
| before() | 在每個匹配的元素后面插入內(nèi)容 | $('p').before('<b>Hello</b>') |
|
| insertBefore() | 將所有匹配的元素插入到特定的元素前面 | $('<b>Hello</b>').inserBefore('p') |
刪除節(jié)點
1.remove()方法
$('ul li:eq(1)').remove(); //獲取ul中的第二個li元素后，將他從頁面中刪除
某個元素用remove()方法刪除后孵班，該節(jié)點所包含的所有后代節(jié)點都將同時被刪除。該方法的返回值指向一個已被刪除的節(jié)點引用，因此可以在以后再使用該元素
另remove()方法也可以通過傳遞參數(shù)來選擇性的刪除元素恃轩。
$('ul li').remove('li[title!="orange"]') //將li元素中屬性不等于orange的元素刪除
2.detach()方法
detach()和remove()一樣都是去除DOM中所有匹配的元素。不過detach()不會把匹配的元素從jQuery中刪除黎做，而且它所綁定的事件叉跛、附加的數(shù)據(jù)均會被保留下來。
3.empty()方法
empty()方法可以清空元素中的所有后代節(jié)點蒸殿。它嚴(yán)格來說不會刪除元素筷厘，而是清空所匹配元素中的內(nèi)容
復(fù)制節(jié)點 clone()
$('ul li').click(function(){
$(this).clone().appendTo('ul'); //復(fù)制當(dāng)前點擊的節(jié)點，并將它追加到ul元素中
})
復(fù)制節(jié)點后宏所，復(fù)制的新元素不具備任何行為酥艳。如果需要新元素野具有輔助功能，需在clone()方法中傳入一個參數(shù)true爬骤。（深度克鲁涫）
替換節(jié)點
如果要替換某個節(jié)點，jQuery提供了兩個方法：replaceWith()霞玄、replaceAll()
$('p').replaceWith('<div>hahahah</div>');
$('<div>hahahah</div>').replaceAll('p'); //replaceAll()的用法只是顛倒了replaceWith()操作
包裹節(jié)點
- wrap(X) 將所有匹配到的元素使用X進行單獨包裹
- wrapAll(X) 將所有匹配到的元素用一個X來包裹
- wrapInner(X) 將每一個匹配到的元素的子內(nèi)容使用X來包裹
屬性操作
- 獲取屬性和設(shè)置屬性 attr()
- 刪除屬性 removeAttr()
樣式操作
- 獲取樣式和設(shè)置樣式 attr('class')
- 追加樣式 addClass()
- 移除樣式 removeClass()
- 切換樣式 toggleClass()
toggleClass()方法可以控制樣式上的重復(fù)切換赫冬。如果類名存在就刪除它，如果不存在就添加它溃列。$('p').toggleClass(another) - 判斷是否含有某個樣式 hasClass()
設(shè)置和獲取HTML劲厌、文本和值
- html() 此方法類似于JavaScript中的innerHtml屬性√可以用來讀取或設(shè)置某個元素中的HTML內(nèi)容
var p_html = $('p').html //獲取p元素的html $('p').html('<em>hahhahaha<em>'); //設(shè)置p元素的html代碼 - text() 此方法類似于JavaScript中的innerText屬性补鼻。可以用來讀取或設(shè)置某個元素中的文本內(nèi)容
- val() 此方法類似于JavaScript中的value屬性》绶叮可以用來讀取或設(shè)置某個元素的值咨跌。
//利用val()屬性實現(xiàn)當(dāng)點擊文本框時，文本框中的內(nèi)容將被清除
//html
<label for="acc">用戶名：<input type="text" value="請輸入用戶名" id="acc"></label>
<label for="psw">密碼：<input type="password" value="請輸入密碼"
id="psw"></label>
//js
$('#acc').focus(function () {
if ($(this).val() == this.defaultValue){
$(this).val('');
}
});
$('#acc').blur(function () {
if ($(this).val() == ''){
$(this).val('請輸入用戶名');
}
});
//同理硼婿，密碼框也類似
在此例子中锌半，也可以使用表單元素的defaultValue屬性來實現(xiàn)同樣的功能
if ($(this).val() == this.defaultValue){...} //this.defaultValue就是當(dāng)前文本框默認(rèn)值
樣式遍歷節(jié)點
1. children()
用于取得匹配元素的子元素集合且只考慮子元素不考慮其他后代元素
2. next()
用于取得匹配元素后面緊鄰的同輩元素
3. prev()
用于取得匹配元素前面緊鄰的同輩元素
4. siblings()
用于取得匹配元素前后所有的同輩元素
closest()、parent()寇漫、parents()
| 方法 | 描述 |
|---|---|
| parent() | 獲取集合中每個匹配元素的父級元素 |
| parents() | 獲取集合中每個匹配元素的祖先元素 |
| closest() | 從元素本身開始刊殉，逐級想上級元素匹配, 并返回最先匹配的祖先元素 |
CSS-DOM操作
CSS-DOM技術(shù)簡單來說就是讀取和設(shè)置style對象的各種屬性。
css() 用于獲取或設(shè)置元素的樣式屬性
height()州胳、width()用于獲取或設(shè)置元素的高记焊、寬
當(dāng)使用css()方法獲取元素寬/高時，得到的結(jié)果與樣式的設(shè)置有關(guān)栓撞，可能會得到auto遍膜，也可能是“10px”之類的字符串；而height()的到的是元素在頁面的實際高度瓤湘，不帶單位
在CSS-DOM的操作中瓢颅，關(guān)于元素定位有以下幾個經(jīng)常使用的方法
- offset()方法：它的作用是獲取元素在當(dāng)前視窗的相對位移，其中返回的對象包含兩個屬性弛说，即top和left惜索。它只對可見的元素有效。
var offset = $('p').offset();
var left = offset.left; //獲取左偏移量
var top = offset.top; //獲取右偏移量
- position()方法：它的作用是獲取元素相對于最近一個position屬性設(shè)置為relative或absolute的祖先元素的相對位移剃浇，其中返回的對象包含兩個屬性巾兆，即top和left。
- scrollTop()和scrollLeft()方法：它的作用是獲取元素的滾動條距頂端和距左端的距離虎囚。
