search

博客列表 >js学习：第20章 DOM操作与过滤器

js学习：第20章 DOM操作与过滤器

王小飞
王小飞原创
2020年05月30日 16:39:391323浏览

1. attr(): html属性进行操作

  1. attr(name):　 getter 查询
  2. attr(name, value):　setter 设置

attr(name):　 getter 查询的代码与效果：

attr(name, value):　setter 设置的代码与效果：

2. css(): 针对 html元素的style属性进行操作

不仅可以获取到style属性的值,还可以获取到该元素所有样式并修改

动态设置，每次访问都会显示不同的背景

3. val():表单元素的值

4. html()/text(): 元素内容操作

课程代码：

  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.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>基本的getter/setter-1</title>
  8.     <style>
  9.       body {
  10.         display: flex;
  11.         flex-direction: column;
  12.         align-items: center;
  13.         color: #666;
  14.       }
  16.       form {
  17.         width: 400px;
  18.         /* height: 150px; */
  19.         padding: 20px 10px;
  20.         border: 1px solid #aaa;
  21.         box-shadow: 0 0 5px #888;
  22.         box-sizing: border-box;
  23.         background-color: #eee;
  24.         display: grid;
  25.         grid-template-columns: 80px 200px;
  26.         gap: 10px;
  27.         place-content: center center;
  28.       }
  30.       button {
  31.         grid-column: 2 / 3;
  32.         height: 26px;
  33.       }
  35.       button:hover {
  36.         color: white;
  37.         background-color: #888;
  38.         border: none;
  39.         cursor: pointer;
  40.       }
  42.       .red {
  43.         color: red;
  44.       }
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <h2 class="red">用户登录</h2>
  49.     <form action="handle.php" method="POST">
  50.       <label for="email">Email:</label>
  51.       <input
  52.         type="email"
  53.         name="email"
  54.         id="email"
  55.         autofocus
  56.         value="leture999@php.cn"
  57.       />
  58.       <label for="password">Password:</label>
  59.       <input type="password" name="password" id="password" value="不少于6位" />
  60.       <label for="confirm">记住我:</label>
  61.       <div>
  62.         <input type="radio" name="save" id="confirm" value="1" checked /><label
  63.           for="confirm"
  64.           >保存</label
  65.         >
  66.         <input type="radio" name="save" id="cancel" value="0" /><label
  67.           for="cancel"
  68.           >放弃</label
  69.         >
  70.       </div>
  71.       <button>登录</button>
  72.     </form>
  74.     <script>
  75.       var cl = console.log.bind(console);
  76.       var form = $("form");
  77.       // 1. attr(): html属性进行操作
  78.       // attr(name):　 getter 查询
  79.       // cl(form.attr("action"));
  81.       // attr(name, value):　setter 设置
  82.       // form.attr("action", "beixiugai/wenjian.php");
  83.       // cl(form.attr("action"));
  84.       // form.attr({
  85.       //   action: "selec.php?id=4",
  86.       //   method: "post",
  87.       // });
  89.       // form.attr("action", function () {
  90.       // 动态设置处理脚本, 如果是get, query.php?id=1,如果非get, register.php
  91.       //   var method = $(this).attr("method").toLowerCase();
  92.       //   return method === "get" ? "query.php?id=1" : "register.php";
  93.       // });
  95.       // 2. css(): 针对 html元素的style属性进行操作
  96.       // 不仅可以获取到style属性的值,还可以获取到该元素所有样式
  97.       // cl(window.getComputedStyle(document.querySelector("form")).width);
  98.       // cl(form.css("width"));
  99.       // cl(form.css("border"));
  100.       // form.css("border", "3px solid green");
  101.       // form.css({
  102.       //   backgroundColor: "wheat",
  103.       //   border: "5px dashed blue",
  104.       // });
  106.       // form.css("background-color", function () {
  107.       // 这是一有四个颜色值的数组, 目标是从这个数组中随机返回一个值
  108.       // var bgcolor = ["plum", "lightblue", "tan", "lime"];
  109.       // 返回哪个值, 由一个随机索引决定, 索引必须在0 -3 之间
  110.       //   var randomIndex = Math.floor(Math.random() * bgcolor.length);
  111.       //   return bgcolor[randomIndex];
  112.       // });
  114.       // 3. val():表单元素的值
  115.       // cl($("#email").val());
  116.       // $("#email").val("xinzhi@php.cn");
  117.       // cl($("#email").val());
  118.       // 获取选中按钮的值
  119.       // cl($("input:radio[name=save]:checked").val());
  120.       // 回调
  121.       // $("#email").val(function () {
  122.       //   return this.defaultValue;
  123.       // });
  125.       // 4. html()/text(): 元素内容操作
  126.       // innerText ===> text();
  127.       document.querySelector("h2").innerText = "请登录";
  128.       $("h2").text("赶紧登录");
  129.       // innerHTML ===>　html()
  130.       // document.querySelector("h2").innerHTML =
  131.       //   '<span style="color:blue">请登录</span>';
  132.       // $("h2").html('<span style="color:green">请登录</span>');
  133.       // $("h2").html("请登录");
  134.     </script>
  135.   </body>
  136. </html>

