jQuery_基础过滤|学习笔记-阿里云开发者社区

jQuery_基础过滤|学习笔记

2022-07-05 126

简介： 快速学习 jQuery_基础过滤

+关注继续查看

开发者学堂课程【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>

此时执行效果如下：

图片1.png

让中间 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.png

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键选中其他的相继变色。

此时执行结果为：

图片3.png

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表格。

此时执行结果如下：

图片12.png

选择索引值小于4的所有元素，使字体颜色变为红色：

<script>
$ ( function() i
$ ( "td:lt(4)").css( "color" , "red" );
}）

索引值不包含4

此时执行结果如下：

图片13.png

10、:not（） Selector

描述∶选择所有元素去除不匹配给定的选择器的元素。
语法∶$( ":not(selector)" )