jQuery學習總結(jié)之DOM操作篇

在jQuery中,主要的DOM操作分為以下幾類:

jQuery中的DOM操作.png

一、查找節(jié)點

1、查找元素節(jié)點

var $li = $("ul li:eq(1)");
var li_txt = $li.text();
alert(li_txt);

2、查找屬性節(jié)點
利用jQuery選擇器找到需要的元素之后,就可以使用attr()方法來獲取它的各種屬性的值。attr()方法的參數(shù)可以是一個,也可以是兩個。當參數(shù)是一個時,則是要查詢的屬性的名字,例如:

var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);

二、創(chuàng)建節(jié)點

1、創(chuàng)建元素節(jié)點

var $li_1 = $("<li></li>");
$("ul").append($li_1);

2、創(chuàng)建文本節(jié)點

var $li_1 = $("<li>蘋果</li>");
$("ul").append($li_1);

3、創(chuàng)建屬性節(jié)點

var $li_1 = $("<li title="蘋果">蘋果</li>");
$("ul").append($li_1);

三、插入節(jié)點

插入節(jié)點.png

四、刪除節(jié)點

1、remove()方法

$("ul li:eq(1)").remove();

當某個節(jié)點用remove()方法刪除后,該節(jié)點所包含的所有后代節(jié)點將同時被刪除。這個方法的返回值是一個指向已被刪除的節(jié)點的引用,因此可以在以后再使用這些元素。
另外remove()方法也可以傳遞參數(shù)來選擇性地刪除元素,如下:

$("ul li").remove("li[title!=蘋果]");

2、detach()方法
detach()和remove()一樣,也是從DOM中去掉所有匹配的元素。但需要注意的是,這個方法不會把匹配的元素從jquery對象中刪除,因而可以在將來再使用這些匹配的元素。與remove()不同的是,所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。
3、empty()方法
嚴格來說,empty()方法并不是刪除節(jié)點,而是清空節(jié)點,它能清空元素中的所有后代節(jié)點。


五、復制節(jié)點

復制節(jié)點用到的方法是clone(),如下:

$("ul li").click(function(){
 $(this).clone().appendTo("ul");
});

該方法還可以接受一個參數(shù),true,它的含義是復制元素的同時復制元素中所綁定的事件。


六、替換節(jié)點

1、replaceWith()方法是將所有匹配的元素都替換成指定的HTML或者DOM元素。
2、replaceAll()方法的作用于replaceWith()方法一樣,只是順序顛倒了
3、需要注意的是,如果在替換之前,已經(jīng)為元素綁定事件,替換后原先綁定的事件將會與被替換的元素一一消失,需要在新元素上重新綁定事件。


七、包裹節(jié)點

1、wrapAll()方法會將所有匹配的元素用一個元素來包裹,它不同于wrap(),wrap()方法是將所有的元素進行單獨的包裹。

<strong></strong>
<strong></strong>

使用wrap()方法包裹strong元素,代碼如下

$("strong").wrap("<b></b>");

得到的結(jié)果如下

<b><strong></strong></b>
<b><strong></strong></b>

而是用wrapAll()方法包裹strong元素,代碼如下

$("strong").wrapAll("<b></b>");

得到的結(jié)果如下

<b>
<strong></strong>
<strong></strong>
</b>

2、wrapInner()方法將每一個匹配的元素的子內(nèi)容(包括文本節(jié)點)用其他結(jié)構(gòu)化的標記包裹起來。

$("strong").wrapInner("<b></b>");

得到的結(jié)果如下

<strong title="蘋果"><b>蘋果</b></stong>

八、屬性操作

1、獲取屬性和設(shè)置屬性
想要獲取元素的屬性,只需要給attr()方法傳遞一個參數(shù),即屬性名稱即可。
如果要設(shè)置元素的屬性,也可以使用同一個方法,不同的是,要傳遞兩個參數(shù),即屬性名稱和對應的值。

$("p").attr("title","you title");

jQuery中的很多方法都是同一個函數(shù)實現(xiàn)獲取和設(shè)置的,類似的還有html()、text()、height()、width()、val()和css()等方法
2、刪除屬性
在某些情況下,需要刪除文檔中某個元素的特定屬性,可以使用removeAttr()方法來完成該任務。


九、樣式操作

1、獲取樣式和設(shè)置樣式
使用attr("class","class name"方法來獲取和設(shè)置樣式。
2、追加樣式
使用addClass("class name")方法來追加樣式。
在CSS中有一下兩條規(guī)則:
(1)如果給一個元素添加了多個class值,那么就相當于合并了它們的樣 式。
(2)如果有不同的class設(shè)定了同一樣式屬性,則厚澤會覆蓋前者。
3、移除樣式
可以使用removeClass("class name")方法來移除樣式
4、切換樣式
5、判斷是否含有某個樣式的方法是hasClass()


十、設(shè)置和獲取HTML、文本和值

1、html()方法
此方法類似于javascript中的InnerHTML屬性,可以用來獲取或者設(shè)置某個元素中的HTML內(nèi)容。
2、text()方法
此方法類似于javascript中的innerText屬性,用來讀取或者設(shè)置某個元素中的文本內(nèi)容
3、val()方法
此方法類似于javascript中的value屬性,用來獲取或者設(shè)置元素的值


十一、遍歷節(jié)點

1、children()方法
用于取得匹配元素的子元素集合
2、next()方法
用于取得匹配元素后面緊鄰的同輩元素
3、prev()方法
用于取得匹配元素前面緊鄰的同輩元素
4、siblings()方法
用于取得匹配元素前后所有的同輩元素
5、closest()
該方法用于取得最近的匹配元素。首先檢查當前元素是否匹配,如果匹配就直接返回。如果不匹配則向上查找父元素,逐級向上直到找到匹配選擇器的元素。

$(document).bind("click",function(e){
$(e.target).closest(".li").css("color","red");
});

6、parent()、parents()和closest()的區(qū)別
parent()獲得集合中每個匹配元素的父級元素。
parents()獲得集合中每個匹配元素的祖先元素。
closest()從元素本身開始,逐級向上級元素匹配,并返回最先匹配的祖先元素


十二、CSS-DOM操作

可以直接利用css()獲取和設(shè)置元素的樣式屬性
1、offset()方法是獲取元素在當前視窗的相對偏移,其中返回的對象包含兩個屬性,即top和left,它只對可見元素有效。
2、position()方法獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點的相對偏移,與offset()一樣,它返回的對象也有兩個屬性,即top和left。
3、scrollTop()方法和scrollLeft()方法
這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側(cè)的距離。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,699評論 19 139
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,683評論 0 44
  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 941評論 0 8
  • DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲取DOM節(jié)點,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,076評論 0 9
  • 前夜的東方小巴黎,雪花飄落 像天使降臨人間,一片祥和 明日的天空,會是藍色的吧 惡魔般的霾,會逃之夭夭吧 冰城的百...
    閨中風暖閱讀 750評論 34 19

友情鏈接更多精彩內(nèi)容