惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

H
Hackread – Cybersecurity News, Data Breaches, AI and More
G
Google Developers Blog
The GitHub Blog
The GitHub Blog
Jina AI
Jina AI
A
About on SuperTechFans
MongoDB | Blog
MongoDB | Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园_首页
Blog — PlanetScale
Blog — PlanetScale
酷 壳 – CoolShell
酷 壳 – CoolShell
Google DeepMind News
Google DeepMind News
D
DataBreaches.Net
B
Blog RSS Feed
大猫的无限游戏
大猫的无限游戏
美团技术团队
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
L
LangChain Blog
WordPress大学
WordPress大学
S
SegmentFault 最新的问题
腾讯CDC
Hugging Face - Blog
Hugging Face - Blog
阮一峰的网络日志
阮一峰的网络日志
H
Help Net Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

博客园 - 滋心

为hover事件加上延迟 面向对象的JavaScript(2)闭包 面向对象的JavaScript(1):创建简单的类 JQuery画细线表格 自定义控件验证页面所有文本框 - 滋心 - 博客园 LinQ in Action 笔记三:Hello LINQ to SQL LinQ in Action 笔记二:Hello LINQ to XML LinQ in Action 笔记一、Hello LINQ to Objects JQuery选择器插件 Extra selectors 利用Repeater控件显示主-从关系数据表 查询表结构 Sqlserver建立和另外数据库的连接 XPath实例教程十九、ancestor-or-self 轴(axis)包含上下文节点本身和该节点的祖先节点 XPath实例教程十八、descendant-or-self 轴 XPath实例教程十七、preceding轴 XPath实例教程十六、following轴 XPath实例教程十五、preceding-sibling 轴 XPath实例教程十四、following-sibling轴 XPath实例教程十三、ancestor轴
JQuery选择器 - 滋心 - 博客园
滋心 · 2007-03-16 · via 博客园 - 滋心

JQuery选择器是CSS1-3、XPath的结合物

支持以下CSS查询器的语法
1、 任何元素
示例:

//选择所有元素
$("*");

2、E  所有类型为E的元素
示例:

//选择所有div元素
$("div")

3、E:nth-child(n) 所有类型为E并且是其父元素的第n个子元素的元素
示例:

$("div:nth-child(1)");

HTML标记

<body>
    
<div id="div1"></div>
    
<div id="div2"></div>
</body>

结果

[  <div id="div1"></div>  ]

HTML 标记

<body>
    
<div id="div1">
        
<div id="div3"></div>
        
<div id="div4"></div>
    
</div>
    
<div id="div2">
        
<div id="div5"></div>
    
</div>
</body>

结果

[  <div id="div1"><div id="div3"></div><div id="div4"></div></div>  <div id="div3"></div>  <div id="div5"></div>  ]

4、E:first-child 等同于 div:nth-child(1)
5、E:last-child 等同于 div:nth-child(n) n为最后一个元素的索引
6、E:only-child 所有类型为E并且是其父元素的唯一子元素的元素
7、E:empty  所有类型为E并且子元素为空的元素
示例:

$("div:empty");

HTML标记

<body>
    
<div id="div1">aaaaa</div>
    
<div id="div2"></div>
</body>

结果

[  <div id="div2"></div>  ]

8.E:enabled  所有类型为E并且处于可用状态的元素
示例:

$("input:enabled");

HTML标记

<body>
    
<input id="btn1" type="button" />
    
<input id="btn2" type="button" disabled="disabled" />
</body>

结果

[  <input id="btn1" type="button" />  ]

9、E:disabled  与 E:enabled相反
10、E:checked  所有类型为E并且处于选中状态的元素( 只适用于radio-button 或者 checkbox)
11、E:selected 所有类型为E并且处于选中状态的元素( 只适用于一个或多个option 元素内部的选择)
12、E.warning 所有类型为E并且class属性值为warning的元素
13、E#myid 类型为E并且id为“myid”的元素(最多匹配一个元素)
14、E:not(s) 所有类型为E并且不匹配s选择器
15、E F 所有祖先元素为E的F元素
示例:

$("div input")

HTML标记

<body>
    
<div id="div1">
        
<table>
            
<tr>
                
<td><input type="button" id="btn1"/></td>
            
</tr>
        
</table>
    
</div>
    
<div id="div2"></div>
    
<input type="button" id="btn2"/>
</body>

结果

[  <input type="button" id="btn1"/>  ]

16、E > F 所有父元素为E的F元素
17、E + F 所有前面兄弟元素为E的F元素
18、E ~ F 所有后面兄弟元素为E的F元素
19、E,F,G 所有的E元素、F元素、G元素

以下是JQuery支持但是和CSS不同的选择器
1、E[@foo] 所有包含foo属性的类型为E的元素
2、E[@foo=bar] 所有包含foo属性的值为bar的类型为E的元素
3、E[@foo^=bar] 所有包含foo属性的值以bar开头的类型为E的元素
4、E[@foo$=bar] 所有包含foo属性的值以bar结尾的类型为E的元素
5、E[@foo*=bar] 所有包含foo属性的值包含bar的类型为E的元素

支持XPath的选择器都比较好理解
详细的参考http://docs.jquery.com/Selectors

posted on 2007-03-16 23:13  滋心  阅读(550)  评论()    收藏  举报