jQuery选择器详解-优快云博客

02_选择器

选择器: 是一个字符串，是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

常用基本选择器

ID选择器

通过DOM对象的id选择DOM对象

var $obj = $("#id");

class选择器

通过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, 保留数组中第一个 DOM 对象

语法：$("选择器:first")

var $obj = $(".box:first");

last选择最后一个DOM对象

选择最后个 last, 保留数组中最后 DOM 对象

语法：$("选择器:last")

var $obj = $(".box:last");

eq选择数组中指定DOM对象

选择数组中指定对象

语法：$("选择器:eq(index)")

var $obj = $(".box:eq(2)");

lt选择数组中小于指定索引的所有 DOM 对象

选择数组中小于指定索引的所有 DOM 对象

语法：$("选择器:lt(index)")

var $obj = $(".box:lt(2)");

gt选择数组中大于指定索引的所有 DOM 对象

选择数组中大于指定索引的所有 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>