JQuery的基本选择器使用总结以及过滤，文本，可见度的选择代码

关注

原创最新推荐文章于 2026-06-11 17:57:38 发布 755 阅读 AI 写同款· GEO 优化 ›

SWIFT报文格式解析：从MT103到MT760，这些金融电文你了解多少？本文深入解析SWIFT报文格式中的MT103与MT760，详细介绍了这两种金融电文的结构、应用场景及实操技巧。MT103用于国际汇款业务，MT760则适用于银行保函开立，两者在国际金融交易中扮演关键角色。文章还提供了常见问题解决方案和自动化处理建议，帮助金融从业者高效处理跨境业务。阅读详情

选择器可以说是jquery的灵魂所在，因为有着强大的选择器，所以jquery才会几乎可以任意的取东西，在平时的开发中发现，不能仅仅的只会使用基本的选择器操作，把其它的选择器学习一下，有利于力高自己在开发效率和代码质量，减少代码量，下面是在测试学习过程中的代码总结（注：为了更加贴近实际开发，都采用了外部文件引入的方式）：

01.html

<!DOCTYPE html>
<html>
	<head>
		<title>测试jquery</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="01.css"/>
		<script type="text/javascript" src="./JQuery/jquery.js"></script>
		<script type="text/javascript" src="01.js"></script>
	</head>
	
	<body>
		<h1>JQuery选择器测试</h1>
		<input type="button" id="test1" value="测试1">
		<input type="button" id="test2" value="测试2">
		<input type="button" id="test3" value="测试3">
		<input type="button" id="test4" value="测试4">
		<input type="button" id="test5" value="测试5">
		<input type="button" id="test6" value="测试6">
		<input type="button" id="test7" value="测试7">
		<input type="button" id="test8" value="测试8">
		<input type="button" id="test9" value="测试9">
		<p id="a">abcdefg</p>
		<div id="div_1" class="div1">
		div1  A1
			<div id="div_2" class="div2">
			div2 A2
				<div id="div_3" class="div3">
				div3 A3
					<div id="div_4" class="div4">
					div4 A4A
						<div id="div_5" class="div5"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="div_2_1" class="div_2_1">
			
		</div>
	</body>		
</html>

01.css：

body{
	background-color: #efefef;
}
.div1{
	position: absolute;
	margin-left: 350px;
	margin-top: 80px;
	width: 600px;
	height: 600px;
	background-color: red;
}
.div2{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 500px;
	height: 500px;
	background-color: green;
}
.div3{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 400px;
	height: 400px;
	background-color: blue;
}
.div4{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 300px;
	height: 300px;
	background-color: white;
}
.div5{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 200px;
	height: 200px;
	background-color: black;
}
.div6{
	width: 100px;
	height: 100px;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	background-color: yellow;
}
.div_2_1{
	position: absolute;
	margin: 50px 0px 0px 1000px;
	width: 300px;
	height: 300px;
	background-color: yellow;
	display: none;
}
.div_2_2{
	position: absolute;
	margin: 300px 0px 0px 1000px;
	width: 300px;
	height: 300px;
	background-color: yellow;
}

01.js

body{
	background-color: #efefef;
}
.div1{
	position: absolute;
	margin-left: 350px;
	margin-top: 80px;
	width: 600px;
	height: 600px;
	background-color: red;
}
.div2{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 500px;
	height: 500px;
	background-color: green;
}
.div3{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 400px;
	height: 400px;
	background-color: blue;
}
.div4{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 300px;
	height: 300px;
	background-color: white;
}
.div5{
	position: absolute;
	margin: 50px 0px 0px 50px;
	width: 200px;
	height: 200px;
	background-color: black;
}
.div6{
	width: 100px;
	height: 100px;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	background-color: yellow;
}
.div_2_1{
	position: absolute;
	margin: 50px 0px 0px 1000px;
	width: 300px;
	height: 300px;
	background-color: yellow;
	display: none;
}
.div_2_2{
	position: absolute;
	margin: 300px 0px 0px 1000px;
	width: 300px;
	height: 300px;
	background-color: yellow;
}

----------------------------------------------------------------------------------上面是基本选择器的操作---------------------下面是扩展的其它选择器操作------------------------------

02.html

<!DOCTYPE html>
<html>
	<head>
		<title>测试jquery</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="01.css"/>
		<script type="text/javascript" src="./JQuery/jquery.js"></script>
		<script type="text/javascript" src="02.js"></script>
	</head>
	
	<body>
		<h1>JQuery选择器测试</h1>
		<input type="button" id="test1" value="测试1">
		<input type="button" id="test2" value="测试2">
		<input type="button" id="test3" value="测试3">
		<input type="button" id="test4" value="测试4">
		<input type="button" id="test5" value="测试5">
		<input type="button" id="test6" value="测试6">
		<input type="button" id="test7" value="测试7">
		<input type="button" id="test8" value="测试8">
		<input type="button" id="test9" value="测试9"><br>
		<input type="hidden" value="文本隐藏域1">
		<input type="hidden" value="文本隐藏域2">
		<input type="hidden" value="文本隐藏域3">
		<input type="hidden" value="文本隐藏域4">
		<input type="hidden" value="文本隐藏域5">
		<div id="div_1" class="div1">
		div1  A1
			<div id="div_2" class="div2">
			div2 A2
				<div id="div_3" class="div3">
				div3 A3
					<div id="div_4" class="div4">
					div4 A4A
						<div id="div_5" class="div5">
							<div id="div_6" class="div6">
							This is div6
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="div_2_1" class="div_2_1">
			外部兄弟div1
		</div>
		<div id="div_2_2" class="div_2_2">
			外部兄弟div2
		</div>
	</body>		
</html>

02.js

$(document).ready(function(){
	/*var myarray1 = [1,3,5,7,9];
	$.each(myarray1,function(i,n){
		alert(i+"---"+n);
	});
	*/
	//可见度选择器,凡是可见的都被选中
	$("#test1").click(function(){
		$("div:visible").css("background-color","yellow");
	});
//	类选择器
	$("#test2").click(function(){
		$("div.div6").css("background-color","red");
	});
	//显示隐藏元素
	$("#test3").click(function(){
		$("div:hidden").css("background-color","red");
		$("div:hidden").show();
	});
	$("#test4").click(function(){
		$MyInputHidden=$("input:hidden");
//		window.alert($MyInputHidden.length);
//		for(var i=0; i<$MyInputHidden.length; i++){
//			var DomInputHidden=$MyInputHidden[i];
//			window.alert(DomInputHidden.value);
//			alert($MyInputHidden[i].val());
			
//		}
//		这是jquery自己的方法遍历
		/*$.each($MyInputHidden,function(i,obj){
			window.alert($(obj).val());
		});*/
		//第二种方法
		$.each($MyInputHidden,function(){
			window.alert($(this).val());
		});
	});
});

关于选择器的使用规则如下：

1：使用什么选择器要根据需求来定
2：如果是针对文档内容，用内容选择器
3：如果是父子等关系，用层次选择器
4：如果是ID 类等用基本选择器
5：如果是表单元素，用表单选择器或表单对象属性选择器
6：如果是可见或则不可见元素，用可见性选择器
7：如果选择某个元素里面的某个属性或则属性值，用属性选择器
8：如果要考虑元素，要用过滤选择器

注：在这里，全部都已经引入jquery库，仅作参考

收录于