事实上，一个jQuery对象是一个或多个dom对象组成的数组，jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系，如：

1
dom1
2
dom2
3
dom3
当获取到jQuery对象时，$(“div”) == [dom1,dom2,dom3]，其存储顺序是对应的。

所谓过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选而获取一个新的jQuery对象，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。

基本过滤器

(1)选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)

(2)选择最后个 last, 保留数组中最后 DOM 对象
语法：$(“选择器:last”)

(3)选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)

(4)选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)

(5)选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)

实例如下：

  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.     <style>
  9.         div{
  10.             background: grey;
  11.             width: 200px;
  12.             height: 50px;
  13.             margin-top: 50px;
  14.         }
  15.     </style>
  17.     <script>
  18.         $(function () {
  19.             $("#btn1").click(function () {
  20.                 alert("哎呦，不错哟~");
  21.             });
  23.             $("#btn2").click(function () {
  24.                let obj=$("div:first");
  25.                obj.css("background","blue");
  26.             });
  28.             $("#btn3").click(function () {
  29.                 let obj=$("div:last");
  30.                 obj.css("background","red");
  31.             });
  33.             $("#btn4").click(function () {
  34.                 let obj=$("div:eq(1)");
  35.                 obj.css("background","green");
  36.             });
  38.             $("#btn5").click(function () {
  39.                 let obj=$("div:lt(3)");
  40.                 obj.css("background","yellow");
  41.             });
  43.             $("#btn6").click(function () {
  44.                 let obj=$("div:gt(3)");
  45.                 obj.css("background","orange");
  46.             });
  47.         });
  48.     </script>
  50. </head>
  51. <body>
  53. <div id="one">我是第一个div-0</div>
  54. <div id="two">我是第二个div-1</div>
  55. <div id="three">我是第三个div-1</div>
  56. <div id="four">我是第四个div-1</div>
  57. <div id="five">我是第五个div-1</div>
  58. <div id="six">我是第六个div-1</div>
  59. <br>
  60. <span>我是span标签</span><br>
  62. <input type="button" value="绑定事件1" id="btn1">
  63. <input type="button" value="绑定事件2" id="btn2">
  64. <input type="button" value="绑定事件3" id="btn3">
  65. <input type="button" value="绑定事件4" id="btn4">
  66. <input type="button" value="绑定事件5" id="btn5">
  67. <input type="button" value="绑定事件6" id="btn6">
  68. </body>
  69. </html>

image.png
说明： $(function () { }是jQuery库中的一个函数，其意思是当dom对象加载完成后执行该函数，如果上述代码省略该函数，是不会被执行的，因为再执行绑定事件的时候，dom对象还没有被加载完成，除非在dom对象代码的后面插入该js脚本段。

表单对象属性过滤器

(1)选择可用的文本框
语法：$(“:text:enabled”)

(2)选择不可用的文本框
语法：$(“:text:disabled”)

(3)复选框选中的元素
语法：$(“:checkbox:checked”)

(4)选择指定下拉列表的被选中元素
语法：$(“选择器>option:selected”)

实例如下：

  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.     <style>
  10.     </style>
  12.     <script>
  13.         $(function () {
  14.             $("#btn1").click(function () {
  15.                 let $obj=$(":text:enabled");
  16.                 for(let i=0;i<$obj.length;i++){
  17.                     $($obj[i]).val("哎呦，不错哟~");
  18.                     alert($obj[i].value);
  19.                 }
  20.             });
  22.             $("#btn2").click(function () {
  23.                 let $obj=$(":checkbox:checked");
  24.                 for(let i=0;i<$obj.length;i++){
  25.                     alert($obj[i].value);
  26.                 }
  27.             });
  29.             $("#btn3").click(function () {
  30.                 let $obj=$("#lang>option:selected");
  31.               //或"select>option:selected"也ok
  32.                 alert($obj.val());
  33.             });
  34.         });
  35.     </script>
  37. </head>
  38. <body>
  40. <p>文本框</p>
  41. <input type="text" value="文本框1"><br><br>
  42. <input type="text" value="文本框2" disabled><br><br>
  43. <input type="text" value="文本框3"><br><br>
  44. <input type="text" value="文本框4" disabled><br><br>
  46. <p>复选框</p>
  47. <input type="checkbox" value="girl" checked>小姐姐<br>
  48. <input type="checkbox" value="game" checked>游戏<br>
  49. <input type="checkbox" value="football">足球<br>
  50. <input type="checkbox" value="swim">游泳<br>
  51. </body>
  53. <p>下拉框</p>
  54. <select id="lang">
  55.     <option value="java">Java语言</option>
  56.     <option value="go" selected>Go语言</option>
  57.     <option value="C++">C++语言</option>
  58.     <option value="python">Python语言</option>
  59. </select>
  61. <p>功能按钮</p>
  62. <input type="button" value="获取可编辑文本框的value" id="btn1"><br><br>
  63. <input type="button" value="获取被选择的复选框的value" id="btn2"><br><br>
  64. <input type="button" value="获取被选择的下拉框的value" id="btn3">
  65. </html>

image.png