search

博客列表 >jQuery常用getter / setter方法、DOM操作和过滤器

jQuery常用getter / setter方法、DOM操作和过滤器

赵大叔
赵大叔原创
2020年05月29日 12:12:15779浏览

jQuery常用getter / setter方法

1. attr()

对html属性进行操作

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.     <title>常用getter / setter方法</title>
  6.     <script src="lib/jQuery_v3.5.1.js"></script>
  7.     <style>
  8.         body {display: flex;flex-direction: column;align-items: center;}
  9.         form {width: 400px;padding: 20px 10px;border: 1px solid #aaa;
  10.             box-shadow: 0 0 5px #888;box-sizing: border-box;background-color: skyblue;
  11.             display: grid;grid-template-columns: 80px 200px;gap: 10px;place-content: center center;}
  12.         form > div{display: grid;grid-template-columns: repeat(2,1fr);}
  13.         button {grid-column: 2 / 3;height: 26px;}
  14.         button:hover {color: white;background-color: red;border: none;cursor: pointer;}
  15.         .red {color: red;}
  16.     </style>
  17. </head>
  18. <body>
  19. <h3>用户登录</h3>
  20. <form action="handel.php" method="POST">
  21.     <label for="username">用户名：</label>
  22.     <input type="text" id="username" value="phongthithuy">
  23.     <label for="password">密码：</label>
  24.     <input type="password" id="password">
  25.     <label for="confirm">记住密码:</label>
  26.     <div>
  27.         <section>
  28.             <label for="confirm">记住</label>
  29.             <input type="radio" name="save" id="confirm" value="1" checked />
  30.         </section>
  31.         <section>
  32.             <label for="cancel">不记住</label>
  33.             <input type="radio" name="save" id="cancel" value="0" />
  34.         </section>
  35.     </div>
  36.     <button>登录</button>
  37. </form>
  38. </body>
  39. <script>
  40. // 1. attr(): 对`html属性`进行操作
  41. // attr(name): 获取html属性
  42. var form = $('form');
  43. console.log(form.attr('action'));
  44. console.log(form.attr('method'));
  46. // attr(name, value): 设置html属性
  47. form.attr({
  48.     action: "selec.php?id=1 ",
  49.     method: "get",
  50. });
  51. console.log(form.attr('action'));
  52. console.log(form.attr('method'));
  54. // attr(name, fuction): 设置html属性
  55. form.attr("action", function () {
  56.     // 动态设置处理脚本, 如果是post, handel.php?id=1,如果非post, register.php
  57.     var method = $(this).attr("method").toLowerCase();
  58.     // console.log(method);
  59.     return method === "post" ? "handel.php?id=1" : "register.php";
  60. });
  61. console.log(form.attr('action'));
  63. // 2. css(): 针对 `html元素的style属性`进行操作
  64. // 不仅可以获取到style属性的值,还可以获取到该元素所有样式
  65. // 获取
  66. console.log(form.css("width"));
  67. console.log(form.css("border"));
  69. // 设置
  70. form.css("border", "2px solid green");
  71. form.css({
  72.     backgroundColor: "blue",
  73.     border: "1px dashed yellow",
  74. });
  76. // css("backgroundColor", function)
  77. form.css("backgroundColor", function () {
  78.     // 这是一有四个颜色值的数组, 目标是从这个数组中随机返回一个值
  79.     var bgcolor = ["plum", "lightblue", "tan", "lime"];
  80.     // 返回哪个值, 由一个随机索引决定, 索引必须在0 -3 之间
  81.     var randomIndex = Math.floor(Math.random() * bgcolor.length);
  82.     return bgcolor[randomIndex];
  83. });
  85. // 3. val(): 表单元素的值
  86. // 获取表单的值
  87. console.log($("#username").val());
  88. // 设置表单的值
  89. $("#username").val("zhaodashu");
  90. console.log($("#username").val());
  91. // 获取选中按钮的值
  92. console.log($("input:radio[name=save]:checked").val());
  93. // 回调
  94. $("#username").val(function () {
  95.     return this.defaultValue;
  96. });
  98. // 4. html() / text(): 对元素内容操作
  99. // text()相当于innerText
  100. $("h3").text("请登录");
  102. // html()相当于innerHTML
  103. $("h3").html('<span style="color:red">赶紧登录</span>');
  104. // $("h3").html("赶紧登录");
  106. </script>
  107. </html>
  1. <script>
  2.     var form = $('form');
  3.     var position = $(form).offset();
  4.     console.log(position);
  5.     console.log(position.top);
  6.     console.log(position.left);
  7.     position.top += 80;
  8.     console.log(position.top);
  10.     // 获取滚动条的位置
  11.     document.documentElement.style.width = "2000px";
  12.     $(document).on("scroll", function () {
  13.         console.log($(document).scrollLeft());
  14.     });
  16.     // 自定义数据属性
  17.     $(form).data("desc", "login-form");
  18.     console.log($(form).data("desc"));
  19.     $(form).removeData("desc");
  20.     console.log($(form).data("desc"));
  21. </script>

