jQuery_基础过滤|学习笔记

简介: 快速学习 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>

加入样式以及背景颜色,让<div>水平摆放和页边距:

<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)" )

相关文章
|
JSON 前端开发 JavaScript
Web前端学习:jQuery基础 · 小终结【异步处理AJAX】
Web前端学习:jQuery基础 · 小终结【异步处理AJAX】
123 0
Web前端学习:jQuery基础 · 小终结【异步处理AJAX】
|
前端开发 JavaScript
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
173 0
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
|
JavaScript 前端开发
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】
128 0
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】
|
JavaScript 前端开发
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
281 0
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
|
JavaScript 前端开发 程序员
JQuery基础(一篇入门)
JQuery基础(一篇入门)
96 0
|
JavaScript 索引
jQuery基础选择器
jQuery引入及其选择器 jQuery是JS的一个库,它里面封装了一些我们开发中常用的一些功能;它提供了一些方便的选择器,可以让我们更方便的操作DOM。
|
JavaScript 开发者 索引
jQuery_基础过滤|学习笔记
快速学习 jQuery_基础过滤
254 0
jQuery_基础过滤|学习笔记
|
JavaScript
jquery的基础选择器-9
jquery的基础选择器-9
119 0
jquery的基础选择器-9
|
JavaScript 前端开发 CDN
jQuery入门基础
jQuery入门基础 jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery入门基础
|
设计模式 JavaScript 前端开发