[转]jquery 常用的选择器

元素选择器

$("#box")  //选择id值等于box的元素，id值是唯一的，如果出现多个相同id的元素，那么只获取第一个元素

$("div")  //选择所有的div标签元素，返回div元素数组

$(".box")  //选择使用box类的css的所有元素

$("*")  //选择文档中所有的元素

$("p.intro")  //选取所有 class="intro" 的 <p> 元素

$("p#demo")  //选取所有 id="demo" 的 <p> 元素

属性选择器

$("[href]")  //选取所有带有 href 属性的元素

$("[href='#']")  //选取所有带有 href 值等于 "#" 的元素

$("[href!='#']")  //选取所有带有 href 值不等于 "#" 的元素

$("[href$='.jpg']")  //选取所有 href 值以 ".jpg" 结尾的元素

层级选择器

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

$("#box > *")  //选择id值为box里的所有子元素

$("div > li")  //选择div下第一层的li。

例如：

<div> 
    <li>1</li><!-- 返回我 --> 
    <li>2</li><!-- 返回我 --> 
    <span>3</span> 
    <ul> 
        <li>4</li> 
    </ul> 
</div> 
<li>5</li> 

$("li + input") //选择所有li标签兄弟节点下面是b标签的，返回b标签。例如：

<li>1</li> 
<b>2</b><!-- 返回我 --> 
<b>3</b> 
<b>4</b> 
<li>5</li> 
<b>6</b><!-- 返回我 --> 

$(“box ~ li”) //同胞选择器，返回box下第一层的li

<div> 
    <li>1</li><!-- 返回我 --> 
    <li>2</li><!-- 返回我 --> 
    <span>3</span> 
    <ul> 
        <li>4</li> 
    </ul> 
</div> 

过滤选择器

$("li:first")  //选择所有li元素的第一个 

$("li:last")  //选择所有li元素的最后一个 

$("li:even")  //选择所有的li元素中的第0，2，4...个元素，从0开始计算。

$("li:odd")  //选择所有的li元素的第1，3，5...个元素，从0开始计算。

$("li:eq(2)")  //选择所有的li元素中的第2个li，从0开始计算。

$("li:gt(4)")  //选择li元素中第四个后面的li元素，从0开始计算。

$("li:lt(4)")  //选择li元素中第四个前面的li元素，从0开始计算。

$(":header")  //选择h1、h2、h3之类的，如果有h7也会被选上。

$("div:animated")  //选择正在执行动画效果的元素

内容过滤选择器

$("p:contains('ma')")  //选择所有p标签中包含有'ma'文本的元素 

$("div:empty")  //选择所有不包含任何文本不包含任何标签的div元素。 

$("div:has(p)")  //选择所有包含有p标签的div元素 

$("div:parent")  //选择所有包含文本或者包含节点的div元素。 

CSS过滤选择器

$("div:hidden")  //选择所有的被hidden(隐藏)的div元素 

$("div:visible")  //选择所有的可视化的div(显示)元素

属性过滤选择器

$("div[id]")  //选择所有含有id属性的div元素 

$("input[name='user']")  //选择所有的name属性等于'user'的input元素

$("input[name!='user']")  //选择所有的name属性不等于'user'的input元素

$("input[name^='tag']")  //选择所有的name属性以'tag'开头的input元素 

$("input[name$='tag']")  // 选择所有的name属性以'tag'结尾的input元素 

$("input[name*='tag']")  //选择所有的name属性包含'tag'的input元素

$("input[name*='ma'][name$='cn']") //组合使用。选择name包含'ma'，且以'cn'结尾的input。例如：<input type="text" name="maweb.cn">

$("li:nth-child(2)")  //选择所有li当中的第二个li，和eq的区别在于eq是从0计算，这个是从1计算。

$("li:nth-child(odd)")  //选择li当中的第1,3,5...li。

$("li:nth-child(2n)")  //选择所有li当中的第2,4,6...li。括号中的2可以为其它数。

$("li:nth-child(2n + 1)")  //从第一个li开始，每隔2个li选择一次。返回,1,3,5..。 例如：$("li:nth-child(3n + 2)")选择器返回：2,5,8..

$("div span:first-child")  //返回所有的div元素的第一个子节点的数组 

$("div span:last-child")  //返回所有的div元素的最后一个节点的数组 

$("div li:only-child")  //返回所有的div中只有唯一一个子节点，并且是li的，返回这个li。

<div> 
    <li>1</li><!-- 返回我 --> 
</div> 
<div> 
    <li>2</li> 
    <li>3</li> 
</div> 
<div> 
    <li>4</li> 
    <span>5</span> 
</div> 

表单选择器

$(":input")  //选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text")  //选择所有的type=text的input元素，如果input没设置任何type也会被选中。 

$(":password")  //选择所有type=password的input元素 

$(":radio")  //选择所有type=radio的input元素 

$(":checkbox")  //选择所有type=checkbox的input元素 

$(":submit")  //选择所有type=submit的input元素 

$(":image")  //选择所有的type=image的input元素 

$(":reset")  //选择所有type=reset的input元素 

$(":button")  //选择所有type=button的input元素 

$(":file")  //选择所有type=file的input元素 

$(":hidden")  //选择所有type=hidden和css隐藏的input元素。也会选择head,meta,title,script...等

表单过滤选择器

$(":enabled")  //选择所有非disabled(禁止)属性的input

$(":disabled")  //择所有的禁止(disabled)的表单元素 

$(":checked")  //选择所有的被checked的表单元素 

$("select option:selected")  //选择下拉框当前选中项元素