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();


})