jquery内容过滤选择器 jquery基本过滤选择器

过滤选择器主要是通过特定的过滤规则筛选出所需要DOM元素，该选择器都以“：”开头。
按照不同的过滤规则：过滤选择器可以分为基本过滤、内容过滤，可见性过滤，属性过滤和表单对象属性过滤选择器。

1. :first
   用法: $(”tr:first”) ; 返回值 单个元素的组成的集合
   说明: 匹配找到的第一个元素
   实例：改变第一个 div 元素的背景色为 #0000FF

$(function(){
    $("div:first").css("backgroundColor","#0000FF");
});

2. :last
   用法: $(”tr:last”) 返回值 集合元素
   说明: 匹配找到的最后一个元素.与 :first 相对应.
   实例：改变最后一个 div 元素的背景色为 #0000FF

$(function(){
    $("div:last").css("backgroundColor","#0000FF");
});

3. :not(selector)
   用法: $(”input:not(:checked)”)返回值 集合元素
   说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
   实例：改变class不为 one 的所有 div 元素的背景色为 #0000FF

$(function(){
 $("div:not('.one')").css("backgroundColor","#0000FF");
 });

4. :even
   用法: $(”tr:even”) 返回值 集合元素
   说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
   实例：改变索引值为偶数的 div 元素的背景色为 #0000FF

$(function(){
    $("div:even").css("backgroundColor","#0000FF");
});

5. : odd
   用法: $(”tr:odd”) 返回值 集合元素
   说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
   实例：改变索引值为奇数的 div 元素的背景色为 #0000FF

$(function(){
    $("div:odd").css("backgroundColor","#0000FF");
});

6. :eq(index)
   用法: $(”tr:eq(0)”) 返回值 集合元素
   说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
   实例：改变索引值为等于 3 的 div 元素的背景色为 #0000FF

$(function(){
    $("div:eq(3)").css("backgroundColor","#0000FF");
});

7. :gt(index)
   用法: $(”tr:gt(0)”) 返回值 集合元素
   说明: 匹配所有大于给定索引值的元素.
   实例：改变索引值为大于 3 的 div 元素的背景色为 #0000FF

$(function(){
    $("div:gt(3)").css("backgroundColor","#0000FF");
});

8. :lt(index)
   用法: $(”tr:lt(2)”) 返回值 集合元素
   说明: 匹配所有小于给定索引值的元素.
   实例：改变索引值为小于 3 的 div 元素的背景色为 #0000FF

$(function(){
    $("div:lt(3)").css("backgroundColor","#0000FF");
});

整个selector_filter.js文件的内容

/**
 * 基本过滤选择器
 */
/*实例：改变第一个 div 元素的背景色为 #0000FFs*/
/*
$(function(){
    $("div:first").css("backgroundColor","#0000FF");
});
*/
/*实例：改变最后一个 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:last").css("backgroundColor","#0000FF");
});
*/
/*实例：改变class不为 one 的所有 div 元素的背景色为 #0000FF*/
/*
 $(function(){
 $("div:not('.one')").css("backgroundColor","#0000FF");
 });
 */
/* 实例：改变索引值为偶数的 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:even").css("backgroundColor","#0000FF");
});*/
/*实例：改变索引值为奇数的 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:odd").css("backgroundColor","#0000FF");
});
*/
/*实例：改变索引值为等于 3 的 div 元素的背景色为 #0000FF*/
/*$(function(){
    $("div:eq(3)").css("backgroundColor","#0000FF");
});*/

/*实例：改变索引值为大于 3 的 div 元素的背景色为 #0000FF*/
/*$(function(){
    $("div:gt(3)").css("backgroundColor","#0000FF");
});*/
/*实例：改变索引值为小于 3 的 div 元素的背景色为 #0000FF*/
$(function(){
    $("div:lt(3)").css("backgroundColor","#0000FF");
});

原创不易，有错误的地方希望大家多多指教。动动手指给个赞。