jQuery学习笔记之DOM操作

一、查找节点

1.1 查找元素节点

1.2 查找属性节点

$("p").attr("title"); //获取<p>元素节点属性title

二、创建节点

2.1 创建元素节点

$("#myid").append($("<span>我是插入的</span>"));

2.2插入节点的方法

2.2.1 append()

<p>我想说：</p>

$("p").append("<b>你好</b>")

<p>我想说：<b>你好</b></p>

2.2.2 appendTo()

<p>我想说：</p>

$("<b>你好</b>").appendTO("p")

<p>我想说：<b>你好</b></p>

2.2.3 prepend()

<p>我想说：</p>

$("p").prepend("<b>你好</b>")

<p><b>你好</b>我想说：</p>

2.2.4 prependTo()

<p>我想说：</p>

$("<b>你好</b>").prependTo("p")

<p><b>你好</b>我想说：</p>

2.2.5 after()

<p>我想说：</p>

$("p").after("<b>你好</b>")

<p>我想说：</p><b>你好</b>

2.2.6 insertAfter()

<p>我想说：</p>

$("<b>你好</b>").insertAfter("p")

<p>我想说：</p><b>你好</b>

2.2.7 before()

<p>我想说：</p>

$("p").before("<b>你好</b>")

<b>你好</b><p>我想说：</p>

2.2.8 insertBefore()

<p>我想说：</p>

$("<b>你好</b>").insertBefore("p")

<b>你好</b><p>我想说：</p>

三、删除节点

3.1 remove()

$("div a:first").remove();

$("div a").remove("a[title=jjj]");

3.2 detach()

$("div a:first").detach();

3.3 empty()

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

四、复制节点

$("ul li:first").clone().appendTo("ul");

$("ul li:first").clone(true).appendTo("ul");

五、替换节点

5.1 replaceWith()

$("ul li:first").replaceWith("<li>被替换啦</li>")

5.2 replaceAll()

$("<li>被替换啦2h奥</li>").replaceAll("ul li");

六、包裹节点

6.1wrap()

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

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

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

6.2 wrapAll()

<strong>1111111111111</strong>
<p>2222</p>
<strong>1111111111111</strong>

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

<b>
<strong>1111111111111</strong>
<strong>1111111111111</strong>
</b>
<p>2222</p>

6.3 wrapInner()

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

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

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

七、属性操作

7.1 获取属性

$("#aaa").attr("href")

7.2 设置属性

$("#aaa").attr("title","jjjj");

7.3 删除属性

$("#aaa").removeAttr("href");

八、样式操作

8.1 获取样式

$("#mytest").attr("class")

8.2 设置样式

$("#mytest").attr("class","mytest2");

8.3 追加样式

$("#mytest").addClass("mytest3");

<p>test</p>

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

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

<p class="high">test</p>

<p class="high">test</p>

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

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

<p class="high another">test</p>

<p class="another">test</p>

8.4 移除样式

$("#high").removeClass("high");

8.5 切换样式

<p class="mytest" id="mytest">hello world</p>

$("#mytest").toggleClass("another");

<p class="mytest another" id="mytest">hello world</p>

<p class="mytest" id="mytest">hello world</p>

8.6 判断是否含有某个样式

$("#mytest").hasClass("mytest")

九、设置和获取HTML、文本和值

9.1 html()方法

$("#mytest").html()

$("#mytest").html("<a>dsadsdaddssssssssssssssssssssssssssssssssssss</a>");

9.2 text()方法

$("#mytest").text()

9.3 val()方法

十、遍历节点

10.1 children()方法

$("body").children()

10.2 next()方法

$("#form1").next()

10.3 prev()方法

$("#form1").prev()

10.4 siblings()方法

$("#form1").siblings()

10.5 closest()方法

$("ul").closest("li").css("background-color", "green");

10.6 parent(),parents()与closest()