<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
	</head>
	<body>
		<h2>所有选择器都可以结合css或click使用</h2>
		<h3>第二个:empty过滤器就是一个很好的例子</h3>
		<script type="text/javascript">
			$(document).ready(function() {
				
				/*
				 * 选择器——过滤选择器——内容过滤器
				 * 
				 *过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素
				 *	该选择器都以 “:” 开头
				 *按照不同的过滤规则, 过滤选择器可以分为
				 *	基本过滤器
				 *	可见性过滤器
				 *	内容过滤器
				 *	属性过滤器
				 *	子元素过滤器
				 *	表单对象属性过滤选择器.
				 */
   				
   				/*
   				 * 内容过滤器    4个
   				 * 
   				 */
   				
				//1、 :contains()过滤选择器
				//选中含有‘子子’内容的p标签        注意单引号不能少
				$("p:contains('子子')").css("color","red"); 
					
				//2、:empty过滤选择器
				//选中空的div标签,注意：把光标选中不同的内容，重新refresh,可以得到不同的结果				
				$("#animateDiv").css("width","100px").css("height","20px").css("background","blue").css("margin-top","10px");
                function anDiv(){//实现动画效果
                    $("#animateDiv").animate({width:300},"slow");
                    $("#animateDiv").animate({width:100},"slow",anDiv);
                }
				$("div:empty").click(function(){
					alert("div:empty空的div标签");
					$("#animateDiv").css("background","blue");
					anDiv(); //搞了半天居然是单词拼写错误，醉了
				});
				
				//3、:has()过滤选择器
				//选中含有span元素的div标签
				$("div:has(span)").css("background","aqua");
				
				//4、parent过滤选择器
				//选中含有子元素的div标签
				$("div:parent").click(function(){
					alert("div:parent含有子元素的div标签");
					$("#animateDiv").css("background","blueviolet");
					anDiv(); //搞了半天居然是单词拼写错误，醉了
				});

			});		
		</script>	
		<hr style="border:5px solid red"/>
		<div id="fid" title="fid">
			<p>子p标签</p>
			<div>子div标签
				<hr style="border:2px solid pink"/>
			    <p>子子p标签</p> 
			</div>	
			<span id="span1">子span标签</span>
			<span id="span2">子span标签2</span>
			
			<span>子span标签</span>
			<span>子span标签</span>
			<span>子span标签</span>
			<span>子span标签</span>
		</div>
		<hr style="border:5px solid red"/>
		<div id="animateDiv"></div>
		
	</body>
</html>