jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布

夏灿y

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量98

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/xia_zai_ya/article/details/103905910

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery 初学

选择器（一）

什么是选择器？
就是能通过各种方式来获取到元素。（类似JavaScript中的document.getElementById…document.getElementsByTagName 等等）

基本选择器

ID选择器
#id 使用：$("#id")
/* 注意，id是元素设置的id名 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<button id="box">其他品牌</button>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
					$("#box ").css("color"，"#0000FF")
			})
		</script>
	</body>
</html>

class 选择器
.class 使用：$(".class")
/* 注意，class是元素设置的class名 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<button class="box">其他品牌</button>
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
					$(".box ").css("color"，"#0000FF")
			})
		</script>
	</body>
</html>

元素名称选择器
“element” 使用：$(“element”)
/* 注意，element是元素名称,使用元素名称选择器会选择所有的对应名称的元素 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<button> 其他品牌 </button>
		<button> 其他品牌2 </button>
		<button> 其他品牌3 </button>
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
					$("button").css("color"，"#0000FF")     //三个按钮都会被选择到
			})
		</script>
	</body>
</html>

所有元素选择器
" * " 使用：$(" * ")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<button> 其他品牌 </button>
		<button> 其他品牌2 </button>
		<button> 其他品牌3 </button>
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
					$("*").css("color"，"#0000FF")     //页面所有元素都会被选择到
			})
		</script>
	</body>
</html>

选取多个元素选择器
“div,.box,#id” 使用：$(“div,button”)
/注意，要选取多个元素，中间用逗号隔开即可/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div>1234</div>
		<button> 其他品牌 </button>
		<button> 其他品牌2 </button>
		<button> 其他品牌3 </button>
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
					$("button,div").css("color"，"#0000FF")     //三个按钮和一个div都会被选择到
			})
		</script>
	</body>
</html>

小结:
刚开始学习jQuery，第一步先接触选择器，学习到了最基本的几个选择器方法，id，class，元素名一类的选择器，下一步学习层次选择器，一步步前进，给自己加油。