4-3. jQuery选择器（联合选择器、反选择器、jQuery扩充的选择器）

5）联合选择器

<selector>,<selector>..   

<script type="text/javascript">
$(function () {
    alert($('div,p,a,.class1').length); //选取了5个选择器
});
</script>
<div></div>
<p></p>
<a></a>
<span class="class1"></span>
<span class="class1"></span>

 

6）反选择器

:not(selector) 选取不匹配指定选择器的元素

<script type="text/javascript">
$(function () {
    alert($('div:not(.class2)').length); //3
});
</script>
<div></div>
<div></div>
<div class="class2"></div>
<div></div>
<p></p>
<a></a>

 

7）jQuery扩充的选择器

上面是css中本身就提供的选择器，为了满足更复杂的需求，

jQuery还额外的支持一些选择器，这些选择器不但给我们带来方便还能实现更细的控制。

 

:animated        匹配所有正在执行动画效果的元素

 

:contains(text)    如果元素内或者后代元素内包含指定的文本即被选中

<script type="text/javascript">
$(function () {
    alert($('div:contains("ROBIN.FANG")').length);//2,包含ROBIN.FANG的选择器都要被选中
    $(':contains("ROBIN.FANG")').css('background','pink');
});
</script>
<div>
    <p>ROBIN.FANG</p>
</div>
<div>ROBIN.FANG</div>
<span class="class1"></span>
<span class="class1"></span>
</body>

 

:eq(n)   选择第n个元素（从0开始计数）

 

   :first        选择第一个匹配的元素

   :last        选择最后一个匹配的元素

   :lt(n)        选择序号小于n的所有元素（从0开始计数）

   :gt(n)        选择序号大于n的所有元素（从0开始计数）

   :odd            选择所有奇数元素(从0开始计数)

   :even        选择所有的偶数元素（从0开始计数）

   :has(选择器)        匹配包含 选择器所匹配的元素的元素

   :text        用于表单，匹配所有的单行文本框

   :button        匹配所有按钮（input标签type为button以及<button>标签）

   :checkbox        用于表单，选择所有的复选框（匹配所有复选框）

   :file        用于表单，选择所有的文件上传输入框

   :input        用于表单，选择所有的input元素（匹配所有 input, textarea, select 和 button 元素）

   :password        用于表单，选择所有的密码输入框

   :radio        用于表单，选择所有的单选框

   :submit        用于表单，选择所有的表单提交按钮

   :image        用于表单，匹配所有图像域

   :reset        用于表单，选择所有的表单重置按钮

   :selected        用于表单，匹配所有选中的option元素

   :header        匹配如 h1, h2, h3之类的标题元素

   :hidden        选择所有的被隐藏文件

   :visible        选择所有的可见元素

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