JQ选择器+过滤器

一、基本选择器：

  1.  tag标签选择器 ：$('td').css('backgroundColor','wheat')    

  2.  id选择器 ：id = title ；$('#title').css('backgroundColor','lightgreen')    

  3.  class类选择器 ：class = mark ；$('.mark').addClass('bg-orange')    

  4.   *通配选择符   ： $('tr:nth-child(3) ~ *').css('backgroundColor', 'pink')    

二、层级选择器：

   1、后代： 空格  ；   $('li a').addClass('green')  

   2、所有子元素  > ：仅ul的子元素li前景色变成红色,孙元素<a>文本不会变化 ；$('ul > *').addClass('red')

                               用空格li、a 都会变色 ：  $('ul  *').css('color','red')    

   3、相邻兄弟元素 + ：

      将第5个li的下一个兄弟:第6个li前景色变更为绿色    ： $('li:nth-child(5) + li').addClass('green')  

      全部兄弟元素 ~    ：$('li:nth-child(5) ~ li').addClass('green')    

   4、第一个与最后一个元素    ：

       $('li:first-child').addClass('green')    

       $('li:first').addClass('green')    

       $('li:last-child').css('color','red')    

       $('li:last').css('color','red')    

   6. 直接选中某一个元素   :  $('li:nth-child(6)').addClass('red')    =====      $('li:eq(5)').addClass('red')     

                                            jquery使用eq(i),i从0开始,注意与css中的不一样                                                        

   7. 选中大于或小于某个序号的元素 ：   大于 gt ()    小于 It（）

       先去掉所有元素上的class  ：   $('*').removeClass()  

       仅去掉li,不包括li下面的a,链接仍为绿色   :  $('li').removeClass()  

       选中序号大于4的所有元素,注意从0开始计算 :   $('li:gt(3)').addClass('red')  

       选中序号小于8的所有元素    ： $('li:lt(7)').addClass('red')  

   8. 根据序号特征来选择元素  ：  

•         选中所有序号为偶数的元素：even    

        因为是从0开始,0,2,,4,所以看上去像是选择了奇数,要注意     ：$('li:even').addClass('red')

•         选择奇数用是odd： $('li:odd').addClass('red')    

三、内容过滤器：

  1. 选择包含指定文本内容的元素：    

     $('p:contains(\'春\')').addClass('bg-wheat')    

     $('p:contains("春")').addClass('bg-wheat')    （这种用法最多）

  2. 选择内容为空的标签,空是指没有子标签,甚至连文本内容都不能有   ：$(':empty').text('作者:孟浩然')  

  3. 选择有img标签(图片)的p元素,给它加个背景   ： $('p:has("img")').addClass('bg-pink')    

  4. 选择所有以p为父元素的节点,添加绿背景    ：$('p:parent').addClass('bg-green')  

  5. 取反过滤器not,选择页面中所有内容不为空的元素,前景色变更为红色   ： $(':not(:empty)').css('color','red')    

四、表单过滤器 : 

   1. 根据类型选择表单控件元素    

• css写法,仅选到到所有的input,其它的控件选不上  : $('input').css('background-color', 'lightgreen')    

•  jquery写法,前面加上冒号即可,除了input,select,button,textarea全部可以选上    

        $(':input').css('background-color', 'lightgreen')    

• 如果只想选input标签,在:input之前加上标签限定:input即可,此时与css语法效果完全一致    

        $('input:input').css('background-color', 'lightgreen')    

• :input:本意就是选择全部的表单控件的意思,后面可以用css属性进行限制,例如获取密码框    

        $(':input[type="password"]').css('background-color', 'lightgreen')    

• 后面除了可以用css属性进行限制外,更推荐使用jquery的过滤器,例如密码框过滤器就是:password    

        $(':input:password').css('background-color', 'lightgreen')    

•  过滤器之间支持链式操作    

  2. 根据表单控件的特征来选择元素    

• :input,只选择表单元素,不包括:file,:image,:input

• 只选择file类型   :  $(':file').css('background-color', 'lightgreen')

• 只选择文本框:type="text"    :   $(':text').css('color',"red")    

• 只选择提交按钮   :  $('button:submit').css({     })    

五、常用的过滤方法：

过滤方法,也就是函数,大多与前面介绍过的过滤器功能是一致的    

  1. get() 将jquery对象转为DOM对象:将第二个文本的前景色设置为红色    

        $('li').get(1).style.color = 'red'    

   2.  eq(): 获取指定序号的元素,注意,返回的是jQuery对象    

        $('li').eq(4).css('color','red')    

   3.  first(): 返回第一个元素,不需要参数   ： $('li').first().css('color','red')

   4.  first(): 返回最后一个元素,不需要参数   : $('li').last().css('color','red')

   5.  toArray(),返回DOM数组,注意不是jquery对象    

• var li = $('li').toArray()    

• for(var i=0; i<li.length; i++){    

• li[i].style.color = 'green'    

• }    

  6.  find()  :返回所有的后代元素,包括子,孙...    

• $('ul').find('li').css('color','coral')    

• $('ul').find('a').css('color','cyan')    

  7. children()返回所有的直接子元素    

• $('ul').children().css('color','deeppink')    

• $('ul').children('p').css('color','deeppink')    

  8. 对每个元素执行回调函数    

•  $('li').each(function(){    

•  $(this).css('background-color','wheat')    

• $(this).css('color','black')    

•  $(this).css('font-size','1.3em')  

•  })