jq基本过滤选择器练习

最新推荐文章于 2022-11-04 21:57:15 发布

一只小鸟儿

最新推荐文章于 2022-11-04 21:57:15 发布

阅读量259

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Theshy08/article/details/108832075

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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">
	$(function() {
		/* ---------基本过滤选择器练习--------- */
		//改变第一个 div 元素的背景色为 #FF6347"  id="b1"
		$("#b1").click(function(){
			$("div:first").css("background-color", "#FF6347" );
		})

		//改变最后一个 div 元素的背景色为 #9ACD32" id="b2" 
		$("#b2").click(function(){
			$("div:last").css("background-color","#9ACD32" );
		})

		//改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" 
		$("#b3").click(function(){
			$("div:not(.one)").css("background-color","#FF0033" );
		})

		//改变索引值为等于 3 的 div 元素的背景色为 #006400"  id="b4" 
		$("#b4").click(function(){
			$("div:eq(3)").css("background-color","#006400" );
		})

		//改变索引值为小于 3 的 div 元素的背景色为 #FF69B4"  id="b5"/>
		$("#b5").click(function(){
			$("div:lt(3)").css("background-color","#FF69B4" );
		})
		
		//改变索引值为大于 3 的 div 元素的背景色为 #F08080"  id="b6"
		$("#b6").click(function(){
			$("div:gt(3)").css("background-color","#F08080"  );
		})
		
		//改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7"
		$("#b7").click(function(){
			$("div:even").css("background-color","#FF6347"  );
		})
		
		//改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8"
		$("#b8").click(function(){
			$("div:odd").css("background-color","#FF1493" );
		})
		
	})
</script>
</head>

<body>
	<input type="button" value=" 改变第一个 div 元素的背景色为 #FF6347" id="b1" />
	<input type="button" value=" 改变最后一个 div 元素的背景色为 #9ACD32" id="b2" />
	<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" />
	<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" />
	<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5" />
	<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" />
	<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" />
	<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" />

	<h1>天气冷了</h1>

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

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

	<div class="one" title="aa">
		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>

一只小鸟儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq基本过滤选择器练习

<!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.
复制链接

扫一扫