JQuery之过滤器

/*                过滤器,过滤选择器       1.过滤器的作用,主要是通过特定的约束条件,来更加精确的晒选出目标DOM元素对象       2.过滤器的基本语法类似于CSS中伪类语使用:号开头                一基本过滤器       $('li:first')  选取第一个元素       $('li:last')   选取最后一个元素       $('li:not(.red)')    选取class不是red的li元素       $('li.even')    选取索引(0 开始)是偶数的所有元素       $('li:odd')     选择索引(0 开始)是奇数的所有元素       $('li:eq(2)')    选择索引(0 开始)等于index的元素       $('li:gt(2)')    选择索引(0 开始)大于index的元素       $('li:lt(2)')    选择索引(0 开始)小于index的元素       $(':header')     选择标题元素,h1-h6       $(':animated')    选择正在执行动画的元素       $(':focus')       选择当前被焦点的元素 */ $(function(){     //所有li中第一个元素     $('li:first').css('color','red');     //所有li中最后一个元素     $('li:last').css('color','red');     //ul的id为box的li的最后一个元素     $('#box li:last').css('color','red');     //得到第一个ul的 li的最后一个元素     $('ul:first li:last').css('background','gray');     //得到li的class部位red的li元素     $('li:not(.red)').css('background','red');     //得到所有偶数行li     $('li.even').css('background','gray');     //得到所有奇数行li     $('li:odd').css('background','red');     //得到第三个(下标为2)的元素     $('li:eq(2)').css('background','red');     //得到所有下标大于2的元素     $('li:gt(2)').css('background','black');     //得到所有下标小于2的元素     $('li:lt(2)').css('backgroud','black');     //得到h1-ht所有节点元素     $(':header').css('color','red');     //只得到h1节点元素     $('h1:header').css('color','gray');     //第一个div 为h1的header     $('div:first h1:header').css('color','red');     //得到焦点     $('input').get(0).focus();     //设置得到焦点文本框的字体颜色     $(':focus').css('color','red'); }) /**  *             二 内容过滤器  *      主要是对子元素,以及问呗内容上进行操作,DOM元素对象  *  *   $(':contains("文本内容")')选取含有"文本内容的元素"  *   $(':empty')   选取不包含子元素或空文本的元素  *   $(':has(.red)')选取含有class是red的元素  *   $(':parent')选取含有子元素或文本的元素  *  */ $(function(){     $('div:contains("文本内容1")').css('background','gray');     //不含有任何标签的     $('div:empty').css('background','gray').css('height','20px');     //选取clss是red的父级元素     $('ul:has(.red)').css('background','gray').css('height','20px');     //选取含有子元素或文本元素的父元素     $('div:parent').css('backgroud','gray').css('height','20px');     //效果同上(使用方法的方式)     $('ul').has('.red').css('background','gray');     $('p').parent().css('backgroud','gray').css('height','20px');     $('p').parent().css('backgroud','gray');     //找父级元素知道body结束     $('p').parentsUntil('body').css('backgroud','gray'); })/** *          三 子元素过虑器 * *    通过父元素与子元素的关系获得目标DOM元素对象 * *    $('li:first-child')获取每个父元素的第一个子元素 *    $('li:last-child')获取每个父元素的最后个子元素 *    $('li:only-child')获取只有一个子元素的父元素 *    $('li:nth-child')获取每个自定义元素的元素 */$(function(){    //得到所有第一个li    $('li:first').css('background','gray');    //得到每组第一个li    $('li:first-child').css('backgroud','gray');    //得到每组的最后一个    $('li:last-child').css('backgroud','gray');    //里面只包含一个子标签(目标元素自己)    $('li:only-child').css('backgroud','gray');    //给偶数行(evn),奇数行添加背景色(odd)用来自定义    $('li:nth-child(odd)').css('backgroud','gray');})/** *                  四 常用的方法 *    结合选择器与过滤器的一些常用方法 *   $('.red').is('li');   传递选择器元素,DOM对象,jQuery对象 *   $('li').eq(2).hasClass('red')  其实就是is("."+class) *   $('li').slice(0,2) 选择从start到end位置元素 *   $('div').contents()    获取某元素下面所有元素节点,包括文本节点 *   $('li').filter('.red') 匹配元素的子集构造一个新的jQuery对象 */$(function () {    //返回true或false    //$('.red').is('li');    //使用jQuery对象    alert($('.red').is('li'));    //得到第一个li元素返回true或false    alert($('.red').is('li').get(0));    //不用加参数,是否有class返回true或false    $('li').eq(2).hasClass();    //选中0-4,参数(开始位置,结束位置)    $('li').slice(0,4).css('background','gray');    //获取元素下面所有的元素节点,不包括文本节点    $('div').children().size();    //包含文本节点    $('div').contents().size();})