简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery 获取内容和属性与 DOM 常用操作
Blogger Information
Blog 43
fans 1
comment 0
visits 33809
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 常用操作
蔚蓝世纪
Original
849 people have browsed it

在线预览 变色方块

一、jQuery常用的 getter/setter 操作

jQuery 可以通过以下方法获取内容和属性，并进行参数设置。

  1. attr():对html属性进行操作
  2. css():针对html元素的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="lulu@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 form = $("form");
  76.       console.log(form);
  77.       // 1.attr():对html属性进行操作
  78.       // attr(name):　getter 获取某个参数的属性
  79.       // attr(name, value):　setter 设置某个参数的属性
  80.       console.log(form.attr("action"));
  81.       form.attr("action", "admin/check.php");
  82.       console.log(form.attr("action"));
  83.       form.attr({
  84.         action: "select.php?id=4", //换成对象自变量格式
  85.         method: "post",
  86.       });
  87.       //attr(属性, function()):第二个参数支持回调函数
  88.       form.attr("action", function () {
  89.         // 动态设置处理脚本, 如果是get, 则返回脚本query.php?id=1,如果非get, 则返回脚本register.php
  90.         var method = $(this).attr("method").toLowerCase();
  91.         return method === "get" ? "query.php?id=1" : "register.php";
  92.       });
  94.       // 2.css():针对html元素的style属性进行操作
  95.       //不仅可以获取到style属性的值，还可以获取到该元素所有样式
  96.       //原生方法获取属性
  97.       console.log(
  98.         window.getComputedStyle(document.querySelector("form")).width
  99.       );
  100.       //jQuery方式获取属性更简单
  101.       console.log(form.css("width"));
  102.       form.css("border", "1px solid skyblue");
  103.       form.css({
  104.         backgroundColor: "lightgreen",
  105.         border: "2px dashed blue",
  106.       });
  108.       form.css("background-color", function () {
  109.         //这是一个有四个颜色值的数组，目标是从这个数组中随机返回一个值
  110.         var bgcolor = ["plum", "lightblue", "tan", "lime", "cyan", "pink"];
  111.         // 返回哪个值，由一个随机索引决定，索引必须在0 -3之间
  112.         var randomIndex = Math.floor(Math.random() * bgcolor.length);
  113.         return bgcolor[randomIndex]; //每刷新一次页面,对话框的背景就会发生变化
  114.       });
  116.       // 3. val():获取设置表单元素的值
  117.       console.log($("#email").val());
  118.       $("#email").val("Anna@php.cn");
  119.       console.log($("#email").val());
  120.       // 获取选中的按钮的值
  121.       console.log($("input:radio[name=save]:checked").val()); //这种获取方式较麻烦
  122.       //用回调函数设置回默认值
  123.       $("#email").val(function () {
  124.         return this.defaultValue;
  125.       });
  127.       // 4.html()/text():获取和设置元素内容
  128.       //innerText ===> text();
  129.       //原生方式
  130.       document.querySelector("h2").innterHMTL = "请登录";
  131.       //jQuery方式
  132.       $("h2").text("赶紧登录");
  133.       //innerHTML===>html()
  134.       document.querySelector("h2").innterHMTL =
  135.         '<span style="color:blue">请登录</span>';
  136.       $("h2").html('<span style="color:blue">请登录</span>');
  137.       $("h2").html("请登录");
  138.       //html()可以替换text()方法，但是text()不能替换html()方法
  139.     </script>
  140.   </body>
  141. </html>

输出效果：

二、jQuery常用的DOM操作方法

通过 jQuery，可以很容易地添加新元素或者内容。
添加新内容的四个 jQuery 方法：

  1. append() - 在被选元素的结尾插入内容
  2. prepend() - 在被选元素的开头插入内容
  3. after() - 在被选元素之后插入内容
  4. before() - 在被选元素之前插入内容
  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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.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.   // 1.元素的添加与替换,父级.append(元素)
  18.   $("body").append("<ol>");
  19.   // 将子元素.appendTo添加到父级元素中
  20.   $("<li>").text("apples").appendTo("ol");
  21.   $("<li>").addClass("active").text("oranges").appendTo("ol");
  23.   //添加元素时同时创建元素的属性
  24.   $("<li>", {
  25.     id: "fruits",
  26.     style: "background-color:skyblue",
  27.   })
  28.     .html("<a href=''>peaches</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=''>new goods" + (i + 1) + "</a></li>";
  36.     }
  37.     return res;
  38.   });
  40.   //2.从第3个元素前面添加<li> before(),在某个元素之前添加
  41.   $("ol>li:nth-of-type(3)").before("<li>pears</li>");
  43.   //3.insertAfter()
  44.   $("<li>lemons</li>").insertAfter("ol>li:nth-of-type(4)");
  46.   //4. prepend(),prependTo(),将新元素添加到头部
  47.   $("<li>最新产品</li>").prependTo("ol");
  49.   //5.元素的替换 : replaceWith()
  50.   $("ol>li:last-of-type").replaceWith("<h3>Hello JuJu</h3>");
  51.   $("<p>Hello Mockey...</p>").replaceAll("ol>li:nth-of-type(2)");
  52. </script>

输出效果：

三、jQuery 过滤器

  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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  7.     <title>jQuery常用过滤器</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.   //children
  33.   var ul2 = $("ul").filter("#second");
  34.   console.log(ul2.children()); //查看ul2里面有多少个子元素
  35.   var children = ul2.children();
  37.   //first():第一个
  38.   children.first().css("background", "lightblue");
  40.   //last():最后一个
  41.   children.last().css("background", "lightblue");
  43.   //eq(n):返回任何一个
  44.   children.eq(2).css("background", "lightblue");
  46.   // children()只限子元素
  47.   ul2.children("red").css("color", "red");
  49.   //find():对所有层级查询 效率比较低，但是直观
  50.   ul2.find("red").css("color", "red");
  51.   console.log($("ul").find("red"));
  53.   //仅获取第2个和第3个子元素
  54.   $("ul").filter("#second").children().slice(1, 3).css("color", "red");
  55.   console.log($("ul").filter("#second"));
  57.   //原生方法
  58.   var ul1 = document.querySelectorAll("#first > li:first-of-type");
  59.   ul1.forEach(function (item) {
  60.     item.style.color = "red";
  61.   });
  63.   var ul1 = document.querySelectorAll("#first > li:last-of-type");
  64.   ul1.forEach(function (item) {
  65.     item.style.color = "skyblue";
  66.   });
  68.   var ul1 = document.querySelectorAll("#first > li:nth-of-type(-n+3)");
  69.   ul1.forEach(function (item) {
  70.     item.style.color = "orangered";
  71.   });
  72. </script>

输出效果：

四、总结

1.jQuery 过滤器使用起来更加快捷。
2.实现一种效果的方法有很多种，要多尝试。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：dom操作内容很多, 咱们课上介绍不到三分之一, 更多要查手册
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！