Demo-jQuery常用选择过滤器

最新推荐文章于 2020-09-29 23:27:46 发布

_夜风

最新推荐文章于 2020-09-29 23:27:46 发布

阅读量273

点赞数

分类专栏： Jquery学习文章标签： jQuery

本文链接：https://blog.csdn.net/k183000860/article/details/52025190

版权

Jquery学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>

	<style type = "text/css">

		
		div,span,p {

			width: 140px;
			background: #aaa;
			height: 140px;
			margin:5px;
			border:#000 1px solid;
			float:left;
			font-size: 17px;
			font-family: Verdana;

		}

		div.mini {

			width: 55px;
			height: 55px;
			background: #aaa;
			font-size: 12px;

		}

		div.hide {
			display: none;
		}

	</style>
	

	<script type="text/javascript">

		$(function(){
			
			$("#one").css(
				"background", 'red'
				
			);
			
			$("div").css("background","green");

			$("span,#two").css("background","yellow");

			$("div div").css("background","black");

			$("#one > .mini").css("background","white");
			
			$("div:last").css("background","blue");//选取最后一个div

			$("div:not(.mini)").css("background","red");//选取class不为mini的所有div

			$("div:odd").css("background","blue");//选取所有奇数索引的div

			$("div:eq(4)").css("background","red");//选取指定索引下的div

			$("div:gt(2)").css("background","white");//选取大于指定div

			$(":header").css("color","yellow");//选取所有h元素

			

			$(":focus").css("background","black");

			$("div:contains('one')").css("background","white");//获取包含‘one’内容的div

			$("div:empty").css("background","red");//获取空div

			$("div:has('.mini')").css("background","yellow");//获取div下minidiv

			$(":hidden").show(5000);//获取所有隐藏的元素，并show出来

			$(":animated").css("background","green");//改变执行动画的颜色
		});
		
	</script>
</head>
<body>
	
	<h1>32</h1>

	<div class="one" id="one">

		class one id one
		<div class="mini">div1_1</div>
		
	</div>
	
	<div class="one" id="two" title="test">
		
		class one id two
		<div class="mini" title="other">div2_1</div>
		<div class="mini" title="test">div2_2</div>
	</div>

	<div class="one">
		
		class one
		<div class="mini">div3_1</div>
		<div class="mini">div3_2</div>
		<div class="mini">div3_3</div>
		<div class="mini"></div>
	</div>

	<div class="one">
		
		class one
		<div class="mini">div4_1</div>
		<div class="mini">div4_2</div>
		<div class="mini">div4_3</div>
		<div class="mini" title="tesst">title tesst</div>

	</div>
	
	<div style="display: none" class="none">
		
		display为none的div
	</div>

	<div class="hide">class hide</div>

	<div>
		<input type="hidden" size="8"></input>	
	</div>

	<span id="mover">
		mover
	</span>

</body>
</html>

_夜风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Demo-jQuery常用选择过滤器

test div,span,p { width: 140px; background: #aaa; height: 140px; margin:5px; border:#000 1px solid; float:left; font-size: 17px; font-family: Verdana; } div.m
复制链接

扫一扫