Jquery选择器练习（二）

最新推荐文章于 2020-05-24 16:18:19 发布

老吉de吉

最新推荐文章于 2020-05-24 16:18:19 发布

阅读量1.1k

点赞数

分类专栏： JQuery 文章标签： CSS html jquery 浏览器

本文链接：https://blog.csdn.net/wustwyj/article/details/38069869

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Jquery的选择器非常强大，只要运用熟悉，方可对Dom操作得心应手。一些选择器和CSS伪类很相似，很容易引起混淆，需要多加练习和注意。

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<title>Test</title>
		<meta charset="UTF-8" />
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/index.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				initElementBgColor();
			});
			var initElementBgColor = function() {
				$("div.smallBox:odd").css("background", "#ccc");
				$("div.smallBox:even").css("background", "#ccc");
				$(".smallBox:first").css("background", "#ccc");
				$(".smallBox:last").css("background", "#ccc");
				$(".smallBox:nth-child(2)").css("background", "#ccc");
				$(".smallBox:nth-child(n+1)").css("background", "#ccc");
				$(".smallBox:nth-child(2n)").css("background", "#ccc");
				$(".smallBox:nth-child(2n+1)").css("background", "#ccc");
				$(".smallBox:nth-child(-3n+100)").css("background", "#ccc");
				$(".smallBox:gt(3)").css("background", "#ccc");
				$(".smallBox:lt(3)").css("background", "#ccc");
				$(".smallBox:eq(5)").css("background", "#ccc");
				$(".smallBox:not(:empty)").css("background", "#ccc");
				$(".smallBox:hidden").css("display", "block");
				$(".smallBox:not(:visible)").css("display", "block");
				$(".box .smallBox,:visible").css("display", "block");
				$(".box .smallBox p:contains(4)").css("background", "#ccc");
				$(".box :header").css("background", "#ccc");
			}
		</script>

		<style type="text/css" >
			* {margin: 0;padding: 0;}
			.box {border: 1px solid;}
			.smallBox {
				width: 100px;
				height: 100px;
				border: 1px solid red;
				margin-left: 91px;
				float: left;
				font-size: 80px;
				line-height: 100px;
				text-align: center;
			}
			.clear {
				clear: both;
				height: 0px;
				overflow: hidden;
			}
			.show {display: none;}
			.able {visibility: hidden;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="smallBox">1</div>
			<div class="smallBox">2</div>
			<div class="smallBox">3</div>
			<div class="smallBox">
				<p>4</p>
			</div>
			<div class="smallBox">5</div>
			<div class="smallBox">6</div>
			<div class="smallBox">7</div>
			<div class="smallBox show">8</div>
			<div class="smallBox able">9</div>
			<div class="clear"></div>
			<div>
				<h1>H1H1H1H1H1H1H1H1H1H1H1H1H1H1H1</h1>
				<h2>H2H2H2H2H2H2H2H2H2H2H2H2H2H2H2</h2>
			</div>
		</div>
	</body>
</html>