jQuery选择器

1.简单选择器：
              
                 选择器                   CSS模式                   jQuery模式                               描述

                 标签名                      div{}                          $('div')                   获取所有div标签的DOM元素

                  ID                           #box{}                      $('#box')                  获取一个ID为box的DOM对象
             
               class(类名)                .box{}                        $('.box')                 获取所有class名为box的DOM对象

2.进阶选择器：
             
                 选择器                CSS模式                jQuery模式

               群组选择器            div,span,p{}           $('div,span,p')

               后代选择器             ul li a{}                    $('ul li a')

               通配选择器                *{}                          $('*')
  

3.高级选择器：
(1)层次选择器
             
            
                选择器                 CSS模式                jQuery模式                              描述
              
              后代选择器              ul li a{}                   $('ul li a')                   获取追溯到的所有元素

               子选择器                div>p{}                   $('div>p')                       只获取子类节点

              next选择器               div+p{}                  $('div+p')              只获取某节点后一个同级DOM元素

             nextAll选择器             div~p{}                 $('div~p')                获取某节点后所有同级DOM元素

(2)属性选择器：

  
                  CSS模式                                           jQuery模式                                         描述

                input[name]                                     $('input[name]')                     获取具有这个属性的DOM元素

              input[name=XXX]                         $('input[name=XXX]')               获取具有属性且属性值为XXX的DOM元素

           input[value][name=XXX]             $('input[value][name=XXX]')        获取有value 属性且name为XXX的DOM元素

 

(3)过滤选择器：
伪类选择器：
                
                                 过滤器名                   jQuery语法                    说明                                    返回

                                    :first                        $('li:first')                 选取第一个元素                      单个元素
     
                                    :last                        $('li:last')                 选取最后一个元素                   单个元素
         
                             ：not(选择器)             $('li:not(.red)')        选取class不是red的元素             一组元素  

                                   :even                      $('li:even')              选择偶数的所有元素                 一组元素

                                    :odd                       $('li:odd')                选择所有奇数元素                    一组元素
    
                                  ：eq                      $('li:eq（1）')            选择对应下标的元素               单个元素

内容过滤器：  
          
 
                      过滤器名                       jQuery语法                                  说明                                          返回

                 :contains(text)          $('li:contains(123456)')          选择有123456文本的元素                    一组元素

                      :empty                         $(li':empty')           选取li中不包含子元素或空文本的元素          一组元素

               ：has（选择器）                $('ul:has(.red)')                选择子元素含有类red的ul                  一组元素

可见性选择器：

                                      过滤器名                    jQuery语法                         说明                                     返回

                                      :hidden                      $(li:hidden)               选取所有不可见元素                   集合元素

                                       :visible                      $('li:visible')                选取所有可见元素                     集合元素

其他方法：

jQuery在选择器和过滤器的基础上提供了一些常用的方法，方便我们开发时灵活使用。

                方法名                                 jQuery语法                                         说明                                              返回

                   is()                                    li.is('.red')                            传递选择器、DOM、jquery对象             true  ||  false

              hasClass()                      $('li').hasClass('red')                           就是is('.'+class)                             true   ||   false

 

.removeClass()         从被选元素移除一个或多个类。

.addClass()               向被选元素添加一个或多个类。

.end()                        终止当前选择器的遍历，回到上个选择条件。
  

二.jQuery动画

                jQuery动画分为三个部分，非自定义动画，自定义动画，和全局动画设置。

1.非自定义动画:

(1)显示、隐藏：

                      show()          方法显示隐藏的被选元素。

                      hide()          方法隐藏被选元素。

                      toggle()        方法添加两个或多个函数。

(2)滑动：

                      slideUp()       向上滑动（隐藏）

                      slideDown()     向下滑动（显示）

                      slideToggle()   滑动（自动）
 

(3)淡入淡出：

                      fadeOut()     淡出（隐藏）

                      fadeIn()      淡入（显示）

                      fadeToggle()  显示隐藏（）自动
                      
                      fadeTo()      逐渐改变被选元素的不透明度为指定的值（褪色效果）。

2、自定义动画

animate()方法

              animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。

三.动画及相关方法

1.stop()方法

             这个方法是停止动画的方法，他有两个参数，都是布尔值。第一个参数代表是否清除动画队列，第二个参数代表是否直接运行到最后结果。  

2.delay()方法

延时执行，该方法有一个参数，是延时执行的毫秒数。

3.动画的递归

$('div').slideToggle(2000,recursion)

function recursion(){
    $(this).slideToggle(2000,recursion)
}