jQuery 之 链式调用 & 动画 & 尺寸 & 滚动事件 & 简单实例

jquery链式调用

• jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

  $('#div1') // id为div1的元素
  .children('ul') //该元素下面的ul子元素
  .slideDown('fast') //高度从零变到实际高度来显示ul元素
  .parent()  //跳到ul的父元素，也就是id为div1的元素
  .siblings()  //跳到div1元素平级的所有兄弟元素
  .children('ul') //这些兄弟元素中的ul子元素
  .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素
  

jquery动画

• 通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

  $('#div1').animate({
      width:300,
      height:300
  },1000,swing,function(){
      alert('done!');
  });
  

• 参数可以写成数字表达式：

  $('#div1').animate({
      width:'+=100',
      height:300
  },1000,swing,function(){
      alert('done!');
  });
  

尺寸相关、滚动事件

• 1、获取和设置元素的尺寸

  width()、height()    获取元素width和height  
  innerWidth()、innerHeight()  包括padding的width和height  
  outerWidth()、outerHeight()  包括padding和border的width和height  
  outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height
  

• 2、获取元素相对页面的绝对位置 : offse()
• 3、获取可视区高度 : $(window).height();
• 4、获取页面高度 : $(document).height();
• 5、获取页面滚动距离

 $(document).scrollTop();  
 $(document).scrollLeft();

• 6、页面滚动事件

  $(window).scroll(function(){  
      ......  
  })
  

简单实例操作

• 1、层级菜单

    
    
    
        
        
        
        
        
    
    
        
  
            
  
            
  
            
  
            
  
        
        
        
  
            提示信息！
        
  
    
    
  

• 2、选项卡

    
    
    
        
         
        
        
        
    
    
        
  
            
            
            
        
  
        
  
            
  tab文字内容一
            
  tab文字内容二
            
  tab文字内容三
        
    
    
  

• 3、置顶菜单, 滚动到顶部

    
    
    
        
        
        
        
        
  
    
    
        
  顶部logo
        
  置顶菜单
        
  
        
  
            
  网站主内容
            
  网站主内容
            
  网站主内容
            
  网站主内容
            
  网站主内容
        
        
    
    
  

• 4、无缝滚动

    
    
    
        
        
        
        
        
    
    
        
  
            
            
  
        
        
  
            
  
                
  1
                
  2
                
  3
                
  4
                
  5
            
            
        
    
    
  

• 5、手风琴效果

    
    
    
    
    
    
  
    
    
    
    
    
  
        
  
        
  非洲景色01
        
  非洲景色02
        
  非洲景色03
        
  非洲景色04
        
  非洲景色05