jQuery的DOM操作

一，前言

本篇文章包含如何使用jQuery来操作DOM对象：

第一部分关于class的操作:addClass(),removeClass(),toggleClass(),hasClass()方法；

第二部分关于操作元素对象的属性：innerHTML,value,attribution等；

第三部分关于操作元素关系：wrap,wrapAll,unwrap,wrapInner来调控元素父子级关系；

第四部分关于插入元素功能：append(),prepend()方法；

第五部分关于添加元素siblings：before(),after()方法；

第六部分关于元素移除：empty(),remove()方法；

最后一部分关于DOM对象的替换：replaceAll(),replaceWith()方法。

二，DOM操作

（1）Class操作

addClass: 为匹配的DOM对象添加一个或多个class（空格隔开）
removeClass: 为匹配的DOM对象移除一个或多个class
toggleClass: 跟开关一样，如果没有classA就添加，如果有就移除
hasClass: 是否有这个class呢？返回true/false

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
  }
</style>

<body>
  <div style="height: 200px;" id="root"></div>
  <button id="btn1">添加样式</button>
  <button id="btn2">删除样式</button>
  <button id="btn3">反转</button>
  <script>
    $("#btn1").on("click", function () {
      $("#root").addClass("container");
    })
    $("#btn2").on("click", function () {
      $("#root").removeClass("container");
    })
    $("#btn3").on("click", function () {
      $("#root").toggleClass("container");
    })
    console.log($("#root").hasClass("container"));


  </script>
</body>

</html>

（2）DOM属性

html: 获取匹配的DOM对象的innerHTML内容
val: 获取input标签的内容
attr: 获取匹配的DOM对象的属性
removeAttr: 移除匹配的DOM对象的属性

！以上的获取方法都可以用来设置对应的内容，不填参数为获取，填参数为设置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
  }
</style>

<body>
  <div style="height: 200px;" id="root"></div>
  <button id="btn1">显示文字</button>
  <input type="text">
  <script>
    $("#root").html("<a href='www.baidu.com'>百度</a>");//为div添加一个百度链接
    $("#btn1").on("click", function () {
      $("input").val("11111123");
    })//点击按钮为input表单填入内容
    $("#root").attr("id");//查询root的id==root
    $("input").attr({
      name: "username",
      title: "haha"
    })//添加属性的时候可以用对象赋值，也可以一对一
    $("input").attr("style", "height:100px");
    $("").removeAttr("attrname");//同理移除属性


  </script>
</body>

</html>

（3）元素关系

wrap: 为匹配的DOM对象包裹一个html对象
unwrap: 给匹配的DOM对象的父级删除，保留DOM对象的位置
wrapAll: 在所有匹配的DOM对象包裹一个html对象
wrapInner: 为匹配的DOM对象的内容添加一层结构

! wrap()方法和wrapAll()方法有何区别呢？

wrap方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
  }
</style>

<body>
  <div id="root"></div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <script>
    $("p").wrap("<div></div>")


  </script>
</body>

</html>

wrap方法遇到复数匹配的DOM对象后会为每个匹配对象包裹一个div

wrapAll()方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
  }
</style>

<body>
  <div id="root"></div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <script>
    $("p").wrapAll("<div></div>")


  </script>
</body>

</html>

使用wrapAll()方法则是为匹配的DOM对象共同包裹一个大的div

unwrap()方法就是wrap的逆，wrapInner也一道讲了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
  }
</style>

<body>
  <div id="root">
    <ul></ul>
  </div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <script>
    $("ul").unwrap();
    $("p").wrapInner("<b></b>");//为每个p标签添加<b></b>


  </script>
</body>

</html>

我们发现ul元素外部的div已经不见了，每个p标签都已经加粗了。

（4）元素后代插入

append: 在匹配的DOM对象的末尾添加元素（内部）
prepend: 在匹配的DOM对象的前面添加元素（内部）

！何以理解内部：append/prepend都是在匹配元素内部添加，换言之，添加的元素是匹配元素的子级，如果没有标签，就以text节点为标准，亦是没有，append与prepend效果一致。为什么要理解内部概念呢，因为before(),after()方法就是对于匹配元素的同级前后添加html元素的。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
  }
</style>

<body>
  <div id="root">
    <ul></ul>
  </div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <script>
    $("p").append("<div>hello</div>");
    $("p").prepend("<div>hello</div>");



  </script>
</body>

</html>

（5）元素同级插入

after: 在匹配的每一个DOM对象之后添加标签作为兄弟节点
before: 在匹配的每一个DOM对象之前添加标签作为兄弟节点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
    height: 100px;
  }
</style>

<body>
  <div id="root">
    <ul></ul>
  </div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <script>
    $("p").before("<div class='container'></div>")


  </script>
</body>

</html>

after()方法效果和before()差不多，只是顺序上的差别。

（6）元素移除

empty: 从DOM中移除集合中匹配元素的所有子节点
remove: 从DOM中移除集合中匹配元素的所有子节点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
    height: 100px;
  }
</style>

<body>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <p id="content">hello</p>
  <script>
    $("div").empty()//删除所有子节点，不包括匹配的DOM对象
    $("#content").remove()//本身也被删除

  </script>
</body>

</html>

（7）元素替换

replaceAll: 用集合的匹配元素替换每个目标元素
replaceWith: 用提供的内容替换集合中所有匹配的元素

! replaceAll有点反人类，replaceWith比较符合正常的逻辑顺序：replaceAll是用$(content).replaceAll(label)中的content取代所有label

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
    height: 100px;
  }
</style>

<body>
  <p id="content">hello</p>
  <li>hahaha</li>
  <script>
    $("<b>world<b>").replaceAll("p");
    $("li").replaceWith("<b>替换文本<b>");
  </script>
</body>

</html>

三，结语

本篇文章操作的对象都是DOM，属性操作，添加html用的比较多。需要注意的是wrap,wrapAll方法的区别，这可能会导致选区产生错误。append与after,prepend与before的区别是子级与同级的区别。创作不易，鼓励一下~