Jquery选择器练习（三）

最新推荐文章于 2022-06-29 16:26:03 发布

老吉de吉

最新推荐文章于 2022-06-29 16:26:03 发布

阅读量888

点赞数

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

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

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>
	</head>
	<body>
		<div class="one" id="one">
			id为one.class为one的div
			<div class="mini">class 为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class 为one,title 为test的div
			<div class="clear"></div>
			<div class="mini"   title="other">class 为mini,title为other</div>
			<div class="mini"   title="test">class 为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class 为mini</div>
			<div class="mini">class 为mini</div>
			<div class="mini">class 为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class 为mini</div>
			<div class="mini">class 为mini</div>
			<div class="mini">class 为mini</div>
			<div id="tesst" class="mini">class 为mini,title为tesst</div>
		</div>
		<div style="display: none;" class="none">style的display为“none”的div</div>
		<div class="hide">class为hide的div</div>
		<div>
			包含input的type为hidden的div
			<input type="hidden" size="8"/>
		</div>
		<span id="mover"> 正在执行动画的span元素</span>
	</body>
</html>

* {margin: 0;padding: 0;}
div {
	width: 140px;
	height: 140px;
	margin: 5px;
	background: #aaa;
	border: 1px solid #000;
	float: left;
	font-size: 17px;
	font-family: Verdana;
}
div.mini {
	width: 55px;
	height: 55px;
	background-color: #aaa;
	font-size: 12px;
}
div.hide {display: none;}
span {
	width: 140px;
	height: 100px;
	background: #aaa;
	border: 1px solid #000;
	display: block;
	float:left;
	margin-top: 5px;
}
.clear {
	clear: both;
	height: 0px;
	border: 0;
	overflow: hidden;
}
.white {background: #ffffff}

$(document).ready(function() {
	initElementBgColor();
});
var initElementBgColor = function() {
	$("#one").css("background-color","#fff");
	$("#one").addClass("white");
	$(".mini").css("background-color","#fff");
	$("div").css("background-color","#fff");
	$("*").css("background-color","#fff");
	$("span,#two,#one,.mini").css("background-color","#fff");//多项选择器
	$("body div").css("background-color", "#fff");
	$("body>div").css("background-color", "#fff");
	/*临近同辈元素选择，可以用next()函数代替*/
	$(".one+div").css("background-color", "#fff");
	$(".one").next().css("background-color", "#fff");
	$(".one").next("div").css("background-color", "#fff");
	/*所有后面的同辈元素选择，可以用next()函数代替*/
	$("#two~div").css("background-color", "#fff");
	$(".one").nextAll().css("background-color", "#fff");   
	$(".one").nextAll("div").css("background-color", "#fff");
				
	$("div:first").css("background-color", "#fff");
	$("div:last").css("background-color", "#fff");
	$("div:not(.mini)").css("background-color", "#fff");
	$("div:even").css("background-color", "#fff");      //索引为偶数的所有div
	$("div:odd").css("background-color", "#fff");
	$(":animated").css("background-color", "#fff");
	/*选择焦点元素*/
	$("input").focus();
	$(":focus").css("background-color", "red"); 
				 
	$("div:contains(id)").css("background-color", "#fff");
	$("div:contains('id')").css("background-color", "#fff");
	$("div:empty").css("background-color", "#fff");
	$("div:not(:empty)").css("background-color", "#fff");
	$(":not(:empty)").css("background-color", "#fff");
	/*选取包含某种元素的选择器，has()中可以是标签和类*/
	$("div:has(.mini)").css("background-color", "#fff");
	$(":parent").css("background-color", "#fff");
	$("div:parent").css("background-color", "#fff");  //所有有文本或子元素的div
	$("div:visible").css("background-color", "#fff");
	$(":hidden").show(3000);    //显示所有元素，包括隐藏display:none; visibility:hidden ;type=hidden
	$("input:hidden").show();
}