查询元素的属性

1. val

操作数组中DOM对象的value属性。

  • $(选择器).val()：无参数形式调用，读取数组中第一个DOM对象的value属性值。
  • $(选择器).val(值)：有参形式调用，对数组中所有DOM对象的value属性值进行统一赋值。

注意：在数组中有多个对象时，有参形式调用和无参形式调用的对象是不同的。

2. text

操作数组中所有DOM对象的文字显示内容属性。

  • $(选择器).text()：无参形式调用，读取数组中所有DOM对象的文字显示内容，将得到的内容拼接成一个字符串返回。
  • $(选择器).text(值)：有参形式调用，对数组中所有DOM对象的文字显示内容进行统一赋值。

3. attr

对val、text以外的属性进行操作。

  • $(选择器).attr(“属性名”)：获取jQuery数组第一个对象的属性值。
  • $(选择器).attr(“属性名”,”值”)：对数组中所有DOM对象的属性设置为新值。

举个例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
  9.     <style>
  10.         div{
  11.             width: 200px;
  12.             height: 30px;
  13.             line-height: 30px;
  14.             background: rgb(153, 153, 221);
  15.         }
  16.     </style>
  17.     <script>
  18.         $(function(){
  19.             $("#btn1").click(function(){
  20.                 var $obj = $(":text");
  21.                 //val()获取的是DOM数组第一个对象的value属性值
  22.                 alert($obj.val());
  23.             })
  25.             $("#btn2").click(function(){
  26.                 var $obj = $(":text");
  27.                 //设置所有的text的value为新值
  28.                 $obj.val("曹操");
  29.             });
  31.             $("#btn3").click(function(){
  32.                 var $obj = $("div");
  33.                 //获取div，text()无参数获取DOM数组中所有对象的文本值，连接成字符串
  34.                 alert($obj.text());
  35.             });
  37.             $("#btn4").click(function(){
  38.                 var $obj = $("div");
  39.                 //获取div的第一个文本值
  40.                 alert($($obj[0]).text());
  41.             });
  43.             $("#btn5").click(function(){
  44.                 var $obj = $("div");
  45.                 //设置div的新文本值
  46.                 $obj.text("我们都是新的div");
  47.             });
  49.             $("#btn6").click(function(){
  50.                 var $obj = $("#img1");
  51.                 //设置图片的src属性为其他值，如果仅获取值就不需要赋值了
  52.                 $obj.attr("src","../images/03.jpg");
  53.             });
  54.         });
  57.     </script>
  58. </head>
  59. <body>
  60.     <p>文本框val</p>
  61.     <input type="text" value="刘备"/>  <br/>
  62.     <input type="text" value="关羽"/>  <br/>
  63.     <input type="text" value="张飞"/>  <br/>
  64.     <p>文本数据text</p>
  65.     <div>我是第一个div\n</div>
  66.     <div>我是第二个div</div>
  67.     <div>我是第三个div</div>
  68.     <p>图片</p>
  69.     <img src="../images/04.jpg" id="img1" width="200px" height="200px"/> <br/>
  70.     <p>功能按钮</p>
  71.     <button id="btn1">获取第一个文本框的值</button> <br/>
  72.     <button id="btn2">设置所有文本框为新值</button> <br/>
  73.     <button id="btn3">获取div的所有文本</button> <br/>
  74.     <button id="btn4">获取第一个div的文本</button> <br/>
  75.     <button id="btn5">设置div新文本</button> <br/>
  76.     <button id="btn6">设置img图片</button> <br/>
  77. </body>
  78. </html>

元素节点的操作

1. remove

  • $(选择器).remove()：将数组中的所有DOM对象及其子对象一并删除。

2. empty

  • $(选择器).empty()：将数组中所有DOM对象的子对象删除。
  • 注意remove和empty删除的对象是不同的。

3. append

  • 为数组中的所有DOM对象添加子对象。
  • 语法：$(选择器).append("<div>添加子对象</div>")

4. html

  • 设置或返回被选元素的内容，相当于DOM对象中的”innerHTML”。
  • $(选择器).html()：无参形式调用，获取DOM数组第一个匹配元素的内容。
  • $(选择器).html(值)：有参形式调用，用于设置DOM数组中所有元素的内容。
  • html()和text()的区别和innerHTML和innerText的区别是一样的。

