您的位置：首页 > Web前端 > JQuery

jquery自学系列三：选择器（下）

2012-04-16 15:33 253 查看
二）层次选择器

jquery层次选择器

选择器描述返回示例
$("ancestor descendant")选取ancestor元素里所有的descendant（后代）元素集合元素$("div span")选取<div>里的所有<span>元素
$("parent>child")选取parent元素下的子元素child集合元素$("div > span")选取<div>下直接子元素<span>
$("prev+next")选取紧接在prev元素后的next元素集合元素$(".one+div")选取class为one的下一

个<div>元素

等同于$(".one").next("div")

$("prev~siblings")选取prev元素之后的所有siblings元素集合元素$("#two ~ div")选取id为two的元素后面

的所有<div>兄弟元素

等同于$("#two").nextAll("div")

三）jquery过滤选择器：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤

基本过滤

选择器描述返回示例
:first选取第一个元素单个元素$("div:first")选取所有<div>元素中第一个<div>元素
:last选取最后一个元素单个元素$("div:last")选取所有<div>元素中最后一个<div>元素
:not(seletor)除去所有与给定选择器匹配的元素集合元素$("input:not(.myclass)")选取class不是myclass的<input>元素
:even选取索引是偶数的所有元素，索引从0开始集合元素$("input:even")选取索引是偶数的<input>元素
:odd选取索引是奇数的所有元素，索引从0开始集合元素$("input:odd")选取索引是奇数的<input>元素
:eq(index)选取索引等于index的元素，索引从0开始单个元素$("input:eq(1)")选取索引是1的<input>元素
:gt(index)选取索引大于index的元素，索引从0开始集合元素$("input:gt(1)")选取索引大于1的<input>元素，不包括1
:lt(index)选取索引小于index的元素，索引从0开始集合元素$("input:lt(1)")选取索引小于1的<input>元素，不包括1
:header选取所有的标题元素，如h1,h2……集合元素$(":header")选取网页中所有的<h1>,<h2>,<h3>……
:ainmated选取当前正在执行动画的所有元素集合元素$("div:animated")选取正在执行动画的<div>元素
内容过滤

选择器描述返回示例
:contains(text)选取含有文本内容为“text”的元素集合元素$("div:contains('wo')")选取

含有文本‘wo’的div元素
:empty选取不包换子元素或文本的空元素集合元素$("div:empty")选取不包换子元素

的<div>空元素
:has(selector)选取含有选择器所匹配的元素的元素集合元素$("div:has(p)")选取含有<p>元素

的<div>元素
:parent选取含有子元素或者文本的元素集合元素$("div:parent")选取游泳子元素

的<div>元素
可见性过滤

选择器描述返回示例
:hidden选取所有不可见元素集合元素$(":hidden")选取所有不可见的元素，包括<input type="hidden">,

<div style="display:none;">,<div style="visibility:none;">等元素。

如果只想选取<input>元素，可以使用$("input:hidden")
:visible选取所有可见元素集合元素$("div:visible")选取所有可见的<div>元素
属性过滤

选择器描述返回示例
[attribute]选取拥有此熟悉的元素集合元素$("div[id]")选取拥有属性id的元素
[attribute=value]选取属性的值为value的元素集合元素$("div[title=test]")选取属性title为“test”的<div>元素
[attribute!=value]选取属性的值不等于value的元素集合元素$("div[title!=test]")选取属性title不为“test”的<div>

元素，注意：没有属性title的<div>元素也会被选取
[attribute^=value]选取属性的值以value开始的元素集合元素$("div[title^=test]")选取属性title以“test”开始

的<div>元素
[attribute$=value]选取属性的值以value结束的元素集合元素$("div[title$=test]")选取属性title以“test”结束

的<div>元素
[attribute*=value]选取属性的值含有value的元素集合元素$("div[title*=value]")选取属性title含有“test”

的<div>元素
[selector1][selector2]

[selectorN]		用属性选择器合并成一个复合属性

选择器，满足多个条件，没选择一

次，缩小一次范围		集合元素$("div[id][title$='test']")选取拥有属性id并且属性

title以“test”结束的<div>元素
子元素过滤

选择器描述返回示例
:nth-child(index/even/

odd/equation)		选取每个父元素下的第index个子元素

或者奇偶元素（index从1算起）		集合元素:eq(index)只匹配一个元素，而:nth-child为每个父元素匹配

子元素并且:nth-child(index)的index是从1开始的，

而:eq(index)是从0开始的
:first-child选取每个父元素的第一个子元素集合元素:first只返回单个元素，而:first-child选择符为每个父元素匹配

第一个子元素。

例如：$("ul li:first-child");选取每个<ul>中第一个<li>
:last-child选取每个父元素的最后一个子元素集合元素:last只返回单个元素，:last-child为每个父元素匹配最后一个

子元素

例如：$("ul li:last-child");选择每个<ul>中的最后一个<li>
:only-child如果某个元素是他父元素中的唯一

子元素，那么将会被匹配。如果

父元素中含有其他元素，则不会

匹配		集合元素$("ul li:only-child") 在<ul>中选取是唯一子元素的<li>元素
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航