jQuery学习笔记之选择器（继基础核心篇）

常规选择器
    1、$('input[属性]').val();获取表单内容
表单选择器
    :input 选取所有input button select textarea元素
    :text
    :password
    :radio
    :chechbox
    :submit
    :reset
    :image
    :button
    :file
    :hidden
   都是选取对应的属性的集合元素


表单过滤器
    :enabled 选取所有可用元素
    :disabled 选取所有不可用元素
    :cheched 选取所有被选中的元素。单选和复选字段

    :selected选取所有被选中的元素，下拉列表

过滤选择器jQuery可以兼容IE6-8不兼容的伪类选择器（根据元素的特殊状态来选取元素，它们就是伪类和伪元素。）

基本过滤选择器


选取第一个元素(:first)
       //选择第一个div元素.
      $('#btn1').click(function(){
          $('div:first').css("background","#bfa");
      })
选取最后一个元素(:last)


      //选择最后一个div元素.
      $('#btn2').click(function(){
          $('div:last').css("background","#bfa");
      })1
去除所有的与给定选择器匹配的元素(:not(selector))


      //选择class不为one的 所有div元素.
      $('#btn3').click(function(){
          $('div:not(.one)').css("background","#bfa");
      })
选取索引是偶数的所有元素，索引从0开始(:even)


      //选择 索引值为偶数 的div元素。
      $('#btn4').click(function(){
          $('div:even').css("background","#bfa");
      })
选取索引是奇数的所有元素，索引从0开始(:odd)


      //选择 索引值为奇数 的div元素。
      $('#btn5').click(function(){
          $('div:odd').css("background","#bfa");
      })
选取索引等于指定index的元素，索引从0开始(:eq(index))


      //选择 索引等于 3 的元素，从上往下是0,1,2……从下往上是-1，-2，-3……（注意不是从0开始）
      $('#btn6').click(function(){
          $('div:eq(3)').css("background","#bfa");
      })
选取索引大于指定index的元素，索引从0开始(:gt(index))


      //选择 索引大于 3 的元素
      $('#btn7').click(function(){
          $('div:gt(3)').css("background","#bfa");
      })
选取索引小于指定index的元素，索引从0开始(:lt(index))


     //选择 索引小于 3 的元素
      $('#btn8').click(function(){
          $('div:lt(3)').css("background","#bfa");
      })
选取标题元素(:header)


       //选择 所有的标题元素.比如h1, h2, h3等等...
      $('#btn9').click(function(){
          $(':header').css("background","#bfa");
      })
选取当前正在执行的动画的所有元素(:animated)


      //选择 当前正在执行动画的所有元素.
      $('#btn10').click(function(){
          $(':animated').css("background","#bfa");
      });
选取当前获取焦点的所有元素(:focus)


      //选择 当前获取焦点的所有元素.
      $('#btn11').click(function(){
          $(':focus').css("background","#bfa");
      });


内容过滤选择器


选取包含指定文本的元素(:contains(text))


      //选取含有文本"di"的div元素.注意，里面一个用单引号一个用双引号，不能全都单引号或者全都双引号
      $('#btn1').click(function(){
          $('div:contains(“di”)').css("background","#bbffaa");
      })
选取不包含子元素或文本的空元素(:empty)


      //选取不包含子元素(或者文本元素)的div空元素.
      $('#btn2').click(function(){
          $('div:empty').css("background","#bbffaa");
      })
选取含有选择器匹配元素的元素(:has(selector))


      //选取其子元素含有class为mini的元素.注意选择的是其子元素
      $('#btn3').click(function(){
          $("div:has('.mini')").css("background","#bbffaa");
      })
选取包含子元素或文本的空元素(:parent)


      //选取含有子元素(或者文本元素)的div元素.
      $('#btn4').click(function(){
          $('div:parent').css("background","#bbffaa");
      })
注意这里不能再外面写$('div').parent().css……因为jQuery里有parent的方法，即获取父元素


可见性过滤器


选取不可见的元素(:hidden)


        //选取所有不可见的元素.包括<input type="hidden"/>.
      $('#btn_hidden').click(function(){
          $('div:hidden').show(3000).css("background","#bbffaa");
      })//将隐藏的内容设置背景色，并3秒钟慢慢显现


选取可见的元素(:visible)


      //选取所有可见的元素.
      $('#btn_visible').click(function(){
          $('div:visible').css("background","#FF6500");
      })




子元素过滤选择器


选取每个父元素下的第一个子元素，返回集合元素


      //选取每个父元素div下的第一个子元素
      $('#btn2').click(function(){
          $('div:first-child').css("background","#bbffaa");
      })
选取每个父元素下的最后一个子元素，返回集合元素


      //选取每个父元素div下的最后一个子元素
      $('#btn3').click(function(){
          $('div:last-child').css("background","#bbffaa");
      })
选取每个父元素下的唯一子元素，返回集合元素


      //如果父元素div下的仅仅只有一个子元素，那么选中这个子元素
      $('#btn4').click(function(){
          $('div:only-child').css("background","#bbffaa");
      })
选取每个父元素下的第index个子元素或者奇偶元素odd/even，index从1算起


      //选取每个父元素div下的第3的倍数个子元素
      $('#btn1').click(function(){
          $('div:nth-child(3n)').css("background","#bbffaa");
      })


其他方法


is 判断方法,举例$('li').is('.class')或$('.class').is($('li'))
就是整体检测li中是否有class为.class，返回true和false
精确检测比如$('.class').is($('li').first())就是检测第一个li元素
$('.calss').is(function(){return $(this).attr('title')=='YST';})
这里注意，必须使用$(this)来表示要判断的元素，否则，不管function里面是否返回true或false都和调用的元素无关了


hasClass $('li').eq(2).hasClass(.class)和is一样只不过只能传递class


slice $('li').slice(0,4)从第0个位置选到第4个位置，若slice（2）则是从第二个位置到最后，若slice（-2），则是从-2的位置一直往前选，若slice（2，-2）则是从2往下选从-2往上选


end() 返回当前元素前一个状态的节点 $('#box').find('li').end().get(0)      end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态


contents() 返回子节点（包含文本）的数量$('#box').find('li').contents()
$('#box').find('li').children().size()是只获取文本的数量不包含子节点


filter() $('li').filter('.claass',:first,:last).css……复合选择
filter里面可以添加function，比如
$('li').filter(function(){return $(this).attr('class')=='class'&&$(this).attr('title')=='列表3'}).css……