这篇博客详细介绍了jQuery的DOM元素操作，包括创建、添加、删除、复制、替换和包裹节点的方法，以及DOM元素的属性和文本操作。jQuery通过选择器简化了DOM操作，提供如append、prepend、clone、replaceWith等便捷的API。
jQuery的DOM操作：创建节点、添加节点、删除节点、复制节点、替换节点和包裹节点。也就是对文档中的元素节点、属性节点和文本节点进行增删改查，只不过在原生JS基础上进行封装和增加了许多方法，所以能够更方便的操作DOM。
获取元素节点
jQuery获取DOM元素是使用选择器，至于选择器的使用这里就不介绍了，请戳jQuery选择器总结。 如果有时候为了提高运行效率，可以先用原生JS获取元素节点，之后再转成jQuery对象进行操作也是可行的。
创建DOM节点
jQuery创建DOM节点是通过传入一个HTML格式字符串给构造函数，jQuery会返回包含该元素的jQuery对象。 传入的HTML格式需带有闭合标签或完整标签名。 这种创建节点形式是动态创建的，也可以将别的jQuery对象传入进来，相当于克隆。
$("<div/>") //无子元素或文本内容,写成闭合标签
$("<div></div>") //完整格式，可嵌套子元素或文本
//不加斜杠非闭合标签，会被解析成如下方式
$("<div>") == $( document.createElement("div") )
$("div") //直接写元素名，相当于元素选择器，无效...
$("<p>我是段落</p>") //HTML内容，嵌套文本
$("<p></p>").text("传入字符串内容"); //灵活一点，动态设置文本
//方法连写
$("<div><ul><li></li></ul></div>")
.appendTo($('body')) //添加进body元素中，这里返回的依然是原jQuery对象。
.find("li").text("OK"); //后代元素中找<li>元素，设置它们的文本内容
jQuery创建节点支持HTML内容，所以无需创建多个元素节点。在上面实例中，还使用了jQuery方法的连写方式：链式操作方式。
链式操作方式
对发生在同一个jQuery对象上的一组动作，可以直接连接而无须重复获取对象。 //链式操作
$("div p").text("一段话").css("color", "red");
$("div").append( $("<button>按钮</button>").css("color", "red") );
添加节点
- append() : 给选取元素的内部尾部添加内容(元素、innerHTML、文本)。
- prepend()： 给选取元素的内部开头处添加内容(元素、innerHTML、文本)。
- appendTo() ： 把选取元素添加到指定DOM元素内部的结尾处，和上面append()是一样的。
- prependTo()： 给选取元素的内部开头处添加内容(元素、innerHTML、文本)。
操作同级节点
- before() ： 在选取元素之前添加内容。
- after()： 在选取元素之后添加内容。
- insertBefore()：将选取元素插入到指定元素前面。
- insertAfter()： 将选取元素插入到指定元素之后。
$("body").append("<div/>"); //给<body>元素尾部添加一个div元素
$("body").append("<p>一段话</p>"); //等同于append( $("<p>一段话<p>") )
$("body p").append("作为文本节点"); //给<body>中的所有<p>元素的尾部添加文本节点
//appendTo() 将什么添加到什么的尾部位置
$("<h1>可以</h1>").appendTo("body");
$("<p>一段小文本</p>").appendTo("body");
//prepend() 给div元素中的头部位置添加如下元素
$("div").prepend("<p>第二位</p>");
$("div").prepend("<p>第一位</p>");
//prependTo() 将什么添加到什么的头部位置
$("<button>按钮1</button>").prependTo("span");
$("body").append("<div id='abc'>我是div#abc</div>");
//在id为abc的div元素前面，添加如下元素
$("div#abc").before("<p>在div前面</p>");
//在id为abc的div元素后面，添加如下元素
$("div#abc").after("<h5>在div后面</h5>");
//把如下创建的元素 添加到id为abc的div元素之前
$("<p/>").text("insertBefore").insertBefore("div#abc");
//把如下创建的元素 添加到id为abc的div元素之后
$("<div/>").text("insertAfter").insertAfter("div#abc");
删除节点
- remove( [selector] ) ： 移除所有匹配的元素， 可根据可选的selector来筛选元素。
- remove()移除元素后，会返回被移除的jQuery对象，可以写成链式操作。可以将该元素移动到其他元素中，相当于appendTo()。
- empty() : 删除所有的后代元素，相当于清空节点。
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<script>
//选取<ul>中所有<li>元素，对它们进行移除操作
$("ul li").remove();
//移除选取的<ul>元素
$("ul").remove();
//移除选取的<li>元素中第一个<li>元素
$("ul li").remove(":eq(0)"); //$("ul li:eq(0)").remove();
//find()查找后代元素，移除index > 3的<li>元素
$("ul").find("li").remove(":gt(3)");
//将移除的第一个<li>元素 插入到最后一个<li>元素的后面
$("ul li:first").remove().insertAfter("ul li:last");
//选取所有的li元素，然后清空它们的后代所有节点。所有<li>文本值都会清空
$("ul li").empty();
//移除ul中所有元素
$("ul").empty();
//使用html("")来完成此效果, 相当于innerHTML = "";
$("ul li").html(""); $("ul").html("");
</script> 复制节点
- clone()：创建调用该方法的jQuery对象副本（即选取的元素副本），然后返回该对象，完成复制。
<div id="div_1" style="width:80px; height:50px; font-size: 15px; background-color: pink;">
点一下复制一下
</div>
<script>
//单击该<div>元素，会复制一份，然后被<body>元素添加到尾部
$("#div_1").on("click", function(){
$("body").append( $("#div_1").clone() );
});
</script>
替换节点
- $(selector).replaceWith(content) : content是DOM元素 或者是 HTML代码。
- $(content).replaceAll(selector)： 将内容替换匹配到的所有元素。
<p>1</p>
<p>2</p>
<script>
//选取所有<p>元素，用如下HTML代码来替换
$("p").replaceWith("<h6>替换掉P标签</h6>");
//创建div元素，用于代替所有的<h6>元素
$("</div>").replaceAll("h6"); //使用闭合标签形式替换相应元素后，也会消失，即不存在。
$("<div></div>").replaceAll("h6"); //标签元素会存在。
包裹节点
当需要对文档中某些DOM元素插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。使用起来就像动态代理一样，不会影响原始代码，使用时才会做相关操作。
- wrap() ： 把匹配的元素用指定的元素或HTML内容包裹起来。
- wrapAll()：所有的匹配元素都只用一个元素来包裹。即只有一个父元素。
- wrapInner()：把匹配元素的内部(子元素、文本)用其他结构化的标记包裹起来。
<span>span标签</span>
<p>P1</p>
<p>P2</p>
<h5>H5标签</h5>
<div>
<p>内部p1</p>
<p>内部p2</p>
<p>内部p3</p>
</div>
<script>
//把选取的<span>元素 用指定HTML代码包裹起来
$("span").wrap("<div>wrap测试:</div>");
//把所有<p>元素都包裹到一个<div>元素中
$("p").wrapAll("<div id='all_wrap'></div>");
//选取<h5>元素， 内部内容被如下的HTML内容包裹起来
$("h5").wrapInner("<span style='color:red;'>wrapInner：</span>");
</script>
wrapAll() 会把所有的匹配元素都聚集在一起，如果匹配的元素处于其他元素中，会被移除，然后转移。所以上面<div>元素中的<p>元素都被移除了。
DOM元素的属性操作
attr()：设置或者获取相关属性， 相当于综合了setAttribute()和getAttribute()用法。
语法：$(selector).attr("key", "value")、$(selector).attr("key")
removeAttr()：删除指定属性。
语法：$(selector).attr("attrName")
<div id="d1">123456</div>
<p id="d1">一段文本</p>
<script>
//设置style属性和class属性
$("#d1").attr("style", "color:red;");
$("#d1").attr("class", "test");
//获取style属性的值
$("#d1").attr("style");
//删除class属性
$("#d1").removeAttr("class");批量设置属性
//使用json对象来作为属性参数，批量设置属性
$(selector).attr({
key : value,
key : value,
...
});DOM元素的文本操作
- html()：获取和设置匹配元素的HTML内容，相当于innerHTML。
- text()：获取和设置匹配元素的文本内容，相当于innerText。
- val()：获取和设置匹配元素的value值，一般用于表单元素。
<div>
<p id="p1">第一段文本</p>
<div>
<p>内部文本1</p>
<p>内部文本2</p>
</div>
</div>
<input type="button" value="简单按钮"/>
<script>
//获取id=p1的元素中的HTML内容
$("#p1").html();
//设置id=p1的元素中由如下内容来填充。
$("#p1").html("<strong>strong文本<strong>");
//获取第一个<div>元素中所有文本内容
var $allText = $("div:eq(0)").text();
console.log($allText);
//选取第二个<div>元素中的<p>元素，设置相关文本
$("div:eq(1) p").text("设置一下文本内容咯");
//选取type = button 的<input>元素的value
$(":button").val();
$(":button").val("设置按钮值");
扫一扫
48
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
