Jquery选择器

关注

原创最新推荐文章于 2026-05-21 06:36:43 发布 259 阅读 AI 写同款· GEO 优化 ›

jQuery——jQuery选择器 ※ 文章目录jQuery选择器什么是jQuery选择器$符号的实质3种用法jquery如何设置样式基本选择器基本选择器案例层级选择器过滤选择器案例：隔行变色筛选选择器(方法)【案例：下拉菜单】this+children+mouseenter+mouseleave【案例：突出展示】siblings+find【案例：手风琴】next+parent【案例：淘宝精品】index+eq jQuery选择器 什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。阅读详情

Jquery选择器:

1.基本选择器
2.层次选择器
3.类选择器
4.属性选择器
5.过滤选择器

1.基本选择器

标签选择器：
    $("html标签名");  //选中所有匹配标签名称的元素
    $("div").css("backgroundColor","pink");
id选择器：
    $("#属性id的值")；  //选中首个指定id的元素
    $("#div1").css("backgroundColor","pink");
类选择器：
    $(".class的属性值")； //选中所有匹配的class属性的元素
    $(".eff").css("backgroundColor","pink");

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="JS/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- class属性值既包含了mini，又包含了eef，二者皆是其属性-->
<div id = "div1" class = "mini eef">div1</div>
<div id = "div1" class = "mini eef">div2</div>

<script type="text/javascript">
$(".eef").css("backgroundColor","pink");
</script>
</body>
</html>

2.层次选择器：（A,B元素可以是被基本选择器选中的元素）

1.后代选择器：
    $("A B");  
    //A元素的满足条件的所有子元素 B元素 及 
            B元素下所有同样满足条件的后代元素都被选中
2.子选择器：
    $("A > B");
    //A元素的满足条件的所有子元素 B元素 被选中

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<style type="text/css">

#small{
	width : 100px;
	height : 100px;
	margin :50px;    /*1.所有 4 个外边距都是 50px*/
}

#big{
	width : 200px;
	height : 200px;
	/*box-sizing:border-box;  
	padding : 50px;   /*2.所有 4 个内边距都是 50px*/
	/*
	固定盒子大小，避免调整内边距影响盒子的大小
	*/
	margin : 100px;
}

#Big{
	width : 400px;
	height : 400px;
	
}


</style>
</head>
<body>

<div id = "Big" class = "mini eff">
	<div  id = "big" class = "mini eff">
		<input type="button" id = "small" class = "mini eff" value ="登录">
	</div>
</div>

</body>
<script type="text/javascript" >
$(function () {
	
	$("div").css("border","1px solid red");
	$("span").css("border","1px solid red");
})

$(function () {
	
	//后代选择器
	//$("#big #small").css("backgroundColor","black");
	//$("#Big .eff").css("backgroundColor","black");

	//子选择器
	$("#Big > div").css("backgroundColor","black");
})


</script>
</html>

3.属性选择器：（A,B元素可以是被基本选择器选中的元素）

1.属性名称选择器
    $("A[属性名]");  //选中包含该属性的元素class id...
2.属性选择器
    $("A[属性名='xx']"); //选中属性名与属性值完全匹配的元素
3.复合属性选择器
    $("A[属性名='xx'][属性名='xx']") //选中各个属性都能匹配上的元素

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<style type="text/css">

#small{
	width : 100px;
	height : 100px;
	margin :50px;    /*1.所有 4 个外边距都是 50px*/
}

#big{
	width : 200px;
	height : 200px;
	/*box-sizing:border-box;  
	padding : 50px;   /*2.所有 4 个内边距都是 50px*/
	/*
	固定盒子大小，避免调整内边距影响盒子的大小
	*/
	margin : 100px;
}

#Big{
	width : 400px;
	height : 400px;
	
}


</style>
</head>
<body>

<div id = "Big" class = "mini eff">
	<div  id = "big" class = "mini eff">
		<input type="button" id = "small" class = "mini eff" value ="登录">
	</div>
</div>

</body>
<script type="text/javascript" >
$(function () {
	
	$("div").css("border","1px solid red");
	$("span").css("border","1px solid red");
})

$(function () {

	//属性选择器,完全匹配上class='mini eff',不能是eff或mini
	//$(".mini[id='small']").css("backgroundColor","black");
	
	//复合属性选择器
	$(".mini[class='mini eff'][id='small']").css("backgroundColor","black");
})


