脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 选择器 简单 内容

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

 更新时间：2010年11月25日 18:40:45   作者：  
juqery 学习之三 选择器 简单 内容，学习jquery的朋友可以参考下。

:first

匹配找到的第一个元素

返回值

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

匹配找到的最后一个元素

返回值

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)

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

返回值

Array<Element>

参数

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

示例

查找所有未选中的 input 元素

HTML 代码:

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

jQuery 代码:

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

结果:

[ <input name="apple" /> ]

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

:even

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

返回值

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 开始计数

返回值

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)

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

返回值

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)

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

返回值

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)

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

返回值

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之类的标题元素

返回值

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

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

返回值

Array<Element>

示例

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

HTML 代码:

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

jQuery 代码:

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

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

:contains(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

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

返回值

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)

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

返回值

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

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

返回值

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> ]

相关文章

  • 修改jquery中dialog的title属性方法(推荐)

    修改jquery中dialog的title属性方法(推荐)

    下面小编就为大家带来一篇修改jquery中dialog的title属性方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jQuery文件上传控件 Uploadify 详解

    jQuery文件上传控件 Uploadify 详解

    本文主要介绍jQuery文件上传控件 Uploadify的用法，原作者做了非常详细的备注，有需要的朋友可以参考一下。
    2016-06-06
  • jquery.pagination.js 无刷新分页实现步骤分享

    jquery.pagination.js 无刷新分页实现步骤分享

    jquery.pagination.js 无刷新分页实现步骤分享，需要的朋友可以参考下
    2012-05-05
  • jQuery实现下拉框左右选择的简单实例

    jQuery实现下拉框左右选择的简单实例

    本篇文章主要是对jQuery实现下拉框左右选择的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jquery模拟SELECT下拉框取值效果

    jquery模拟SELECT下拉框取值效果

    说到模拟SELECT框，想必大家第一想到的就是使用javascript吧，其实是jquery也是可以做到的，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-10-10
  • jQuery实现手机号码输入提示功能实例

    jQuery实现手机号码输入提示功能实例

    这篇文章主要介绍了jQuery实现手机号码输入提示功能,实例分析了jQuery针对手机号码的判断与提示相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JQuery学习总结【二】

    JQuery学习总结【二】

    本文主要介绍了JQuery的基本知识，如：JQuery的dom操作，动态创建dom节点，删除节点，document方法等等，文章篇尾处附上实例小练习。需要的朋友可以参考下
    2016-12-12
  • jQuery解析json格式数据简单实例

    jQuery解析json格式数据简单实例

    这篇文章主要介绍了jQuery解析json格式数据的方法,结合实例分析了使用jQuery1.7.2版本的方法解析json格式数据的技巧,需要的朋友可以参考下
    2016-01-01
  • jQuery判断指定id的对象是否存在的方法

    jQuery判断指定id的对象是否存在的方法

    因为jQuery在获得对象的时候，无论要获得的对象是否存在，都会返回jQuery对象。所以，以往的 js 判断是否存在在jQuery是行不通的。
    2015-05-05
  • jquery实现div拖拽宽度示例代码

    jquery实现div拖拽宽度示例代码

    本例为大家演示个比较简单的div拖动，另外可根据自己的需求，添加相应的代码，实现自己的想要的效果，具体如下，喜欢的请支持下
    2013-07-07

最新评论