jQuery-过滤选择器一
1、基本过滤选择器
<script type="text/javascript"> $(function(){ $('div:first').css('background','red'); //所有div元素中的第一个div元素 $('div:last').css('background','blue'); //所有div元素中的最后一个div元素 $('div:not(.one)').css('background','green'); //所有class不为one的div元素 $('div:even').css('background','yellow'); //所有索引为偶数的div元素 $('div:odd').css('background','pink'); //所有索引为奇数的div元素 $('div:eq(3)').css('background','black'); //索引值为3的div元素 $('div:gt(3)').css('background','grey'); //索引值大于3的所有div元素(不等于3) $('div:lt(3)').css('background','red'); //索引值小于3的所有div元素(不等于3) $(':header').css('background','pink'); //所有标题元素h1、h2、h3...... $(':animated').css('background','yellow'); //当前正在执行动画的元素 }); </script>
2、内容过滤选择器
<script type="text/javascript"> $(function(){ $('div:contains(di)').css('background','red'); //含有文本di的所有div元素 $('div:empty').css('background','blue'); //不包含子元素(包括文本元素)的div空元素 $('div:has(.mini)').css('background','pink'); //所有包含class为mini的子元素的div $('div:parent').css('background','yellow'); //所有包含有子元素(包括文本素)的div }); </script>
3、可见性过滤选择器
$(function(){
$('div:visible').css('background','red'); //所有可见的div元素
$('div:hidden').show(3000); //所有不可见的div元素
});
:hidden选择器,包括display:none、<input type='hidden' />、visibility:hidden三种