jQuery学习笔记--选择器、过滤器片

选择器

1. 根据ID选择

$('#id').css('color','red');

1. 根据标签选择

$('div').css('color','red');

1. 根据class选择

$('.class-div').css('color','red');

1. 通配符选择

$('*').css('color','red');

1. 后代选择

$('div p').css('color','red');
//等价于
$('div').find('p').css('color','red');

1. 子代选择

$('div > p').css('color','red');
//等价于
$('div').children('p').css('color','red');

1. next选择

$('div + p').css('color','red');
//等价于
$('div').next('p').css('color','red');

1. nextAll选择

$('#box ~ p).css('color','red');
//等价于
$('#box').nextAll('p').css('color','red');

1. jQuery提供的其他选择器方法

$('#box').prev('p').css('color','red');//向前选择一个
$('#box').prevAll('p').css('color','red');//向前选择所有
$('#box').siblings('p').css('color','red');//选择同级所有
$('#box').nextUntil('p').css('color','red');//选择后面第一个'P'标签之前的所有
$('#box').prevUntil('p').css('color','red');//选择前面第一个'p'标签之后的所有

1. 属性选择器

$('a[title]').css('color','red');//选择有title属性的<a >标签
$('a[title=num1]').css('color','red');//选择title属性为num1的<a>标签
$('a[title^=num]').css('color','red');//title以num开头
$('a[title$=num]').css('color','red');//title以num结尾
$('a[title|=num]').css('color','red');//title=num,或者title以num-开头
$('a[title!=num1]').css('color','red');//title不等於num1
$('a[title~=num1]').css('color','red');
/*
title以空格进行分组，分组中包含num1,如
<a title="no1 num1 test1'></a>则匹配'no1'、'num1'任一项
*/
$('a[title*=num]').css('color','red');//title属性包含num
$('a[aaa][title=num]').css('color','red');//多属性匹配

1. 其他
2. 11.

过滤器

1. 基本过滤

$('li:first').css('color','red');//选取第一个元素 
$('li').first().css('color','red');//同上一行

$('li:last').css('color','red');//选取最后一个元素
$('li').last().css('color','red');//同上一行

$('li:not(.red)').css('color','blue');//选取class不是red的元素
$('li').not('.red').css('color','blue');//同上一行

$('li:even').css('color','blue');//选取偶数索引元素
$('li:odd').css('color','blue');//选取奇数索引元素

$('li:eq(2)').css('color','blue');//选取指定索引元素，负数从后面开始，最后一个为-1 
$('li').eq(2).css('color','red');//同上一行

$('li.gt(2)').css('color','blue');//选取索引大于值的元素
$('li.lt(2)').css('color','blue');//选取索引小于值得元素

$('div :header').css('color','blue');//选取H1-H6的标题元素
$(':focus').css('color','blue');//选取焦点元素

1. 内容过滤器

$('div:contains("youku.com")').css('color','red');//包含文本
$('div:empty').css('color','red');//空元素

$('ul:has(.red)').css('color','red');//子元素含有class
$('ul').has('.red').css('color','red');//同上一行

$('div:parent').css('color','red');//非空元素

不同于parent过滤器的parent方法

$('li').parent().css('color','red');//选取父元素
$('li').parents().css('color','red');//选取祖先元素
$('li').parentsUntil('body').css('color','red');//选取祖先元素到body停止

1. 可见性过滤器

$('div:hidden').size();//隐藏元素
$('div:visible').size();//可见元素

1. 子元素过滤器

$('li:first-child').css('background-color','#ccc');//每个父元素的第一个li元素
$('li:last-child').css('background-color','#ccc');//每个父元素最后一个li元素
$('li:only-child').css('background-color','#ccc');//每个父元素只有一个li元素
$('li:nth-child(even)').css('background-color','#ccc');//每个父元素偶数li元素
$('li:nth-child(odd)').css('background-color','#ccc');//每个父元素奇数li元素
$('li:nth-child(1)').css('background-color','#ccc');//每个父元素第一个li元素
$('li:nth-child(2n').css('background-color','#ccc');//每个父元素2*n个元素，n从1开始
$('li:nth-child(2n+1').css('background-color','#ccc');//每个父元素2*n+1个元素，n从1开始

1. 其他方法

$('li').filter('.red,:first,:last').css('background-color','#ccc');//多条件过滤
$('li').filter(function(){//自定义方法
    return $(this).attr('class')=='red' && $(this).attr('title')=='列表3';
}).css('background','#ccc');

$('div:first').contents().size();//含文本和子元素
$('div:first').children().size();//只包含子元素

$('li').slice(0,2).css('background-color','#ccc');//开始索引0（从0开始)，结束索引2(从1开始,负数则从后往前数，最后一个-1)

$('.red').is('li');//选择器
$('.red').is($('li').get(2));//dom对象
$('.red').is($('li').eq(2));//jQuery对象
$('.red').is($('li'));//jQuery对象集合
$('.red').is(function(){//自定义方法
    return $(this).attr('title')=='列表3';
})