jQuery DOM操作
目录
对节点的操作
查找节点
查找节点可以直接利用jQuery选择器来完成，非常便利。
插入节点
jQuery提供了8种插入节点的方法。
| 序号 | 方法 | 描述 | 实例 |
| 1 | append() | 向每个匹配的元素内部追加内容。 | HTML Code: <p>我想说：</p> jQuery Code: $("p").append("<b>你好</b>"); result: <p>我想说："<b>你好</b></p> |
| 2 | appendTo() | 将所有匹配的元素追加到指定的元素中。 | HTML Code: <p>我想说：</p> jQuery Code: $("<b>你好</b>").appendTo("p"); result: <p>我想说："<b>你好</b></p> |
| 3 | prepend() | 向每个匹配的元素内部前置内容。 | HTML Code: <p>我想说：</p> jQuery Code: $("p").prepend("<b>你好</b>"); result: <p><b>你好</b>我想说：</p> |
| 4 | prependTo() | 将所有匹配的元素前置到指定的元素中。 | HTML Code: <p>我想说：</p> jQuery Code: $("<b>你好</b>").prependTo("p"); result: <p><b>你好</b>我想说：</p> |
| 5 | after() | 在每个匹配的元素之后插入内容。 | HTML Code: <p>我想说：</p> jQuery Code: $("p").after("<b>你好</b>"); result: <p>我想说：</p><b>你好</b> |
| 6 | insertAfter() | 将所有匹配的元素插入到指定元素前面。 | HTML Code: <p>我想说：</p> jQuery Code: $("<b>你好</b>").insertAfter("p"); result: <p>我想说：</p><b>你好</b> |
| 7 | before() | 在每个匹配的元素之前插入内容。 | HTML Code: <p>我想说：</p> jQuery Code: $("p").before("<b>你好</b>"); result: <b>你好</b><p>我想说：</p> |
| 8 | insertBefore() | 将所有匹配的元素插入到指定元素前面。 | HTML Code: <p>我想说：</p> jQuery Code: $("<b>你好</b>").insertBefore("p"); result: <b>你好</b><p>我想说：</p> |
删除节点
jQuery提供了三种删除节点的方法，即remove()、detach()、empty()。
（1）remove()
删除DOM中所有匹配的元素，可以传入参数来筛选要删除的元素。
var $li = $("ul li:eq(1)").remove(); // 获取第2个<li>元素节点后，将它删除
$li.appendTo("ul"); // 将刚才删除的节点重新添加到<ul>元素中
$("ul li").remove("li[title!=菠萝]"); //将<li>元素中title属性不等于“菠萝”的<li>元素删除
（2）detach()
detach()也是从DOM中去掉所有匹配的元素。
需要注意的是，这个方法不会将匹配的元素从jQuery对象中删除，其所有绑定的事件和附加数据可以保留下来。
如果将来再使用这个元素，相关事件和数据依然存在。
var $li = $("ul li:eq(1)").detach(); // 获取第2个<li>元素节点后，将它删除
$li.appendTo("ul"); // 重新追加此元素，发现它之前绑定的事件还在。
// 如果使用remove()方法删除元素，那么之前绑定的事件将会失效。
（3）empty()
清空元素中的所有后代节点。
$("ul").empty();
复制节点
可以使用clone()方法来复制节点。如果在clone方法中传人参数true，表示复制元素的同时也复制元素中绑定的事件。
$(this).clone(true).appendTo("body");
替换节点
jQuery提供了replaceWith()和replaceAll()两种方法来替换节点。
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或DOM元素。
而replaceAll()和replaceWith()作用相同，只是颠倒了操作。
$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");
("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");
包裹节点
有时候需要把某个节点用其他标签包裹起来，jQuery有三种方法：wrap()、wrapAll()、wrapInner()。
HTML Code:
<strong title="你好">你好</strong> <strong title="你好">你好</strong>
jQuery Code:
$("strong").wrap("<b></b>"); //用<b>标签把<strong>元素包裹起来
/* 结果是：
<b><strong title="你好">你好</strong></b>
<b><strong title="你好">你好</strong></b>
*/
// wrapAll
$("strong").wrapAll("<b></b>"); //用<b>标签把<strong>元素包裹起来
/* 结果是：
<b>
<strong title="你好">你好</strong>
<strong title="你好">你好</strong>
</b>
*/
// wrapInner
$("strong").wrapInner("<b></b>"); //用<b>标签把<strong>元素包裹起来
/* 结果是：
<strong title="你好"><b>你好</b></strong>
*/
以上操作的范例代码
View Code
属性操作
在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。
var title = $("p").attr("title"); //获取p节点的title属性值
$("p").removeAttr("title"); //删除p节点的title属性值
$("p").attr("title", "New Content"); //设置p节点的title属性值为New Content
$("p").attr({"title" : "New Content", "name" : "New Name",}); // 一次性设置p节点的多个属性值
$("p").removeAttr("title"); //删除p节点的title属性值
$("p").attr("title", "New Content"); //设置p节点的title属性值为New Content
$("p").attr({"title" : "New Content", "name" : "New Name",}); // 一次性设置p节点的多个属性值
样式操作
| 方法 | 描述 | 实例 |
| attr | 获取样式和设置样式 |              获取元素的("p").attr("class");//获取p元素的class("p").attr("class","high"); // 设置p元素的class为high |
| addClass | 追加样式 | $("p").addClass("another"); //给p元素追加“another”类 |
| removeClass | 移除样式 | $("p").removeClass(); //移除p元素的所有class |
| toggleClass | 切换样式 | $("p").toggleClass("another"); //重置切换类名"another" |
| hasClass | 判断是否有某个样式 | $("p").hasClass("another"); //判断p元素是否有"another"类 |
范例代码
View Code
设置和获取HTML、文本和值
| 方法 | 描述 | 实例 |
| html() | 获取和设置某个元素中的HTML内容 | var p_html =   获取元素的    代码("p").html();//获取p元素的HTML代码("p").html("<strong>Hello</strong>"); //设置p元素的HTML代码 |
| text() | 获取和设置某个元素中的文本内容 | var p_txt =   获取元素的文本内容("p").text();//获取p元素的文本内容("p").text("Hello"); //设置p元素的文本内容 |
| val() | 获取和设置某个元素中的值 | var txt_value =   获取元素的值(this).val();//获取this元素的值(this).text("Hello"); //设置this元素的值为Hello |
作者：静默虚空
欢迎任何形式的转载，但请务必注明出处。
限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。
