jQuery成功之路——jQuery动画效果和遍历效果概述

一、jQuery动画效果 

1.1显示效果

• 方法

方法名称	解释
show([speed],[easing],[fn]])	显示元素方法
hide([speed],[easing],[fn]])	隐藏元素方法
toggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

• 参数

参数名称	解释
speed	三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"(摆动)，可用参数"linear"(直线)
fn	在动画完成时执行的函数，每个元素执行一次

• 示例

  
    
    
    
    
  
  
    
    
    
​
    

      div显示和隐藏
    
  

• 示例效果图

1.2滑动效果

• 方法

方法名称	解释
slideDown([speed,[easing],[fn]])	向下滑动方法
slideUp([speed,[easing],[fn]])	向上滑动方法
slideToggle([speed],[easing],[fn])	切换元素方法，向下使之向下,向下使之向上

• 参数

参数名称	解释
speed	三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次

• 示例

  
    
    
    
    
  
  
    
    
    
​
    

      div显示和隐藏
    
  

• 示例效果图

1.3淡入淡出效果

• 方法

方法名称	解释
fadeIn([s],[e],[fn])	淡入方法
fadeOut([s],[e],[fn])	淡出方法
fadeTo([[s],o,[e],[fn]])	设置元素的透明度
fadeToggle([s,[e],[fn]])	淡入淡出之间切换

• 参数

参数名称	解释
speed	三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次
opacity	一个0至1之间表示透明度的数字

• 示例

    
    
    
    
​
    

        div显示和隐藏
    

二、jQuery的遍历

jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。

2.1原始方式遍历

• 语法

for(var i=0;i<元素数组.length;i++){
    元素数组[i];
}

• 代码

    
        
        
        
        
    
    
        

            
北京
            
上海
            
天津
            
重庆
        
    

• 代码效果

2.2jquery对象方法遍历

• 语法

jquery对象.each(function(index,element){});
​
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象

• 代码

    
        
        
        
        
    
    
        

            
北京
            
上海
            
天津
            
重庆
        
    

​

• 代码效果

2.3 jquery的全局方法遍历

• 语法

$.each(jquery对象,function(index,element){});
​
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象

• 代码

    
        
        
        
        
    
    
        

            
北京
            
上海
            
天津
            
重庆
        
    

​

• 代码效果

2.4 jQuery3.0新特性for、of语句遍历

• 语法

for(变量 of jquery对象){
    变量；
}
​
其中，
变量:定义变量依次接受jquery数组中的每一个元素
jquery对象：要被遍历的jquery对象

• 代码

  
    
    
    
    
    
  
  
    

      
北京
      
上海
      
天津
      
重庆
    
  

​

• 代码效果