jQuery笔记之基本选择器

最新推荐文章于 2021-09-07 21:57:51 发布

ArryLuo123

最新推荐文章于 2021-09-07 21:57:51 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/ArryLuo123/article/details/56331137

本文详细介绍了jQuery中的各类选择器，包括基本选择器、类CSS选择器等，并通过具体实例展示了如何使用这些选择器来高效地操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工欲善必先利其器，一个好的开发工具可以让你起到事半功倍的效果。

可以进官网下最新版本http://www.dcloud.io/，同时也要到jQuery官网吧最新版本的jQuery下下来http://jquery.com/

jQuery选择器功能强大，种类也很多，分类

类CSS选择器
基本选择器
层次选择器
属性选择器
过滤选择器
基本过滤选择器
可见性过滤选择器

基本选择器:

包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器\

//下面案例是对以上几点进行实例验证:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script>
			$(function() {
				//通过标签选择器对h3进行设背景颜色
				$("h3").css("background-color", "red");
				//根据类选择器对其进行匹色
				$(".title").css("background-color", "gold");
				//通过id选择器进行对其元素进行设置颜色
				$("#box").css("background-color", "royalblue");
				//通过集选择器用来合并元素集合
				$("h2,dt,.title").css("background-color", "green");
				//交集选择器，获取并设置所有class为title的<h2>元素的背景颜色
				$("h2.title").css("background-color", "brown");
				////全局选择器，改变所有元素的字体颜色
				$("*").css("background-color","bisque");
			})
		</script>
	</head>

	<body>
		<div id="box"> id为box的div
			<h2 class="title">class为title的h2</h2>
			<h3 class="title">class为title的h3</h3>
			<h3>热门排行</h3>
			<dl>
				<dt><img src="img/case_1.gif" width="93" height="99" alt="斗地主" /></dt>
				<dd class="title">斗地主</dd>
				<dd>休闲游戏</dd>
				<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
			</dl>
		</div>

	</body>

</html>