JQuery学习笔记二：选择器

过滤器学习笔记

过滤器都是[:]之后跟相应的内容

1.  基本过滤器

$('li:first').css('color', 'red');//全局第一个li标签变红
$('li').first().css('color', 'red');
$('li:first').css('color', 'red'); //全局最后一个li标签变红
$('li').last().css('color', 'red');
$('ul:first li:last').css('color', 'red');//第一个ul的最后一个li变红
$('li:not(.aaa)').css('color', 'red');//class不为aaa的li标签全部变红
$('li').not('.aaa').css('color', 'red');
$('li:even').css('color', 'red');//顺序是偶数的li标签变红（从0开始）
$('li:odd).css('color', 'red');//顺序是奇数的li标签变红（从0开始）
$('li:eq(3)').css('color', 'red');//第四个li标签变红
$('li').eq(3).css('color', 'red');
$('li:eq(-2)').css('color', 'red');//倒数第二个li标签变红
$('li:gt(3)').css('color', 'red');//索引值大于3的变红
$('li:lt(3)').css('color', 'red');//索引值小于3的变红
$(':header').css('color', 'red');//全局所有
-
标签变红
$('div :header').css('color', 'red');//div的后代中所有
-
标签变红
//---中间是整体
$('input').get(0).focus();//默认获取焦点
$(':focus').css('background', 'red');//使获取焦点对象背景为红色，必须为初始状态
//---

2.  内容过滤器

$('div:contains("aliyun")').css('color', 'red');//包含aliyun的div变红
$('div:empty').css('background', 'red').css('height', '20px');内容为空的div背景设置成红色且高度设置成20px
$('ul:has(.aaa)').css('color', 'red');//有aaa类的ul的所有元素变红
$('div:parent').css('color', 'red');//内容不为空的div变红，与empty相对

3.  可见性过滤器

$('div:hidden').css('color', 'red').show(1000);//找到隐藏的div，动画1s显示
$('div:visible');//找到正常显示的div

4.  子元素过滤器

$('li:first-child').css('color', 'red').show(1000);//选取li作为第一个子元素时的li变红
$('li:last-child').css('color', 'red').show(1000);// 选取li作为最后一个子元素时的li变红
$('li:only-child').css('color', 'red').show(1000);//选取li作为唯一子元素时的li变红
$('li:nth-child(even)').css('color', 'red').show(1000);//根据条件选择li子节点，此处是偶数（even），索引从1开始。条件还可以为odd,equal(int)。

5.  其它方法

alert($('.aaa').is('li'));//有没有包含aaa类的li标签
alert($('.aaa').is($('li').get(1)));//第二个li标签是否包含aaa类（DOM）
alert($('.aaa').is($('li').eq(1)));//精确查找第二个li标签是否包含aaa类
//---中间是整体
//是否有包含aaa类且title属性为a1的节点存在
alert($('.aaa').is(function(){
    return $(this).attr('title') == 'a1';
}));
//---
alert($('li').eq(1).hasClass('aaa'));//第二个li是否包含aaa类
$('li').slice(1, 3).css('color', 'red');//索引为1-3的元素变红，包括1，不包括3
$('li').slice(1).css('color', 'red');//索引1之后的全部变红
alert($('div').contents().size());//查找到所有内容，包括文本，children()只能查找出非文本
$('li').filter('.aaa, :last, :first-child').css('color', 'red'); //filter自由组合，中间用[,]隔开，灵活
//---中间是整体
//找出包含aaa类且title属性是a1的li节点
$('li').filter(function(){
    return $(this).hasClass('aaa') && $(this).attr('title')=='a1';
}).css('color', 'red');
//---