锋利的jQuery第二章选择器

最新推荐文章于 2022-03-16 10:13:10 发布

yesmeshtu

最新推荐文章于 2022-03-16 10:13:10 发布

阅读量115

点赞数

分类专栏： JavaScript&Jquery 文章标签： jQuery JavaScript CSS HTML XHTML ViewUI

本文链接：https://blog.csdn.net/yesmeshtu/article/details/83836631

版权

JavaScript&Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

锋利的jQuery第二章选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-3-3</title>
  <script src="lib/jquery-1.4.2.js" type="text/javascript">
  </script>
  <style type="text/css">
	div,span,p{
		width:140px;
		height:140px;
		margin:5px;
		background:#aaa;
		border:#000 1px solid;
		float:left;
		font-size:17px;
		font-family:Verdana;
	}

	div .mini{
		width:55px;
		height:55px;
		background-color:#aaa;
		font-size:12px;
	}

	div.hide{
		display:none;
	}

  </style>
 </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 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 class="mini" title="test">class为mini,title为test.</div>
	</div>

	<div style="display:none;" class="one">
		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>

运行结果如下：