</script>
</html>

4.过滤选择器(A,B元素可以是被基本选择器选中的元素,下标从0开始)

1.首元素选择器
    $("A:first"); //选中A元素(复数s)的第一个元素
2.尾元素选择器
    $("A:last"); //选中A元素(复数s)的最后元素
3.非元素选择器
    $("A:not(其他选择器[而不是元素])")
        //选中A元素(复数s)不具备或不是的其他元素
4.偶数选择器
    $("A:even");//选中A元素(复数s)的偶数下标元素
4.奇数选择器
    $("A:odd");//选中A元素(复数s)的奇数下标元素
6.等于索引选择器
    $("A:gt(index)");//选中A元素(复数s)的下标等于x元素
6.大于索引选择器
    $("A:gt(index)");//选中A元素(复数s)的下标大于x元素
6.小于索引选择器
    $("A:gt(index)");//选中A元素(复数s)的下标小于x元素
7.标题选择器：
    $(":header");   //选中header h1-h6的标题

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<style type="text/css">

#small{
	width : 100px;
	height : 100px;
	margin :50px;    /*1.所有 4 个外边距都是 50px*/
}

#big{
	width : 200px;
	height : 200px;
	/*box-sizing:border-box;  
	padding : 50px;   /*2.所有 4 个内边距都是 50px*/
	/*
	固定盒子大小，避免调整内边距影响盒子的大小
	*/
	margin : 100px;
}

#Big{
	width : 400px;
	height : 400px;
	
}


</style>
</head>
<body>

<h1>Don't Mention it</h1>


<div id = "Big" class = "mini eff">
	<div  id = "big" class = "mini eff">
		<input type="button" id = "small" class = "mini eff" value ="登录">
	</div>
</div>

</body>
<script type="text/javascript" >
$(function () {
	
	$("div").css("border","1px solid red");
	$("span").css("border","1px solid red");
})

$(function () {
	
	//首元素选择器
	//$("#Big:first").css("backgroundColor","black");
	
	
	//尾元素选择器
	//$("div:last").css("backgroundColor","black");
	
	//非元素选择器1,2
	//$("div:not(div:last)").css("backgroundColor","black");
	//$("div:not(.en)").css("backgroundColor","black");
	
	//偶数选择器
	//$("#small:even").css("backgroundColor","black");
	
	//奇数选择器
	//$("div:odd").css("backgroundColor","black");
	
	//等于索引选择器
	//$("input:eq(0)").css("backgroundColor","black");
	
	//大于索引选择器,gt(0)->1
	//$("div:gt(0)").css("backgroundColor","black");
	
	//小于索引选择器,lt(1) ->0
	//$("input:lt(1)").css("backgroundColor","black");
	
	//标题选择器
	$(":header").css("backgroundColor","pink");
})

</script>
</html>

5.表单过滤选择器：

1.可用元素选择器(input)
    $("input[type='text']:enabled");
2.不可用元素选择器（input）
    $("input[type='text']:disabled");
3.选中选择器（复选框 checkbox）
    $("input[type='checkbox']:checked");
4.选中选择器(单选框select有multiple选项)
    $("select option:selected");

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<style type="text/css">

input{
	width : 100px;
	height : 40px;
}

</style>
</head>
<body>

<input type="text" disabled="disabled" value="不可用1">
<input type="text" disabled="disabled" value="不可用2">
<input type="text"  value="可用1">
<input type="text"  value="可用2">

<input type="checkbox"  name = "cxk">唱
<input type="checkbox" name = "cxk">跳
<input type="checkbox"   name = "cxk">Rap
<input type="checkbox"  name = "cxk">篮球

<select multiple="multiple">
<option>唱</option>
<option>跳</option>
<option>Rap</option>


</select>


<input type="button" id = "length" value="长度">
</body>
<script type="text/javascript" >


$(function () {
	//可用元素选择器
	//$("input[type='text']:enabled").val("aaa");
	//不可用元素选择器
	//$("input[type='text']:disabled").val("aaa");
	
	//选中选择器
	//$("#length").click(function () {
		//alert($("input[type='checkbox']:checked").length);
	//})
	
	//选中选择器
	$("#length").click(function () {
		alert($("select option:selected").length);
	})
})


</script>
</html>

收录于