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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
jquery easyui使用心得
2014/07/07 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
详解jquery和vue对比
2019/04/16 jQuery
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python 自定义装饰器实例详解
2019/07/20 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Unix控制后台进程都有哪些进程
2016/09/22 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
成教自我鉴定
2013/10/27 职场文书
工程部主管岗位职责
2013/11/17 职场文书
学校大课间活动方案
2014/01/30 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
本科生求职信
2014/06/17 职场文书
离婚协议书格式
2014/11/21 职场文书
鼋头渚导游词
2015/02/05 职场文书
酒店温馨提示语
2015/07/14 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
关于开学的感想
2015/08/10 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书