jquery过滤选择器

---

一、基本过滤选择器

1.first和:last

$(document).ready(function () {
			//取第一个元素	
            $('span:first').css('color', '#FF0000');
            //取最后一个元素
            $('span:last').css('color', '#FF0000');
        });

2.not（取非元素）

<div>div1</div>
<div class="wrap">div2</div>
<script>
$(document).ready(function () {
            $('div:not(.wrap)').css('color', '#FF0000');
        });
</script>

注意：如上代码div1会变色，当div1所在div和div2所在div是父子关系时，div1和div2都会变色。

3.even和:odd

取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数

$(document).ready(function () {
            $('tr:even').css('background', '#EEE'); // 偶数行颜色
            $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
        });

4.eq(x)

取指定索引的元素，索引从0开始

$(document).ready(function () {
            $('tr:eq(2)').css('background', 'red');
        });

5.gt(x)和:lt(x)

取大于x索引或小于x索引的元素

$(document).ready(function () {
            $('ul li:gt(2)').css('color', 'red');
            $('ul li:lt(2)').css('color', 'blue');
        });

6.header

取h1~h6标题元素

$(document).ready(function () {
            $(':header').css('background', 'red');
        });

二、 内容过滤选择器

1.contains(text)

取包含text文本的元素

$(document).ready(function () {
      // dd元素中包含"jQuery"文本的会变色
      $('dd:contains("jQuery")').css('color', '#FF0000');
    });

2 . :empty

取不包含子元素或文本为空的元素

$(document).ready(function () {
            $('dd:empty').html('没有内容');
});

3. :has(selector)

取选择器匹配的元素

$(document).ready(function () {
            // 为包含span元素的div添加边框
            $('div:has(span)').css('border', '1px solid #000');
        });

三、 内容过滤选择器

1. :hidden

取不可见的元素

  $(document).ready(function() {
            $('div:hidden').show(500);
        });

2. :visible

取可见的元素

  $(document).ready(function() {
            $('div:visible').css('background', 'red');
        });

四、属性过滤选择器

1.[attribute]

取拥有attribute属性的元素

  $(document).ready(function() {
            $('a[title]').css('text-decoration',"none");
        });

2.[attribute = value]和[attribute != value]

取attribute属性值等于value或不等于value的元素

 $(document).ready(function() {
           $('a[class=item]').css('color', '#FF99CC');
           $('a[class!=item]').css('color', '#FF6600');
       });

3. [attribute ^= value], [attribute $= value]和[attribute *= value]

attribute属性值以value开始，以value结束，或包含value值

 $(document).ready(function() {
    $('a[title^=jQuery]').css('font-weight', 'bold');
    $('a[title$=jQuery]').css('font-size', '24px');
    $('a[title*=jQuery]').css('text-decoration', 'none');
       });