Jquery过滤选择器

过滤选择器

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

基本过滤选择器

• :first 返回第一个元素

//改变第一个 p元素的背景色为红色
$('p:first').css({backgroundColor:'red'});

• :last 返回最后一个元素

//改变最后一个 p元素的背景色为红色
 $('p:last').css({backgroundColor:'red'});

• :not(selector) 去除所有给定原则器匹配的元素

 //改变class不为one的所有 p元素的背景色为红色
   $('p:not(.one)').css({backgroundColor:'red'});

• ：even 选取索引值为偶数的所有元素 （索引从0开始）
• ：odd 选取索引值为奇数数的所有元素（索引从0开始）

$("tr:even").css({backgroundColor:"green"});
$("tr:odd").css({backgroundColor:"red"});

• ：eq(index) 选取索引值等于index的元素（索引从0开始）
• ：gt(index) 选取索引值大于index的元素（索引从0开始）
• ：lt(index) 选取索引值小于index的元素（索引从0开始）

 	   // 改变索引值为大于 3的 li元素的背景色为 红色
       // 改变索引值为等于 3的 li元素的背景色为 绿色
       // 改变索引值为小于 3的 li元素的背景色为 蓝色
       $('li:gt(3)').css({backgroundColor:'red'});
       $('li:eq(3)').css({backgroundColor:'green'});
       $('li:lt(3)').css({backgroundColor:'blue'});

• ：header 选取所有标题元素，如h1-h6

 	   //改变所有的标题元素的背景色为 红色 字体为白色
       $(':header').css({backgroundColor:'red',color:'white'});

• ：animated 选取当前正在执行动画的所有元素

 //改变正在执行动画元素的背景色为 红色
 $(':animated').css({backgroundColor:'red'});