首页 前端知识 jQuery的DOM操作

jQuery的DOM操作

2024-08-18 00:08:21 前端知识 前端哥 450 511 我要收藏

一,前言

本篇文章包含如何使用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的区别是子级与同级的区别。创作不易,鼓励一下~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15962.html
标签
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!