jQuery学习笔记3:过滤器
1 基本过滤器
样例:
$('li:first').css('background', '#ccc'); //第一个li元素
$('li:last').css('background', '#ccc'); //最后一个li元素
$('#box li:last').css('background', '#ccc'); //ul的id为box内的最后一个li元素
$('ul:first li:last').css('background', '#ccc'); //第一个ul内的最后一个li元素
$('li:not(.red)').css('background', '#ccc'); //li的class不为red的所有li元素
$('li:even').css('background', '#ccc'); //索引为偶素的li元素
$('li:odd').css('background', '#ccc'); //索引为奇数的li元素
$('li:eq(2)').css('background', '#ccc'); //li索引为2即第三个li元素
$('li:eq(-2)').css('background', '#ccc'); //倒数第二个li元素
$('li:gt(3)').css('background', '#ccc'); //索引大于3的所有li元素
$('li:lt(2)').css('background', '#ccc'); //索引小于2的所有li元素
$('div :header').css('background', '#ccc'); //页面所有h1~h6元素
$('input').get(0).focus(); //初始化**input元素为焦点
$(':focus').css('background', 'red'); //被焦点的元素
对应的专用方法:
$('li').first().css('background', '#ccc');
$('li').last().css('background', '#ccc');
$('li').not('.red').css('background', '#ccc');
$('li').eq(2).css('background', '#ccc');
备注:索引值是从0开始的,从上向下顺序递增的;若索引值为复数,索引值是从-1开始的,从下向上递减的。
2 内容过滤器
样例:
$('div:contains("文本1")').css('background', '#ccc'); //选择含有”文本1“内容的div元素
$('div:empty').css('background', '#ccc').css('height','20px'); //选择空div元素
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class为red的所有ul元素
$('div:parent').css('background', '#ccc'); //选择非空div元素
方法:
$('ul').has('.red').css('background', '#ccc');
操作节点方法:
$('li').parent().css('background', '#ccc'); //获取当前元素的父元素
$('li').parents().css('background', '#ccc'); //获取当前元素的父元素及祖先元素
$('li').parentsUntil('body').css('background', '#ccc'); //选择当前元素父元素遇到div父元素停止
3 可见性过滤器
注意:hidden过滤器一般包含的内容为:(1)css样式为display:none(2)input表单类型为type="hidden"(3)元素属性visibility:hidden
样例:
alert($('div:hidden').size());
$('div:hidden').css('background', '#ccc').show(1000);
alert($('div:visible').size());
4 子元素过滤器
备注:索引值是从1开始计算的。
样例:
$('li:first-child').css('background', '#ccc'); //每个父元素第一个li元素
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li元素
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li元素
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素奇数li元素
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素偶数li元素
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第二个li元素
$('li:nth-child(2n)').css('background', '#ccc'); //每个父元素第2、4、6、8...个li元素
5 其他方法
样例:
alert($('.red').is('li')); //检测元素li的class值是否为red
alert($('.red').is($('li'))); //jQuery对象集合,检测li元素的class值是否为red
alert($('.red').is($('li').get(2))); //DOM对象,检测第三个li元素的class值是否为red
alert($('.red').is($('li').eq(2))); //jQuery对象,单个,检测第三个li元素的class值是否为red
alert($('.red').is(function () {
return $(this).attr('title') == '列表3';
}));
注意:必须使用$(this)来表示要判断的元素,否则,不管function里面是否返回true或false都和调用的元素无关了。
alert($('li').eq(2).hasClass('red')); //和is功能类似,但只能传递class
$('li').slice(0,2).css('color', 'red'); //前两个变成红色
$('li').slice(2).css('color', '#ccc'); //从第三个开始到最后都选定
$('li').slice(0, -2).css('color', '#ccc'); //从倒数第三个位置开始,向前选定所有
$('li').slice(2, -2).css('color', '#ccc'); //除前两个和末尾两个之外所有都选定
alert($('#box').find('li').end().get(0)); //可能是并行节点,也可能是父节点
alert($('#box').find('li').parent().get(0)); //父节点
$('li').filter('.red, :first-child, :last-child').css('background', '#ccc');
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc');
本文转自stock0991 51CTO博客,原文链接:http://blog.51cto.com/qing0991/1358549,如需转载请自行联系原作者