《锋利的JQuery》读书笔记(二)

三、JQuery的DOM操作

1、DOM：Document Object Model 文档对象模型

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

3、创建节点：

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

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

 

4、插入节点

  <1>append()  内部追加内容

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

  <3>prepend()   内部前置内容

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

   <5>after()         外部追加内容

   <6>insertAfter()   after的反操作

     <7>before()   外部前置内容

     <8>insertBefore()    before的反操作

 5、删除节点

   remove()   删除节点

   empty()    清空节点内容

6、复制节点

 clone()

 

7、替换节点

replaceWith()

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

 

8、包裹节点

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

wrapAll()

wrapInner————标签内容包裹

 

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、遍历节点

【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"});