jQuery中的选择器

最新推荐文章于 2022-08-15 15:52:03 发布

32224047_yw

最新推荐文章于 2022-08-15 15:52:03 发布

阅读量127

点赞数

分类专栏： WEB前端文章标签： html jquery js

本文链接：https://blog.csdn.net/qq_32224047/article/details/106976423

版权

WEB前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.概述

选择器可以帮助我们在html中选中想要修饰的标签

可以对比css中的选择器：参见文章：https://blog.csdn.net/qq_32224047/article/details/106976009

2.jQuery中的选择器分类

2.1基本选择器

元素名选择器：$("元素名")

类选择器：$(".类名")

id选择器：$("#id值")

*通配符：$("*")

分组选择器：$("selector1,selector2,…"

2.2扩展选择器

后代选择器：$("父选择器后代选择器")

子元素选择器：$("父选择器>子元素选择器")

相邻兄弟选择器：$("大哥+小弟")

后面兄弟选择器：$("大哥~后面所有小弟")

层级选择器代码示例如下：

<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
	font-size: 14px;
    height: 53px;
    width: 47px;
	background: #CC66FF;
	border: #000 1px solid;
	font-family: Roman;
}
input{ margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$().ready(function() {
		/* ---------层级选择器练习--------- */
		//改变 <body> 内所有 <div> 的背景色为 #F08080"，字体颜色为绿色  id="b1"
		$("#b1").click(function(){
			$("body div").css({"background-color":"#F08080","color":"blue"})
		})
		
		//改变 <body> 内子 <div> 的背景色为 #FF0033"，字体颜色为绿色  id="b2"
		$("#b2").click(function(){
			$("body>div").css({"background-color":"#FF0033","color":"green"})
		})
		
		//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"，字体颜色为绿色  id="b3"
		$("#b3").click(function(){
			$("#one+div").css({"background-color":"#0000FF","color":"green"})
		})
		
		//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32"，字体颜色为蓝色  id="b4"
		$("#b4").click(function(){
			$("#two~div").css({"background-color":"#9ACD32","color":"blue"})
		})

		//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"，字体颜色为蓝色  id="b5"
		$("#b5").click(function(){
			$("#two").siblings("div").css({"background-color":"#FF6347","color":"blue"})
		})
		
		
	})
</script>
</head>

<body>
	<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/>
	<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
	<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
		id="b3" />
	<input type="button"
		value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
	<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"
		id="b5" />

	<h1>天气冷了</h1>

	<div id="one">id为one</div>

	<div id="two">
		id为two
		<div class="mini"> class是 mini</div>
	</div>

	<div class="one">
		class是 one
		<div class="mini"> class是 mini</div>
		<div class="mini"> class是 mini</div>
	</div>
	<div class="one">
		class是 one
		<div class="mini01"> class是 mini01</div>
		<div class="mini"> class是 mini</div>
	</div>

	<br>
	<div id="mover">动画</div>
	<br>
</body>
</html>

实现效果需要手动点击，可以自行验证，此处不再展示

32224047_yw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的选择器

1.概述选择器可以帮助我们在html中选中想要修饰的标签可以对比css中的选择器：参见文章：https://blog.csdn.net/qq_32224047/article/details/1069760092.jQuery中的选择器分类2.1基本选择器元素名选择器：$("元素名")类选择器：$(".类名")id选择器：$("#id值")*通配符：$("*")分组选择器：$("selector1,selector2,…"2.2扩展选择器后代选择器：$("父选择器
复制链接

扫一扫