Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery DOM操作相关知识
Blogger Information
Blog 60
fans 5
comment 3
visits 65306
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery DOM操作相关知识
longlong
Original
595 people have browsed it

1. jQuery DOM操作

1.1 css() 方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JQ css()方法</title>
  7.     <style>
  8.       p {
  9.         color: red;
  10.         width: 200px;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <p>我是一个段落</p>
  16.     <script src="../jquery/jquery-3.5.1.min.js"></script>
  17.     <script>
  18.       // 1. 只有一个参数时，表示获取元素的样式
  19.       console.log($("p").css("color"));
  20.       console.log($("p").css("width"));
  22.       // 2. 有两个参数时，表示设置元素样式
  23.       $("p").css("background", "yellow");
  25.       // 3. 支持同时设置多个样式
  26.       $("p").css({
  27.         background: "green",
  28.         "font-size": "2rem",
  29.       });
  31.       // 4. 第二个参数支持回调
  32.       $("p").css("background", function () {
  33.         var bgc = ["lightgreen", "lightyellow", "lightblue"];
  34.         return bgc[Math.floor(Math.random() * 4)];
  35.       });
  36.     </script>
  37.   </body>
  38. </html>

1.2 val() 方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JQ val()方法</title>
  7.   </head>
  8.   <body>
  9.     <form action="">
  10.       <input type="text" name="demo" value="demo" />
  11.       <div>
  12.         <button>点我获取value值</button>
  13.         <button>点我设置value值</button>
  14.         <button>点我得到默认值</button>
  15.       </div>
  16.     </form>
  17.     <script src="../jquery/jquery-3.5.1.min.js"></script>
  18.     <script>
  19.       // 1. 获取value值
  20.       $("button:first-of-type").click(function (ev) {
  21.         ev.preventDefault();
  22.         $("<p>").text($("input").val()).appendTo("body");
  23.       });
  24.       // 2. 设置value值
  25.       $("button:nth-of-type(2)").click(function (ev) {
  26.         ev.preventDefault();
  27.         $("input").val("我被更新了");
  28.       });
  29.       // 3. 获取默认value值
  30.       $("button:last-of-type").click(function (ev) {
  31.         ev.preventDefault();
  32.         $("input").val(function () {
  33.           return this.defaultValue;
  34.         });
  35.       });
  36.     </script>
  37.   </body>
  38. </html>

1.3 text() 和 html() 方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>JQ text()和html()方法</title>
  7.   </head>
  8.   <body>
  9.     <h3>测试文本</h3>
  10.     <button>点我获取文本内容</button>
  11.     <button>点我设置文本内容</button>
  12.     <button>点我修改文本内容与颜色</button>
  13.     <button>点我动态改变内容</button>
  14.     <script src="../jquery/jquery-3.5.1.min.js"></script>
  15.     <script>
  16.       // 1. 获取文本内容
  17.       $("button:first-of-type").click(function () {
  18.         console.log($("h3").text());
  19.         console.log($("h3").html());
  20.       });
  22.       // 2. 设置文本内容
  23.       $("button:nth-of-type(2)").click(function () {
  24.         $("h3").text("我被更新了");
  25.         $("h3").html("我被更新了");
  26.       });
  28.       // 3. text()与html()的区别：都可以设置或获取文本内容，但html()可以识别html标签
  29.       $("button:nth-of-type(3)").click(function () {
  30.         $("h3").html("<h1>我又被更新了</h1>").css("color", "red");
  31.       });
  33.       // 4. 两种方法都支持回调
  34.       $("button:last-of-type").click(function () {
  35.         $("h3").text(function () {
  36.           var arr = ["你是风，我是雨", "你是天，我是地"];
  37.           var random = Math.floor(Math.random() * 2);
  38.           return arr[random];
  39.         });
  40.       });
  41.     </script>
  42.   </body>
  43. </html>

1.4 获取元素位置信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>获取元素位置信息</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       div {
  14.         background-color: lightblue;
  15.         width: 300px;
  16.         margin: 50px 60px;
  17.         position: relative;
  18.       }
  19.       p {
  20.         background-color: lightcoral;
  21.         width: 100px;
  22.         height: 30px;
  23.         margin: 10px 0;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div>
  29.       <p>位置一</p>
  30.       <p>位置二</p>
  31.     </div>
  32.     <script src="../jquery/jquery-3.5.1.min.js"></script>
  33.     <script>
  34.       // 1. 查看元素的偏移量,相对于文档  ----> offset()
  35.       //   console.log($("div").offset());
  36.       //   console.log($("div").offset().top);
  37.       //   console.log($("div").offset().left);
  38.       //   console.log($("p:last-of-type").offset());
  40.       // 2. 查看元素的位置，相对于父元素 ----> position()
  41.       //   console.log($("p:last-of-type").position());
  42.       //   console.log($("p:first-of-type").position());
  44.       // 3. 查看元素自身的高宽 ----> outerHeght()、outerWidth()
  45.       //   console.log($("p:last-of-type").outerHeight());
  46.       //   console.log($("p:last-of-type").outerWidth());
  48.       // 4. 返回第一个定位的祖先元素
  49.       //   console.log($("p:last-of-type").offsetParent());
  51.       // 5. 设置元素的高度 ----> height()
  52.       $("p:first-of-type").height(60);
  53.       $("p:first-of-type").height("60px");
  54.     </script>
  55.   </body>
  56. </html>

1.5 元素的添加、删除与替换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>元素的添加与删除</title>
  7.     <style>
  8.       .color {
  9.         color: red;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <script src="../jquery/jquery-3.5.1.min.js"></script>
  15.     <script>
  16.       // 1. 添加元素到末尾
  17.       // 1.1 父元素.append(子元素)
  18.       $("body").append("<h3>我的列表</h3>");
  19.       $("body").append("<ol>");
  20.       // 1.2 同时添加多个子元素（支持回调）
  21.       $("ol").append(function () {
  22.         var lis = "";
  23.         for (var i = 1; i < 5; i++) {
  24.           lis += "<li>商品" + i + "</li>";
  25.         }
  26.         return lis;
  27.       });
  29.       // 1.3 子元素.appendTo(父元素)
  30.       $("<li>").text("服装").appendTo("ol");
  31.       // 1.4 添加元素的同时添加属性和样式
  32.       $("<li>", {
  33.         id: "hello",
  34.         style: "background:yellow",
  35.       })
  36.         .addClass("color")
  37.         .text("显示器")
  38.         .appendTo("ol");
  40.       $("<li>", {
  41.         id: "world",
  42.         style: "background:green",
  43.       })
  44.         .html('<a href="">百货</a>')
  45.         .appendTo("ol");
  47.       // 2. 添加元素到指定的位置
  48.       // 2.1 指定元素.before(要插入的元素)
  49.       $("li#hello").before("<li>我将添加到‘显示器’前面</li>");
  50.       // 2.2 要插入的元素.insertBefor(指定元素)
  51.       $("<li>我将添加到‘百货’前面</li>").insertBefore("li#world");
  52.       // 2.3 指定元素.after(要插入的元素)
  53.       $("li#hello").after("<li>我将添加到‘显示器’后面</li>");
  54.       // 2.4 要插入的元素.insertAfter(指定元素)
  55.       $("<li>我将添加到‘百货’后面</li>").insertAfter("li#world");
  57.       // 3. 添加元素到开头
  58.       // 3.1 父元素.prepend(子元素)
  59.       $("ol").prepend("<li>我将添加到开头</li>");
  60.       // 3.2 子元素.prependTo(父元素)
  61.       $("<li>我也添加到开头</li>").addClass("color").prependTo("ol");
  63.       // 4. 删除元素 remove()
  64.       $("li:nth-of-type(6)").remove();
  66.       // 5. 替换元素
  67.       // 5.1 指定元素.replaceWith(新元素)
  68.       $("li:nth-of-type(5)").replaceWith(
  69.         '<li style="color:purple">新商品3</li>'
  70.       );
  71.       // 5.2 replaceWith() 支持回调
  72.       $("li").replaceWith(function (index) {
  73.         return "<li>已替换" + (index + 1) + "</li>";
  74.       });
  75.       // 5.3 新元素.replaceAll(指定元素)
  76.       $("<p>再次替换完成</p>").replaceAll("li:first-of-type");
  77.       $("<p>再次替换完成</p>").replaceAll("li");
  78.     </script>
  79.   </body>
  80. </html>
  • 添加到末尾效果：

  • 添加元素到指定位置效果：

  • 删除元素效果：

  • 替换元素效果：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：动图是亮点, 直观,加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post