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节点的多个属性值

样式操作

方法	描述	实例
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

作者：静默虚空
欢迎任何形式的转载，但请务必注明出处。
限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。