juqery 学习之三 选择器 简单 内容


Posted in Javascript onNovember 25, 2010

:first

匹配找到的第一个元素

Matches the first selected element.

返回值

Element

示例

查找表格的第一行

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:first")

结果:

[ <tr><td>Header 1</td></tr> ]

---------------------------------------------------------------------------------------

:last

匹配找到的最后一个元素

Matches the last selected element.

返回值

Element

示例

查找表格的最后一行

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:last")

结果:

[ <tr><td>Value 2</td></tr> ]

---------------------------------------------------------------------------------------

:not(selector)

去除所有与给定选择器匹配的元素

Removes all elements matching the given selector.

返回值

Array<Element>

参数

selector (Selector) : 用于筛选的选择器

示例

查找所有未选中的 input 元素

HTML 代码:

<input name="apple" />
<input name="flower" checked="checked" />

jQuery 代码:

$("input:not(:checked)")

结果:

[ <input name="apple" /> ]

---------------------------------------------------------------------------------------

:even

匹配所有索引值为偶数的元素,从 0 开始计数

Matches even elements, zero-indexed.

返回值

Array<Element>

示例

查找表格的1、3、5...行(即索引值0、2、4...)

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:even")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

---------------------------------------------------------------------------------------

:odd

匹配所有索引值为奇数的元素,从 0 开始计数

Matches odd elements, zero-indexed.

返回值

Array<Element>

示例

查找表格的2、4、6行(即索引值1、3、5...)

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:odd")

结果:

[ <tr><td>Value 1</td></tr> ]

---------------------------------------------------------------------------------------

:eq(index)

匹配一个给定索引值的元素

Matches a single element by its index.

返回值

Element

参数

index (Number) : 从 0 开始计数

示例

查找第二行

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:eq(1)")

结果:

[ <tr><td>Value 1</td></tr> ]

---------------------------------------------------------------------------------------

:gt(index)

匹配所有大于给定索引值的元素

Matches all elements with an index above the given one.

返回值

Array<Element>

参数

index (Number) : 从 0 开始计数

示例

查找第二第三行,即索引值是1和2,也就是比0大

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:gt(0)")

结果:

[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

---------------------------------------------------------------------------------------

:lt(index)

匹配所有小于给定索引值的元素

Matches all elements with an index below the given one.

返回值

Array<Element>

参数

index (Number) : 从 0 开始计数

示例

查找第一第二行,即索引值是0和1,也就是比2小

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:lt(2)")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

---------------------------------------------------------------------------------------

:header

匹配如 h1, h2, h3之类的标题元素

Matches all elements that are headers, like h1, h2, h3 and so on.

返回值

Array<Element>

示例

给页面内所有标题加上背景色

HTML 代码:

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

jQuery 代码:

$(":header").css("background", "#EEE");

结果:

[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
---------------------------------------------------------------------------------------

:animated

匹配所有没有在执行动画效果中的元素

Matches all elements that are currently being animated.

返回值

Array<Element>

示例

只有对不在执行动画效果的元素执行一个动画特效

HTML 代码:

<button id="run">Run</button><div></div>

jQuery 代码:

$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+20" }, 1000);
});

---------------------------------------------------------------------------------------

:contains(text)

匹配包含给定文本的元素

Matches elements which contain the given text.

返回值

Array<Element>

参数

text (String) : 一个用以查找的字符串

示例

查找所有包含 "John" 的 div 元素

HTML 代码:

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:

$("div:contains('John')")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

---------------------------------------------------------------------------------------

:empty

匹配所有不包含子元素或者文本的空元素

Matches all elements that are empty, be it elements or text.

返回值

Array<Element>

示例

查找所有不包含子元素或者文本的空元素

HTML 代码:

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:empty")

结果:

[ <td></td>, <td></td> ]
---------------------------------------------------------------------------------------

:has(selector)

匹配含有选择器所匹配的元素的元素

Matches elements which contain at least one element that matches the specified selector.

返回值

Array<Element>

参数

selector (Selector) : 一个用于筛选的选择器

示例

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:

<div><p>Hello</p></div>
<div>Hello again!</div>

jQuery 代码:

$("div:has(p)").addClass("test");

结果:

[ <div class="test"><p>Hello</p></div> ]

---------------------------------------------------------------------------------------

:parent

匹配含有子元素或者文本的元素

Matches all elements that are parents - they have child elements, including text.

返回值

Array<Element>

示例

查找所有含有子元素或者文本的 td 元素

HTML 代码:

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:parent")

结果:

[ <td>Value 1</td>, <td>Value 1</td> ]
 
Javascript 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 #Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 #Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 #Javascript
jquery 学习之二 属性(类)
Nov 25 #Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 #Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 #Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 #Javascript
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
PHP编程函数安全篇
2013/01/08 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python 实现简单的客户端认证
2020/07/29 Python
详解anaconda安装步骤
2020/11/23 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
清洁工岗位职责
2015/02/13 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
跑出一片天观后感
2015/06/08 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
AJAX学习笔记
2021/05/18 Javascript