5. each

  • $.each是对数组，json和DOM数组等的遍历，对每一个元素调用一次处理函数。
  • $就相当于java中的类名，.each就是类中的静态方法。
  • 语法：
    1. 1. `$.each(遍历对象,function(index,element) {处理程序} )`
    2. 1. `jQuery对象.each(function(index,element) {处理程序} )`
    3. 1. index和element都是自定义的形参，名称自定义。
    4. 1. index为数组的下标，element为数组的对象。

举个例子

1—4方法的使用(each使用方法在下方)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
  9.     <script>
  10.         $(function(){
  11.             $("#btn1").click(function(){
  12.                 //删除select对象本身和其子对象
  13.                 $("select").remove();
  14.             });
  16.             $("#btn2").click(function(){
  17.                 //只删除select对象的子对象
  18.                 $("select").empty();
  19.             });
  21.             $("#btn3").click(function(){
  22.                 //给div标签添加子元素
  23.                 $("#father").append("<select><option>示例</option></select>");
  24.             });
  26.             $("#btn4").click(function(){
  27.                 //获取数组第一个DOM对象的文本值，下面是text和html的区别
  28.                 //alert($($("span")[0]).text()); 我是MySQL数据库
  29.                 alert($("span").html());    //我是MySQL<b>数据库</b>
  30.             });
  32.             $("#btn5").click(function(){
  34.                 $("span").html("这是新的span标签");
  35.             });
  36.         });
  37.     </script>
  38. </head>
  39. <body>
  40.     <select>
  41.         <option value="脑斧">脑斧</option>
  42.         <option value="狮子">狮子</option>
  43.         <option value="豹子">豹子</option>
  44.     </select>
  45.     <br/>
  46.     <select>
  47.         <option value="非洲">非洲</option>
  48.         <option value="美洲">美洲</option>
  49.         <option value="亚洲">亚洲</option>
  50.     </select>
  51.     <br/>
  52.     <div id="father" style="background:red;">我是父div</div>
  53.     <br/>
  54.     <span>我是MySQL<b>数据库</b></span>
  55.     <span>我是jdbc</span>
  56.     <br/>
  57.     <br/>
  58.     <button id="btn1">使用remove删除所有对象</button>
  59.     <button id="btn2">使用empty删除子DOM对象</button>
  60.     <button id="btn3">增加一个子DOM对象</button>
  61.     <button id="btn4">获取文本中带有html标签的内容</button>
  62.     <button id="btn5">设置span的值</button>
  63. </body>
  64. </html>

each语法举例

  1. ...
  2.     <script>
  3.       $(function(){
  4.                 //语法1
  5.                      //循环遍历数组
  6.             $("#btn6").click(function(){
  7.                 var arr = ["a","b","c"];
  8.                 /*  js中循环数组
  9.                 for (var index = 0; index<arr.length; index++){
  10.                     console.log("数组索引：" + index + " -- 数组元素：" + arr[index]);
  11.                 }
  12.                 */
  13.                   //$.each循环数组
  14.                 $.each(arr,function(index,element){
  15.                     console.log("数组索引：" + index + " -- 数组元素：" + element);
  16.                 });
  17.             });
  19.                 //循环遍历JSON
  20.             $("#btn7").click(function(){
  21.                 var json_obj = '{"name":"张三","age":"18"}';
  22.                 json_obj = JSON.parse(json_obj);
  23.                                                   //这里的参数名称可以自定义
  24.                 $.each(json_obj,function(key,value){
  25.                     console.log("key=：" + key + " -- velue=" + value);
  26.                 });
  27.             });
  28.             //循环遍历DOM数组
  29.             $("#btn8").click(function(){
  30.                 var $dom_obj = $(":text");
  31.                 $.each($dom_obj,function(index,element){
  32.                     console.log("DOM数组索引：" + index + " -- 文本框value值：" + $(element).val());
  33.                 });
  34.             });
  36.                 //语法2
  37.             //这个和btn8的效果是相同的，选择使用即可。
  38.             $("#btn9").click(function(){
  39.                 var $dom_obj = $(":text");
  40.                 $dom_obj.each(function(index,element){
  41.                     console.log("DOM数组索引：" + index + " -- 文本框value值：" + $(element).val());
  42.                 });
  43.             });
  45.         });
  46.     </script>
  47. ...
  48. <body>
  49.       <input type="text" value="t1"/>
  50.       <input type="text" value="t2"/>
  51.     <input type="text" value="t3"/>
  52.     <button id="btn6">循环遍历数组</button>
  53.       <button id="btn7">循环遍历JSON</button>
  54.     <button id="btn8">循环遍历DOM数组</button>
  55.       <button id="btn9">语法2：循环遍历DOM数组</button>
  56. </body>