JQuery强大的选择器

主要可分为:[color=red]基本选择器,层次选择器,过滤选择器,表单选择器[/color]
[align=center][color=red]基本选择器[/color][/align]
[table]
|* | $(*) | 所有元素|
|#id | $("#name") | id=name的元素|
|.class | $(".info") | class=info的元素|
|element | $("P") | 所以<p>元素|
|element1,element2,…… | $("a,p,h1") | 取<a>、<p>,<h1>的并集|
[/table]
[align=center][color=red]层次选择器[/color][/align]
父元素和子元素之间是层次关系
后代元素指子元素、孙子元素等……
子元素则是直接儿子
[table]
|选择器|描述|返回|示例|
|$(“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元素|
|$(“prev ~siblings”)|选取prev元素之后的所有的sinlings元素|集合元素|$(“#two~div”)选取id为two的元素后面所有的<div>兄弟元素|
[/table]
[align=center][color=red]过滤选择器[/color][/align]
1、基本过滤
2、内容过滤
3、可见性过滤
4、属性过滤
5、子元素过滤
6、表单对象属性过滤
[color=blue]基本过滤[/color]
[table]
|选择器|描述|返回|示例|
|:header|选取所有的标题元素,h1,h2,h3…等等|集合元素|$(“:header”)选取网页中所有的<h1> <h2> <h3>。。等等节点|
|:animated|选取当前正在执行动画效果的所有元素|集合元素|$(“div:animated”)表示选取所有正在执行动画效果的div元素|
|:first|选取第1个元素|单个元素|$(“div:first”)表示选取所有<div>元素中的第一个<div>元素|
|:last|选取最后1个元素|单个元素|$(“div:last”)表示选取所有<div>元素中的最后一个<div>元素|
|:not(selector) |去除所有与给定的选择器匹配的元素|集合元素|$(“div:not(.one)”)表示选取class不是one的所有div元素|
|:even|选取索引是偶数的所有元素,索引从0开始|集合元素|$(“div:even”)表示选取所有索引为偶数的<div>元素|
|:odd|选取索引是奇数的所有元素,索引从0开始|集合元素|$(“div:odd”)表示选取所有索引为奇数的<div>元素|
|:eq(index)|选取索引等于index的元素,索引从0开始|单个元素|$(“div:eq(1)”)选取索引的等于1的<div>元素|集合元素|$(“div:gt(1)”)选取索引的大于1的<div>元素|
|:lt(index)|选取索引小于index的元素,索引从0开始|集合元素|$(“div:lt(1)”)选取索引的小于1的<div>元素|
[/table]
[color=blue]内容过滤[/color]
[table]
|选择器|描述|返回|示例|
|:contains(text)|选取含有文本内容为“text”的元素|集合元素|$(“div:contains(‘我’)”)选取含有文字“我”的div元素|
|:empty|选取不包含子元素或者文本元素的空元素|集合元素|$(“div:empty”)表示选取不包含子元素(包括文本元素)的<div>元素|$(“div:has(p)”)选取含有<p>节点的<div>元素|
|:parent|选取含有子元素或者文本元素的元素|集合元素|$(“div:parent”)选取拥有子元素(包括文本元素)的<div>元素|
[/table]
[color=blue]可见性过滤[/color]
[table]
|选择器|描述|返回|示例|
|:hidden|选取不可见的元素|集合元素|$(“:hidden”)选取所有隐藏元素。只想选取隐藏域的话,可以用$(“input:hidden”)。
只想选取隐藏的div的话,可以用$(“div:hidden”)。
<input type=”hidden”/>
<div style=”display:none”>
<div style=”visibility:hidden”>|
|:visible|选取所有可见的元素|集合元素|$(“div:visible”)表示选取可见的<div>元素|
[/table]
[color=blue]属性过滤[/color]
[table]
|选择器|描述|返回|示例|
|[attribute]|选取拥有此属性的元素|集合元素|$(“div[id]”)选取拥有id属性的<div>元素|
|[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^=test]”)选取title属性含有”test”的<div>元素|
|[selector1] [selector2] [selectorN]|用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围|集合元素|$(“div[id][title*=test]”)选取拥有id属性,并且title属性的值包含“test”的<div>元素|
[/table]
[color=blue]子元素过滤[/color]
[table]
|选择器|描述|返回|示例|
|:nth-child(index/even/odd)|选取每个父元素下的第index个或者奇偶元素|集合元素|:eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始编号的,而:eq(index)是从0开始编号的|
|:first-child|选取每个父元素的第1个子元素|集合元素|:first只返回单个元素,而:first-child将为每个父元素匹配第1个子元素。
$(“ul li:first-child”)|
|:last-child|选取每个父元素的最后一个子元素|集合元素|:last只返回一个元素,而:last-child则为每个父元素选取最后一个子元素,所以是个集合。
$(“ul li:last-child”)选择每个<ul>的最后一个<li>元素|
|:only-child|如果某个元素是它父元素中的唯一的子元素,那么将会被匹配。如果父元素含有其他元素,则不会被匹配|集合元素|$(“ul li:only-child”)将在<ul>中选择是唯一子元素的<li>元素|
[/table]
[color=blue]表单对象属性过滤[/color]
[table]
|选择器|描述|返回|示例|
|:enabled|选取所有可用元素|集合元素|$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素|
|:disabled|选取所有不可用元素|集合元素|$(“#form1 :disabled”)选取id为form1的表单内的所有不可用元素|
|:checked|选取所有被选中的元素(单选框,复选框)|集合元素|$(“input:checked”)选取所有被选中的input元素|$(“select :selected”)选取所有被选中的选项元素|
[/table]
[align=center][color=red]表单选择器[/color][/align]
[table]
|选择器|描述|返回|示例|
|:input|选取所有的<input>、<textarea>、<select>、<button>元素|集合元素|$(“:input”) 选取所有的<input>、<textarea>、<select>、<button>元素|
|:text|选取所有的单行文本框|集合元素|$(“:text”)则选取所有的单行文本框|
|:password|选取所有的密码框|集合元素|示例|
|:radio|选取所有的单选框|集合元素|示例|
|:checkbox|选取所有的多选框|集合元素|示例|
|:submit|选取所有的提交按钮|集合元素|示例|
|:image|选取所有的图像按钮|集合元素|示例|
|:reset|选取所有的重置按钮|集合元素|示例|
|:button|选取所有的按钮|集合元素|示例|
|:file|选取所有的上传域|集合元素|示例|
|:hidden|选取所有的不可见元素|集合元素|示例|
[/table]
[color=red]注:[/color]
<button></button>这个元素即是:(:submit)也是(;button)
对于(:hidden)
在火狐上算<br/>和<hidden>元素
在IE上算<select>和<hidden>元素
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值