开发者学堂课程【jQuery 开发教程：jQuery_基础过滤】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4278
jQuery_基础过滤
1. :animated Selector
- 描述∶选择所有正在执行动画效果的元素.
- 语法
∶$( ":animated" ) - 举例：
写入按钮（id，内容）和一个空白<div>一个id=“mover”<div>： <body> <button id="run">run< / button> <div></div> <div id="mover"></ div> <div></ div> </ body>
加入样式以及背景颜色，让
水平摆放和页边距：
<style> Div{ width: 100px;height: 100px; background-color: yellow; float: left; border: 1px solid #aaaaaa; margin: 0 5px; } < /style>
写入js，并引入jQuery：<script src="jquery-2.2.1.min.js">< / script>
此时执行效果如下：
让中间 id 名为“mover” 的<div>有动画效果，并改变背景颜色：
首先写入类让执行动画时改变为绿色：
.colored{ background-color: green;
之后：
<script> $ ( function(){ $ ( "#run" ).click( function(){ $ ( "div : animated" ).toggleclass( "colored" ); }）；
然后写一个函数：
function animatedIt(){
$ (""#mover" ) .slideToggle( "slow" , animatedIt) ;表示用滑动动画显示或隐藏一个元素。
调用这个函数：animatedIt（）；
刷新可以看到一个滑动动画显示的 div，点击 run 按钮， 它的背景颜色就变为了绿色。
此时执行效果如下：
2.:eq ( ) Selector
- 描述∶在匹配的集合中选择索引值为index的元素。
- 语法︰
( 1 ) $( ":eq(index)" ) : index:要匹配元素的索引值(从O开始计数)
( 2 ) $( ":eq(-index)" ) : -index:.要匹配元素的索引值(从0开始计数)，从最后一个元素开始倒计数。
3. :even Selector
- 描述︰选择索引值为偶数的元素，从О开始计数。也可以查看odd （奇数)．
- 语法︰
$( ":even" ) - 注意:这是基于O的索引，所以even选择器是选择第一个元素，第三个元素，依此类推在匹配。
4、:first Selector
- 描述∶选择第一个匹配的元素。
- 语法:
$(":first" )
5、:focus Selector
- 描述∶选择当前获取焦点的元素。
- 语法∶
$( ":focus" ) - 举例：
写入：
<body> <div id="content"> <input tabindex="1"> //规定控制次序 <input tabindex="2"> <select tabindex="3"> //选项标签 <option>select menu< / option> //选项 < / select> <div tabindex="4"> a div < / div> </div>
设置样式当获得焦点的时候有背景颜色：
<style> .focused{ background-color: #abcdef; } < /style>
引入jQuery：<script src="jquery-2.2.1.min.js"></script>
选择获取焦点的元素：
<script> $ ( function ( ){ $( "#content" ).delegate("*"' , "focus blur" , function(event){ //给指定的元素添加一个或多个事件 var e=$ ( this); //声明指定的对象 setTimeout(function() { e.toggleclass ( "focused",e.is ( " : focus") )； },0)
执行出现两个 input 框，一个选项菜单，一个 div
选中第一个 input 框，背景颜色就改变了，按 tab键选中其他的相继变色。
此时执行结果为：
6、:header Selector
- 描述∶选择所有标题元素，像h1, h2, h3等.
- 语法:
$( ":header" )
7、:last Selector
- 描述∶选择最后一个匹配的元素。
- 语法︰
$( ":last")
8、:gt（） Selector
- 描述∶选择匹配集合中所有大于给定index(索引值)的元素。
- 语法︰
$( ":gt(index)")或$( ":gt(-index)" )
9、:lt() Selector
- 描述∶选择匹配集合中所有索引值小于给定index参数的元素。
- 语法
:$( ":lt(index)")或$( ":lt(-index)") - 举例：
引入 jquery ：<script src="jquery-2.2.1.min.js"></script>
写入：
body> <table border="1"> <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr> <tr> <td>TD #3</td><td>TD #4</td><td>TD #5</td></tr> <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr> < /table> </body>
这是一个3×3表格。
此时执行结果如下：
选择索引值小于4的所有元素，使字体颜色变为红色：
<script> $ ( function() i $ ( "td:lt(4)").css( "color" , "red" ); }）
索引值不包含4
此时执行结果如下：
10、:not（） Selector
- 描述∶选择所有元素去除不匹配给定的选择器的元素。
- 语法∶
$( ":not(selector)" )
