<!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>
