jQuery的DOM操作

ma_no_lo

于 2024-08-16 08:18:10 发布

阅读量1.9k

点赞数 50

分类专栏： Python全栈开发文章标签： jquery 前端 javascript html css

本文链接：https://blog.youkuaiyun.com/ma_no_lo/article/details/141232165

版权

一，前言

本篇文章包含如何使用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属性

最低0.47元/天解锁文章