1、DOM：Document Object Model 文檔對象模型

2、DOM的分類：DOM Core,HTML DOM,CSS DOM

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

    var $li_1= $("<li title='香蕉'>香蕉</li>");

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

 

4、插入節(jié)點

  <1>append()  內(nèi)部追加內(nèi)容

  <2>appendTo()   append（）的反操作

  <3>prepend()   內(nèi)部前置內(nèi)容

  <4>prependTo()    prepend()的反操作

   <5>after()         外部追加內(nèi)容

   <6>insertAfter()   after的反操作

     <7>before()   外部前置內(nèi)容

     <8>insertBefore()    before的反操作

 5、刪除節(jié)點

   remove()   刪除節(jié)點

   empty()    清空節(jié)點內(nèi)容

6、復制節(jié)點

 clone()

 

7、替換節(jié)點

replaceWith()

replaceAll（）————replacewith()的反操作

 

8、包裹節(jié)點

wrap()  ——例 $("strong").wrap("<b></b>")

wrapAll()

wrapInner————標簽內(nèi)容包裹

 

9、屬性操作

【1】獲取屬性

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

【2】設置屬性

$para.attr("title","yourtitle")              單個

$para.attr({"title":"yourtitle","name":"test"})             多個

【3】刪除屬性

$("p").removeAttr("title");

 

10、樣式操作

【1】獲取class

 var p_class=$("p").attr("class");

【2】設置class

$("p").attr("class","high");

【3】追加class

$("p").addClass("another");

【4】移除樣式

$("p").removeClass("high");   移除單個樣式

$("p").removeClass("high anther");  移除多個樣式

【5】切換樣式

toggleClass() 類名存在則刪除，不存在則添加

【6】判斷樣式是否存在

$("p").hasClass("anther")   等價于 $("p").is(".anther")

 

11、設置與獲取HTML

【1】html():獲取，設置

【2】text()：獲取，設置

【3】val()：獲取，設置 ，選中下拉列表、多選框、單選框

 

12、遍歷節(jié)點

【1】children() 取子元素 （不包括后代元素）

【2】next()    取后面緊鄰的同輩元素

【3】prev()   取前面緊鄰的同輩元素

【4】siblings() 取前后所有同輩元素

【5】closet()  取最近的匹配元素

 

13、CSS-DOM操作

【1】獲得樣式

var color= $("p").css("color");

【2】設置單個樣式

$("p").css("color","red");

【3】設置多個樣式

$("p").css({"fontSize":"30px","backgroundColor":"#888"});

 

作者：Tony zhao 歡迎訪問:找與淘網(wǎng)

本文出處：http://www.rzrgm.cn/ytaozhao    本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權(quán)利。