val()函数

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="static/js/jquery.js"></script>
  8.     <script>
  9.         $(function () {
  10.             $("#btn1").click(function () {
  11.                 let x=$(":text").val();
  12.                 alert("x的值："+x);
  13.             });
  15.             $("#btn2").click(function () {
  16.                 $(":text").val("桃园结义");
  17.             });
  18.         });
  19.     </script>
  20. </head>
  21. <body>
  22. <input type="text" value="刘备" id="text1"><br>
  23. <input type="text" value="关羽" id="text2"><br>
  24. <input type="text" value="张飞" id="text3"><br>
  26. <input type="button" value="无参val()函数" id="btn1">
  27. <input type="button" value="有参val()函数" id="btn2">
  28. </body>
  29. </html>

运行结果：
image.png
image.png

text()函数

操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text()：无参数调用，读取数组中所有 DOM 对象的文字显示内容，将
得到内容拼接为一个字符串返回
$(选择器).text(值)：有参数方式，对数组中所有 DOM 对象的文字显示内容进行
统一赋值
实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="static/js/jquery.js"></script>
  8.     <script>
  9.         $(function () {
  10.             $("#btn1").click(function () {
  11.                 let x=$("div").text();
  12.                 alert("x的值："+x);
  13.             });
  15.             $("#btn2").click(function () {
  16.                 $("div").text("我向你奔赴而来~");
  17.             });
  19.         });
  21.     </script>
  23. </head>
  24. <body>
  26. <div>穿过人海，</div>
  27. <div>别停下来</div>
  28. <div>趁现在还要期待~</div>
  30. <input type="button" value="无参的text()函数" id="btn1">
  31. <input type="button" value="带参的text()函数" id="btn2">
  33. </body>
  34. </html>

运行结果：

image.pngattr()函数

对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”)：获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”)：对数组中所有 DOM 对象的属性设为新值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="static/js/jquery.js"></script>
  8.     <script>
  9.         $(function () {
  10.             $("#btn1").click(function () {
  11.                 alert("图片的路径："+$("img").attr("src"));
  12.             });
  14.             $("#btn2").click(function () {
  15.                 $("img").attr("src","static/images/x2.png");
  16.                 alert("换图片之后的路径是："+$("img").attr("src"));
  17.             });
  18.         });
  19.     </script>
  20. </head>
  21. <body>
  23. <img src="static/images/x1.png"><br>
  25. <input type="button" value="获取图片路径" id="btn1">
  26. <input type="button" value="修改图片路径" id="btn2">
  27. </body>
  28. </html>

image.png
image.png

remove()

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

empty()

$(选择器).empty()：将数组中所有 DOM 对象的子对象删除；

append()

为数组中所有 DOM 对象添加子对象；
$(选择器).append(“

我动态添加的 div
“)；

html()

设置或返回被选元素的内容（innerHTML），和innerHTML的作用类似；
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容；
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容；

实例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="static/js/jquery.js"></script>
  8.     <script>
  9.         $(function () {
  10.             $("#btn1").click(function () {
  11.                 $("select").remove();
  12.             });
  14.             $("#btn2").click(function () {
  15.                 $("select").empty();
  16.             });
  18.             $("#btn3").click(function () {
  19.                 $("#div-1").append("<b>这是append函数添加进去的...</b>");
  20.             });
  22.             $("#btn4").click(function () {
  23.                 alert("使用html函数之前："+$("#h-1").html());
  24.                 $("#h-1").html("你没那么多观众！");
  25.             });
  26.         });
  27.     </script>
  28. </head>
  29. <body>
  31. <select>
  32.     <option value="小姐姐">小姐姐</option>
  33.     <option value="游戏">游戏</option>
  34.     <option value="足球">足球</option>
  35. </select><br><br>
  36. <div id="div-1"></div><br>
  37. <h2 id="h-1">大胆点生活，</h2>
  39. <input type="button" value="remove函数" id="btn1">
  40. <input type="button" value="empty函数" id="btn2">
  41. <input type="button" value="append函数" id="btn3">
  42. <input type="button" value="html函数" id="btn4">
  44. </body>
  45. </html>

运行结果：
image.png
8.each函数（重要）
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标；
element: 数组的对象；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="static/js/jquery.js"></script>
  8.     <script>
  9.         $(function () {
  10.             $("#btn1").click(function () {
  11.                 let array = ["阿离", "可爱", "我喜欢"];
  12.                 $.each(array, function (index, element) {
  13.                     alert("index：" + index + "，element：" + element);
  14.                 });
  15.             });
  17.             $("#btn2").click(function () {
  18.                 let json = {"name": "阿离", "sex": "女", "age": 18};
  19.                 $.each(json, function (index, element) {
  20.                     alert("index：" + index + "，element：" + element);
  21.                 });
  22.             });
  24.             $("#btn3").click(function () {
  25.                 let domArray = $(":text");
  26.                 $.each(domArray, function (index, element) {
  27.                     alert("index：" + index + "，element：" + element.value);
  28.                 });
  29.             });
  31.             $("#btn4").click(function () {
  32.                 $(":text").each(function (index, element) {
  33.                     alert("index：" + index + "，element：" + element.value);
  34.                 });
  35.             });
  36.         });
  37.     </script>
  38. </head>
  39. <body>
  41. <input type="text" value="刘备"><br><br>
  42. <input type="text" value="关羽"><br><br>
  43. <input type="text" value="张飞"><br><br>
  45. <input type="button" value="each 普通数组" id="btn1"><br>
  46. <input type="button" value="each json对象" id="btn2"><br>
  47. <input type="button" value="each dom数组" id="btn3"><br>
  48. <input type="button" value="each（方式二） dom数组" id="btn4">
  49. </body>
  50. </html>