一.節(jié)點的操作

1.查找節(jié)點：

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

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

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

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

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

例子：var $li_1=$("<li  title="title1">香蕉</li>");

         $("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
• insertAfter() 在A前追加B
• before() 在A前追加B
• insertBefore()在A后追加B

例子：$("ul").append("<li>你好</li>");//在ul內(nèi)部追加li

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

3.刪除節(jié)點

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

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

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

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

• clone();//復(fù)制本節(jié)點

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

5.替換節(jié)點

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

6.包裹節(jié)點

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

二.屬性操作

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

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

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

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

2.刪除屬性

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

三.樣式操作

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

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

$("p").attr("class","class1");設(shè)置節(jié)點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é)點
• next()  獲取html元素后緊鄰的同輩節(jié)點
• prev() 獲取html元素前緊鄰的同輩節(jié)點
• siblings() 獲取html元素前后緊鄰的同輩節(jié)點 

五.CSS-DOM技術(shù)

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

最新評論