<!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>
<script type="text/javascript">
$(document).ready(function() {
/*
* 基本选择器(后代元素, 子元素, 相邻元素, 兄弟元素)(这是分为一个大类)
*
* 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素
* 该选择器都以 “:” 开头
* 按照不同的过滤规则, 过滤选择器可以分为
* 基本过滤器
* 可见性过滤器
* 内容过滤器
* 属性过滤器
* 子元素过滤器
* 表单对象属性过滤选择器.
*/
/*
* 基本过滤选择器 10个
*
*/
//1、 first过滤选择器
//选中第一个p标签
$("p:first").css("color","red");
//2、 last过滤选择器
//选中最后一个p标签
$("span:last").css("color","darkred");
//3、not()过滤选择器
//选中id不是span2的全部span标签
$("span:not(#span2)").css("color","aqua");
//4、even过滤选择器
//选中索引为偶数的span标签
$("span:even").css("color","blueviolet");
//5、odd过滤选择器
//选中索引为奇数的span标签
$("span:odd").css("color","coral");
//6、eq过滤选择器 索引从0开始
//选中索引等于2的p标签
$("span:eq(2)").css("color","black");
//7、gt过滤选择器
//选中索引大于2的p标签
$("span:gt(2)").css("color","cornflowerblue");
//8、lt过滤选择器
//选中索引小于2的p标签
$("span:lt(2)").css("color","chartreuse");
//9、header过滤选择器
//选中全部标题标签，即h1—h6
$(":header").css("color","darkgreen");
//10、focus过滤选择器
//选中光标取得焦点的标签,注意：把光标选中不同的内容，重新refresh,可以得到不同的结果
//PPT上写的不好，建议为表单输入框获取焦点 那么,有失去焦点标签吗？？(以后上到这里的话，研究一下)
$("input").click(function(){
$(":focus").css("background","darkorchid");
});
//11、animated过滤选择器
//选中正在正执行动画的标签
$("#animateDiv").css("width","100px").css("height","20px").css("background","blue").css("margin-top","10px");
function anDiv(){//实现动画效果
$("#animateDiv").animate({300},"slow");
$("#animateDiv").animate({100},"slow",anDiv);
}
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"/>
<h1>h1标题标签</h1>
<h3>h3标题标签</h3>
<h5>h5标题标签</h5>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<div id="animateDiv"></div>
</body>
</html>