search

博客列表 >jQuery DOM操作相关知识

jQuery DOM操作相关知识

longlong
longlong原创
2020年08月20日 13:26:09596浏览

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>
  • 添加到末尾效果：

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

  • 删除元素效果：

  • 替换元素效果：

上一条：新媒体形势下的平面设计，姊芙用创意引领行业趋势下一条：获取页面元素的5种方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多