jQuery的DOM操作筆記

時間：2023-03-29 19:10:41 jQuery Mobile 我要投稿

相關(guān)推薦

jQuery的DOM操作筆記

　　一.節(jié)點(diǎn)的操作

jQuery的DOM操作筆記

　　1.查找節(jié)點(diǎn)：

　　var $var_1=$("htmltype"); //這句話就是獲取所有htmltype節(jié)點(diǎn)

　　如：var $ul_1=$("ul");

　　2.創(chuàng)建并追加節(jié)點(diǎn)：

　　var $var_1=$("");//這句話是創(chuàng)建一個節(jié)點(diǎn)

　　$("htmltype2").append($var_1); //這句話是把節(jié)點(diǎn)插入所有htmltype2節(jié)點(diǎn)中

　　例子：var $li_1=$("

香蕉
");

　　$("ul").append($li_1);

　　其中插入方法有以下幾種：

　　append() 把B追加到A內(nèi)部（所有的A元素，以下類似） appendTo() 把A追加到B內(nèi)部 prepend() 把B追加到A內(nèi)部的內(nèi)容前 prependTo() 把A追加到B的內(nèi)容前 after() 在A后追加B After() 在A前追加B before() 在A前追加B Before()在A后追加B

　　例子：$("ul").append("

你好
");//在ul內(nèi)部追加li

　　$("

你好
").appendTo("ul");//在ul內(nèi)部追加li

　　3.刪除節(jié)點(diǎn)

　　remove() 刪除該元素 empty() 清空節(jié)點(diǎn)，包括后代節(jié)點(diǎn)

　　例子：$("ul li:eq[1]").remove(); //獲取ul中的第二個li并刪除

　　$("ul li").remove(“l(fā)i[title="菠蘿"]”);//刪除ul中l(wèi)i元素屬性title="菠蘿"的元素

　　4.復(fù)制節(jié)點(diǎn)

　　clone();//復(fù)制本節(jié)點(diǎn)

　　例子：$("ul li:eq[1]").clone().appenTo("ul");//復(fù)制并追加到ul中，只復(fù)制是不會顯示出來的

　　5.替換節(jié)點(diǎn)

　　replaceWith();//將B替換所有A replaceAll();//將A替換所有B

　　6.包裹節(jié)點(diǎn)

　　warpAll();//用B包裹A warpInner();//用B包裹A的內(nèi)容

　　二.屬性操作

　　1.獲取和設(shè)置屬性

　　var $var_1=$("p");//這句話是獲取節(jié)點(diǎn)P

　　var $p_1=$var_1.attr("title");//獲取節(jié)點(diǎn)P的title屬性

　　var $p_2=$var_1.attr("title","你好");//設(shè)置節(jié)點(diǎn)P的title屬性為"你好"

　　2.刪除屬性

　　$("p").removeAttr("title");//刪除節(jié)點(diǎn)P的Title屬性

　　三.樣式操作

　　1.獲取和設(shè)置樣式

　　var $var_class=$("p").attr("class");//獲取節(jié)點(diǎn)P的class屬性

　　$("p").attr("class","class1");設(shè)置節(jié)點(diǎn)P的class屬性為樣式表類class1

　　2.追加樣式

　　addClass() 添加樣式到A

　　例子：$("p").addClass("another");添加樣式表類another類到P

　　3.移除樣式

　　removeClass() 移除類

　　4.切換樣式

　　toggleClass() 切換clss屬性類為新的類

　　5.判斷某個樣式是否存在

　　hasClass()

　　四.內(nèi)容的操作

　　html() 該方法獲取html元素的內(nèi)容，如：var var1=$("p").html();//獲取P元素內(nèi)的內(nèi)容 text() 獲取或設(shè)置某個html元素的內(nèi)容 val() 獲取元素的Value值 children() 獲取html元素的所有子節(jié)點(diǎn) next()獲取html元素后緊鄰的同輩節(jié)點(diǎn) prev() 獲取html元素前緊鄰的同輩節(jié)點(diǎn) siblings() 獲取html元素前后緊鄰的同輩節(jié)點(diǎn)

　　五.CSS-DOM技術(shù)

　　css("屬性"，"值") 設(shè)置元素css某個屬性的值，如：$("p").css("color","red");//設(shè)置P的css屬性{color:red;}

【jQuery的DOM操作筆記】相關(guān)文章：

JQuery EasyUI教程06-20

我學(xué)習(xí)jquery的經(jīng)驗(yàn)06-21