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类库需要的核心代码
Jul 16 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
javascript实现列表切换效果
May 02 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
JavaScript如何判断input数据类型
Feb 06 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
chrome原生方法之数组
2011/11/30 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
java关于string最常出现的面试题整理
2021/01/18 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
心理健康课教学反思
2014/02/13 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
丧事主持词大全
2014/04/02 职场文书
员工安全生产责任书
2014/07/22 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python