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

jQuery 选择器

2016-07-16 22:37 507 查看
  jQuery选择器返回的永远是一个伪数组对象，如果没有找到指定的元素，则会返回一个空的伪数组对象。

一、基本选择器

选择器

实例

选取

*

$("*")

所有元素

#id

$("#lastname")

id="lastname" 的元素

.class

$(".intro")

所有 class="intro" 的元素

element

$("p")

所有 <p> 元素

.class.class   

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素            

s1,s2,s3

$("th,td,.intro")     

所有带有匹配选择的元素

 

二、层级选择器

1、关系选择器

选择器

实例

选取

祖先 后代     

$("from input")

匹配表单下所有的input元素

父>子

$("from>input")

匹配表单下所有的子级input元素（不包括孙代）            

前+后

$("label+input")

匹配所有跟在label后面的input元素

前~兄弟

$("from~input")     

匹配所有与表单同辈的input元素

2、子元素选择器

选择器

选取 

:nth-child      

匹配其父元素下的第n个子或奇偶元素                                

:first-child

匹配第一个子元素

:last-child

匹配最后一个子元素

:only-child       

匹配父元素中唯一的子元素 

 

 

三、过滤选择器

1、定位过滤器

选择器

实例

选取

:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素

:odd

$("tr:odd")

所有奇数 <tr> 元素

:eq(index)

$("ul li:eq(3)")

列表中的第四个元素（index 从 0 开始）         

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)     

$("input:not(:empty)")     

所有不为空的 input 元素

 

2、内容过滤器

选择器

实例

选取

:contains(text)    

$(":contains('W3School')")  

包含指定字符串的所有元素

:empty

$(":empty")

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

:has

$("div:has(p)")

匹配所有包含p元素的div元素

:parent

$(":parent")

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

 

3、可见过滤器

选择器

实例

选取

:hidden

$("p:hidden")

所有隐藏的 <p> 元素

:visible        

$("table:visible")       

所有可见的表格                           

 

四、属性选择器

选择器

实例

选取

[attribute]

$("[href]")

所有带有 href 属性的元素

[attribute=value]

$("[href='#']")

所有 href 属性的值等于 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 属性的值不等于 "#" 的元素

[attribute$=value]

$("[href$='.jpg']")

所有 href 属性的值包含以 ".jpg" 结尾的元素

[attribute^=value]

$("[href^='abc']")

所有 href 属性的值包含以 "abc" 开始的元素

[attribute*=value]

$("[href*='abc']")

所有 href 属性的值包含以 "abc" 的元素

[selector][selector]

$("input[name*='abc'][id]")

所有name属性值包含”abc”字符串，且包含了id属性的input元素

 

五、表单选择器

1、基本表单选择器

选择器

实例

选取

:input

$(":input")

所有 <input> 元素

:text

$(":text")

所有 type="text" 的 <input> 元素

:password       

$(":password")         

所有 type="password" 的 <input> 元素              

:radio

$(":radio")

所有 type="radio" 的 <input> 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 <input> 元素

:submit

$(":submit")

所有 type="submit" 的 <input> 元素

:reset

$(":reset")

所有 type="reset" 的 <input> 元素

 

2、高级表单选择器

选择器

实例

选取

:enabled       

$(":enabled")           

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被选取的 input 元素                      

:checked

$(":checked")

所有被选中的 input 元素

 

 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航