2.dom操作

插入操作

append(callback) 插入一个列表

选择目标位置插入：

课程代码：

  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.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>DOM</title>
  8.     <style>
  9.       .active {
  10.         color: red;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body></body>
  15. </html>
  16. <script>
  17.   var cl = console.log.bind(console);
  18.   // 1. 元素的插入与替换, 父元素.append(子元素)
  19.   $("body").append("<ol>");
  20.   // 子元素.appendTo(父元素)
  21.   $("<li>").text("笔记本电脑").appendTo("ol");
  22.   $("<li>").addClass("active").text("智能手机").appendTo("ol");
  24.   $("<li>", {
  25.     id: "hello",
  26.     style: "background-color:yellow",
  27.   })
  28.     .html("<a href=''>格子衫</a>")
  29.     .appendTo("ol");
  31.   // append(callback);
  32.   $("ol").append(function () {
  33.     var res = "";
  34.     for (var i = 0; i < 5; i++) {
  35.       res += "<li><a href=''>最新商品" + (i + 1) + "</a></li>";
  36.     }
  37.     return res;
  38.   });
  39.   // 从第3个元素前面添加<li>, before(), 在某个元素之前添加
  40.   $("ol > li:nth-of-type(3)").before("<li>我是从第3个元素前面添加新元素</li>");
  41.   // insertAfter();
  42.   $("<li>我是从第5个元素后面添加新元素2</li>").insertAfter(
  43.     "ol > li:nth-of-type(4)"
  44.   );
  45.   // prepend(), prependTo(), 将新元素插入到头部
  46.   $("<li>最新留言</li>").prependTo("ol");
  48.   // 元素的换: replaceWith()
  49.   $("ol > li:last-of-type").replaceWith("<h3>Hello PHP.CN</h3>");
  50.   $("<p>Hello World...</p>").replaceAll("ol > li:first-of-type");
  51. </script>

过滤器

课程代码：

  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.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>常用过滤器</title>
  8.   </head>
  9.   <body>
  10.     <ul id="first">
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <ul>
  14.         <li>item1</li>
  15.         <li class="red">item2</li>
  16.         <li>item3</li>
  17.       </ul>
  18.       <li>item3</li>
  19.       <li>item4</li>
  20.       <li>item5</li>
  21.     </ul>
  22.     <ul id="second">
  23.       <li>item1</li>
  24.       <li>item2</li>
  25.       <li>item3</li>
  26.       <li>item4</li>
  27.       <li>item5</li>
  28.     </ul>
  29.   </body>
  30.   <script>
  31.     var cl = console.log.bind(console);
  32.     // cl($("ul#first"));
  33.     // cl($("ul").filter("#first"));
  35.     // children
  36.     var ul1 = $("ul").filter("#first");
  37.     cl(ul1.children());
  38.     var children = ul1.children();
  39.     // first():第一个
  40.     children.first().css("background", "lightblue");
  41.     // last(): 最后一个
  42.     children.last().css("background", "lightblue");
  43.     // eq(n): 返回任何一个
  44.     children.eq(2).css("background", "lightgreen");
  46.     // children()只限子元素
  47.     ul1.children(".red").css("color", "red");
  48.     // find(): 所有层级在查询
  49.     ul1.find(".red").css("color", "red");
  50.     cl(ul1.find(".red"));
  52.     // 仅获取第2个和第3个子元素
  53.     $("ul").filter("#second").children().slice(1, 3).css("color", "red");
  54.     $("ul#second >li:nth-of-type(-n+3):not(li:first-of-type)").css(
  55.       "color",
  56.       "red"
  57.     );
  58.   </script>
  59. </html>

总结：学习了查询操作，插入操作，和过滤器

上一条：js学习：第21章 事件与Ajax实战、无刷分页下一条：2020-05-30——ES6 函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多