演示效果图：

jQuery DOM操作

  • 1.子元素.appendTo(父元素)：将子元素插入到父元素
  • 2.append(function)：通过回调，插入多个元素
  • 3.before()：在某个元素之前添加
  • 4.insertAfter()：在某个元素之后添加
  • 5.prependTo()：将新元素插入到头部
  • 6.replaceWith()：元素的替换:

代码演示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用 DOM 操作</title>
  6.     <script src="lib/jQuery_v3.5.1.js"></script>
  7.     <style>
  8.         .active{color: deepskyblue;}
  9.     </style>
  10. </head>
  11. <body>
  13. </body>
  14. <script>
  15.     // 1. 元素的插入与替换, 父元素.append(子元素)
  16.     $("body").append("<ol>");
  18.     // 子元素.appendTo(父元素)
  19.     $("<li>").text("总经理办公窒").appendTo("ol");
  20.     $("<li>").addClass("active").text("行政部").appendTo("ol");
  22.     $("<li>", {
  23.         id: "xinchao",
  24.         style: "background-color: skyblue",
  25.     }).html("<a href=''>财务部</a>").appendTo("ol");
  27.     // append(function)
  28.     $("ol").append(function () {
  29.         var res = "";
  30.         for (var i = 0; i < 6; i++) {
  31.             res += "<li><a href=''>" + (i + 1) + " 分厂</a></li>";
  32.         }
  33.         return res;
  34.     });
  36.     // before(), 在某个元素之前添加
  37.     $("ol > li:nth-of-type(3)").before("<li>人力资源部</li>");
  39.     // insertAfter()：在某个元素之后添加
  40.     $("<li>进出口部</li>").insertAfter("ol > li:nth-of-type(4)");
  42.     // prepend(), prependTo(), 将新元素插入到头部
  43.     $("<li>生产部</li>").prependTo("ol");
  45.     // 元素的替换: replaceWith()
  46.     $("ol > li:last-of-type").replaceWith("<h3>六分厂</h3>");
  48.     $("<h3>BO SAN XUAT</h3>").replaceAll("ol > li:first-of-type");
  49. </script>
  50. </html>

演示效果图

jQuery过滤器：缩小选择范围

  • filter：过滤，缩小选择范围
  • children：所有子元素
  • children.first():第一个
  • children.last(): 最后一个
  • children.eq(n): 返回任何一个
  • find(): 所有层级在查询

代码演示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用过滤器</title>
  6.     <script src="lib/jQuery_v3.5.1.js"></script>
  7. </head>
  8. <body>
  9. <ul id="mot">
  10.     <li>1</li>
  11.     <li>2</li>
  12.     <ul>
  13.         <li>1</li>
  14.         <li class="red">2</li>
  15.         <li>3</li>
  16.     </ul>
  17.     <li>3</li>
  18.     <li>4</li>
  19.     <li>5</li>
  20. </ul>
  21. <ul id="hai">
  22.     <li>1</li>
  23.     <li>2</li>
  24.     <li>3</li>
  25.     <li>4</li>
  26.     <li>5</li>
  27. </ul>
  29. </body>
  30. <script>
  31.     // 过滤
  32.     console.log($("ul").filter("#mot"));
  34.     // children：子元素
  35.     console.log($("ul").filter("#mot"));
  37.     // first():第一个
  38.     var ul2 = $("ul").filter("#hai");
  39.     var children = ul2.children();
  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.     // find(): 所有层级在查询
  47.     var ul1 = $("ul").filter("#mot");
  48.     ul1.find(".red").css("color", "red");
  49.     console.log(ul1.find(".red"));
  51.     // 仅获取第2个和第3个子元素
  52.     // $("ul").filter("#second").children().slice(1, 3).css("color", "red");
  53.     $("ul#hai >li:nth-of-type(-n+3):not(li:first-of-type)").css(
  54.         "color",
  55.         "red"
  56.     );
  58. </script>
  59. </html>

演示效果图

总结

时间过的很快，这段时间主要学到很多学习思想，比自己像无头苍蝇乱撞，强了很多很多。
通过这段时间的学习，老实说真记住的不多，但是至少知道了，什么时候该用什么，这个很重要，然后就可以去看手册，查百度了。

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

相关文章

查看更多