search

博客列表 >jQuery - DOM 操作与过滤器

jQuery - DOM 操作与过滤器

晴天
晴天原创
2020年05月29日 16:28:55886浏览

jQuery - DOM 操作与过滤器

1. getter 与 setter 操作

  • css(): 针对 html 元素的 style 属性进行操作
  • val() 获取表单元素的值
  • 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.     <title>Document</title>
  7.     <script src="jquery-3.5.1.js"></script>
  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>
  73.   </body>
  74.   <script>
  75.     var cl = console.log.bind(console);
  76.     //    css(): 针对 html元素的style属性进行操作
  77.     // 不仅可以获取到style属性的值,还可以获取到该元素所有样式
  78.     var form = $("form");
  79.     // getter  获取
  80.     // 拿到form宽度
  81.     cl(form.css("width")); // 400px
  82.     // 拿到form边框
  83.     cl(form.css("border")); //1px solid rgb(170, 170, 170)
  85.     // setter  修改
  86.     // 修改;border
  87.     form.css("border", "5px solid blue");
  88.     cl(form.css("border")); //5px solid rgb(0, 0, 255)
  89.     // 修改多个值传对象字面量
  90.     form.css({
  91.       border: "5px solid red",
  92.       color: "blue",
  93.     });
  95.     // 一个简单小案例 随机背景色 css 第二个值传回调函数
  96.     form.css("background-color", function () {
  97.       // 由背景颜色组成一个数组
  98.       var bgc = ["red", "blue", "lightpink", "wheat"];
  99.       // 取随机数
  100.       //   Math.floor 向下取整 Math.random() 取0-1随机数
  101.       var rad = Math.floor(Math.random() * bgc.length);
  102.       return bgc[rad];
  103.     });
  105.     // val() 获取表单元素的值
  106.     // 拿到email的值
  107.     cl($("#email").val()); //leture999@php.cn
  108.     // 修改email值
  109.     $("#email").val("123@123.123");
  111.     cl($("#email").val()); // 123@123.123
  113.     // 拿到单选框的值
  114.     cl($("input:radio[name=save]:checked").val());
  116.     // 支持回调
  117.     $("#email").val(function () {
  118.       // 返回一下默认值
  119.       return this.defaultValue;
  120.     });
  121.     cl($("#email").val());
  123.     // html(可以加标签或者文本)  text(只能加纯文本 标签会原样输出) : 元素内容操作
  124.     // text ===》 innertext
  125.     //  修改一下h2的值
  126.     $("h2").text("注册"); //注册
  128.     // html ===》 innerHTML
  129.     $("h2").html("<span style = 'color:blue'>请登录i</span>");
  131.     var cl = console.log.bind(console);
  132.     var form = document.forms.item(0);
  133.     // 获取元素相对于浏览器视窗的位置;
  134.     var donRect = form.getBoundingClientRect();
  135.     cl(donRect);
  136.     // 上间距
  137.     cl(donRect.top);
  138.     // 左间距
  139.     cl(donRect.left);
  141.     // jQuery完成
  142.     var position = $("form").offset();
  143.     cl(position);
  145.     // 获取滚动条位置
  146.     // 先把窗口调宽点
  147.     // $("html").css("width", "2000px");
  148.     // $(document).on("scroll", function () {
  149.     //   cl($(document).scrollLeft());
  150.     // });
  152.     // 自定义数据属性
  153.     // form 加个data值
  154.     $("form").data("desc", "login");
  155.     // 查询有没有
  156.     cl($("form").data("desc")); //login
  157.     // 删除
  158.     $("form").removeData("desc");
  159.     // 查询有没有
  160.     cl($("form").data("desc")); //undefined
  161.   </script>
  162. </html>

2. DOM 操作

  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="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.   //   插入 p 标签
  20.   $("body").append("<ol>");
  21.   //    子元素.appendTo(父元素)
  22.   $("<li>").text("php中文网").appendTo("ol");
  23.   //   加class
  24.   $("<li>").addClass("active").text("中文php").appendTo("ol");
  25.   //   加属性
  26.   $("<li>", {
  27.     id: "php",
  28.     style: "background-color:red",
  29.   })
  30.     .text("hello word")
  31.     .appendTo("ol");
  32. </script>

  1. //   append(callback)
  2. $("ol").append(function () {
  3.   var res = [];
  4.   //   添加多个商品
  5.   for (var i = 0; i < 5; i++) {
  6.     res += "<li>商品" + i + "</li>";
  7.   }
  8.   return res;
  9. });

  1. //    before(), 在某个元素之前添加
  2. // 在第三个前面添加
  3. $("ol > li:nth-of-type(3)").before("<li>新商品1</li>");
  4. //   insertAfter() 在某个元素之后添加
  5. //   在第四个后面;
  6. $("<li>新商品2</li>").insertAfter("ol > li:nth-of-type(4)");
  7. //   将新元素插入到头部 prependTo(),prepend()
  8. $("<li>最欣赏商品</li>").prependTo("ol");
  9. $("ol").prepend("<li>最最最新商品</li>");

  1. //   替换元素  replaceWith()    replaceAll()
  2. // 将第一个li换掉
  3. $("ol > li:first-of-type").replaceWith("<h2>hello php</h2>");
  5. // 将最后一个 换掉
  6. $("<h2>php中文网</h2>").replaceAll("ol > li:last-of-type");

3.常用过滤器

  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="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. </html>
  31. <script>
  32.   var cl = console.log.bind(console);
  34.   // filter()
  35.   // 获取first列表
  36.   // 普通操作
  37.   cl($("ul#first"));
  38.   //   过滤器
  39.   cl($("ul").filter("#first"));
  41.   //   children
  42.   var ul1 = $("ul").filter("#first");
  43.   cl(ul1.children());
  44.   var children = ul1.children();
  45.   //   修改第一个背景
  46.   children.first().css("background", "red");
  47.   //   最后一个
  48.   children.last().css("background", "red");
  49.   //   任何一个
  50.   children.eq(3).css("background", "red");
  52.   //   children()只限子元素
  53.   // find() 所有层级元素
  54.   ul1.find(".red").css("color", "red");
  55.   cl(ul1.find(".red"));
  56.   //   slice()
  57.   // 仅获取item2中的23
  58.   $("ul#second").children().slice(1, 3).css("color", "red");
  59.   //   用css选择器 获取234
  60.   $("ul#second > li:nth-of-type(-n+4):not(:first-of-type)").css(
  61.     "color",
  62.     "blue"
  63.   );
  64. </script>

4. 总结

熟练使用css选择器完全可以忽略掉过滤器

上一条：跨域请求CORS与JSONP下一条：酱茄开源资讯WordPress微信小程序又迎来更新
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多