选择器: 是一个字符串，是定位条件；通知 jquery 函数定位满足条件的 DOM 对象
通过DOM对象的id选择DOM对象
var $obj = $("#id");通过DOM对象的class来选择一类DOM对象
var $objs = $(".class");通过DOM对象的标签来选择一类DOM对象
var $objs = $("span");通过通配符*来选中所有DOM对象
var $objs = $("*");通过使用多个选择器来选中符合条件的元素，这些选择器是并集
var $objs = $("#id,.class");有三个div的DOM对象，初始颜色为green，通过点击不同按钮改变不同DOM对象的颜色
🚩注意：对jquery对象的操作，就是操作jquery对象中的全部成员（DOM对象）
点击不同的按钮，分别使用 id选择器、class选择器、标签选择器、全部选择器、组合选择器 来选中不同的一个或多个DOM对象，并通过jquery对象的函数改变DOM对象的颜色
<html> <head> <style type="text/css"> .class,#id{ width: 100px; height: 50px; background-color: green; } </style> <script type="text/javascript" src="js/jquery-3.5.1.js"></script> <script type="text/javascript"> // 点击按钮使用id选择器更改DOM对象的背景颜色 function fun1() { var $obj = $("#id"); $obj.css("backgroundColor","red") } // 点击按钮使用class选择器更改DOM对象的背景颜色 function fun2() { var $objs = $(".class"); $objs.css("backgroundColor","blue") } // 点击按钮使用标签选择器更改DOM对象的背景颜色 function fun3() { var $objs = $("div"); $objs.css("backgroundColor","yellow") } // 点击按钮使用全部选择器更改所有DOM对象的背景颜色 function fun4() { var $objs = $("*"); $objs.css("backgroundColor","orange") } // 点击按钮更改#id和span的DOM对象的背景颜色 function fun5() { var $objs = $("#id,span"); $objs.css("backgroundColor","black") } </script> </head> <body> <div id="id">id</div> <div class="class">class</div> <div class="class">class</div> <input type="button" onclick="fun1()" value="使用id选择器改变颜色" /> <input type="button" onclick="fun2()" value="使用class选择器改变颜色" /> <input type="button" onclick="fun3()" value="使用标签选择器改变颜色" /> <input type="button" onclick="fun4()" value="使用所有选择器改变颜色" /> <input type="button" onclick="fun5()" value="使用组合选择器改变颜色" /> </body> </html>使用<input>标签的type属性值，定位DOM对象的方式
语法
$(":type属性值")例子
// 选中所有的type=text属性值的input标签 $(":text").css("background","green") // 选中所有的type=button属性值的input标签 $(":button").css("background","yellow")注意
表单选择器使用与是否有form标签无关仅有type属性的标签才能使用过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选；过滤条件不能独立出现在 jquery 函数；如果使用只能出现在选择器后方。
过滤器像CSS的伪类选择器
选择第一个 first, 保留数组中第一个 DOM 对象
语法：$("选择器:first")
var $obj = $(".box:first");选择最后个 last, 保留数组中最后 DOM 对象
语法：$("选择器:last")
var $obj = $(".box:last");选择数组中指定对象
语法：$("选择器:eq(index)")
var $obj = $(".box:eq(2)");选择数组中小于指定索引的所有 DOM 对象
语法：$("选择器:lt(index)")
var $obj = $(".box:lt(2)");选择数组中大于指定索引的所有 DOM 对象
语法：$("选择器:gt(index)")
var $obj = $(".box:gt(2)");点击不同按钮，设置选定的div背景颜色
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-3.5.1.js"></script> <script type="text/javascript"> function fun0() { // 选择第一个DOM对象 var $obj = $(".box:first"); $obj.css("backgroundColor","red"); } function fun1() { // 选择最后一个DOM对象 var $obj = $(".box:last"); $obj.css("backgroundColor","green"); } function fun2() { // 选择指定索引的DOM对象 var $obj = $(".box:eq(2)"); $obj.css("backgroundColor","orange"); } function fun3() { // 选择小于指定索引的所有DOM对象 var $obj = $(".box:lt(2)"); $obj.css("backgroundColor","blue"); } function fun4() { // 选择大于指定索引的所有DOM对象 var $obj = $(".box:gt(2)"); $obj.css("backgroundColor","yellow"); } </script> </head> <body> <div class="box">box0</div> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> <div class="box">box4</div> <button onclick="fun0()">first选择第一个box</button> <button onclick="fun1()">last选择最后一个box</button> <button onclick="fun2()">eq选择索引为2的box</button> <button onclick="fun3()">lt选择小于指定索引的box</button> <button onclick="fun4()">gt选择大于指定索引的box</button> </body> </html>