jQuery学习笔记之DOM操作

一、查找节点

1.1 查找元素节点

jQuery选择器

1.2 查找属性节点

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

二、创建节点

2.1 创建元素节点

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

2.2插入节点的方法

2.2.1 append()

向每个匹配的元素内部追加内容
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

2.2.2 appendTo()

将所有匹配的元素追加到指定的元素中
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

2.2.3 prepend()

向每个匹配的元素内部前置内容
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

2.2.4 prependTo()

将所有匹配的元素前置到指定的元素中
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

2.2.5 after()

在每个匹配元素之后插入内容
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

2.2.6 insertAfter()

将所有匹配的元素插入到指定的元素之后
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

2.2.7 before()

在每个匹配元素之 前插入内容
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

2.2.8 insertBefore()

将所有匹配的元素插入到指定的元素之前
HTML代码：

<p>我想说：</p>

jQuery代码：

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

结果：

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

三、删除节点

3.1 remove()

从Dom中删除所有匹配元素

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

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

3.2 detach()

从Dom中去掉所有匹配元素，但这个方法不会把匹配的元素从jQuery中删除，可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件/附加的数据等都会保留下来。

$("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()

将所有匹配的元素都替换成指定的HTML或DOM元素

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

5.2 replaceAll()

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

六、包裹节点

将某个节点用其他标记包裹起来

6.1wrap()

html代码

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

jQuery代码

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

结果

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

6.2 wrapAll()

将所有匹配的元素用一个元素来包裹
html代码

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

jQuery代码

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

结果

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

6.3 wrapInner()

将所有匹配的元素用一个元素来包裹
html代码

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

jQuery代码

 $("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");

注意：
如果有多个class设置了同一个样式属性，则后者覆盖前者。

attr()和addClass()的区别
对同一个网页网页元素操作：<p>test</p>

方法	addClass()	attr()
用途	追加样式	设置样式
第一次使用方法	$("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 切换样式

HTML代码

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

jQuery代码

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

当点击切换样式按钮时，HTML代码变为

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

再次点击切换样式按钮时，HTML代码变回原来的

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

8.6 判断是否含有某个样式

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

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

9.1 html()方法

读取或设置某个元素中的HTML内容
获取HTML

$("#mytest").html()

设置HTML

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

注意：html()方法可以用于XHTML文档，不能用XML文档

9.2 text()方法

读取或设置某个元素中的文本内容

$("#mytest").text()

注意：text()方法对HTML文档和XML文档都有效

9.3 val()方法

设置和获取元素的值
表单操作

十、遍历节点

10.1 children()方法

用于取得匹配元素的子元素的集合

$("body").children()

注意：children()方法只考虑子元素而不考虑其他后代元素

10.2 next()方法

用于取得匹配元素后面紧邻的同辈元素

$("#form1").next()

10.3 prev()方法

用于取得匹配元素前面紧邻的同辈元素

$("#form1").prev()

10.4 siblings()方法

用于取得匹配元素前后所有的同辈元素

$("#form1").siblings()

10.5 closest()方法

用于取得最近的匹配元素
首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上查找直到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery。

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

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

的区别

方法	描述	区别
parent()	获得集合中每个匹配元素的父级元素	从指定类型的直接父节点开始查找。返回一个元素节点
parents()	获得集合中每个匹配元素的祖先元素	与parent()类似。不同：当它找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点。
closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配到的祖先元素	查找是从包含本身的节点找起，只返回匹配的第一个元素节点