jQuery事件处理,动画,类数组操作

  

1.事件处理

  

  1.1.事件绑订

  
   bind(type,fn);

   例子:

    $(function(){
     
     //正式的写法
     $('#d1').bind('click',function(){
      $(this).css('font-size','80px');
     });
     
     //简写形式
     $('#d1').click(function(){
      $(this).css('font-size','80px');
     });
    });

  1.2.绑订方式的简写形式

  

   click(function(){
   });

  1.3.合成事件

  
   hover(enter,leave) : 模拟光标悬停事件
   toggle(fn1,fn2...) : 模拟鼠标连续单击事件
   
   例子1:

    $(function(){
     //分开的事件
     $('.s1').mouseenter(function(){
      $(this).addClass('s2');
     });
     
     $('.s1').mouseleave(function(){
      $(this).removeClass('s2');
     });
     
     //合成事件
     $('.s1').hover(function(){
      $(this).addClass('s2');
     },function(){
      $(this).removeClass('s2');
     });
    });

   
   例子2:
    

    $(function(){
     $('#a1').toggle(function(){
      $('#d1').show('slow');
     },function(){
      $('#d1').hide('slow');
     });
    });
    

   

  1.4.事件冒泡//子节点产生的事件会依次向上抛给父节点

  

    1.4.1.获得事件对象//只需要给事件处理函数添加一个任意变量即可

比如e
        //e不是真正的事件对象，而是对底层的事件对象的一个封装
    

      click(function(e){
       
      });

  
      例子1:

       $(function(){
        $('a').click(function(e){
         //e:jQuery对象，里面包含了一个事件对象。
         //target属性返回的是一个dom对象，即事件源。
         var srcObject = e.target;
         alert(srcObject.innerHTML);
        });
       });

    

    1.4.2.停止冒泡

    
      event.stopPropagation();
    
      例子2:

       $(function(){
        $('a').click(function(e){
         alert('你点击了一个链接');
         //停止冒泡
         e.stopPropagation();
        });
        
        $('#d1').click(function(e){
         alert('你点击了一个div');
        });
       });    

     

    1.4.3.停止默认行为

    
      event.preventDefault();//比如表单提交
    
      例子3:

       $(function(){
        $('a').click(function(e){
         var flag = confirm('是否确定删除?');
         if(!flag){
          //停止默认行为 
          e.preventDefault();
         }
        });
       });
    

     

  1.5.事件对象的属性

  
    event.type   : 事件类型
    event.target  : 返回事件源（是dom对象!!!）
    event.pageX/pageY  : 点击的点的坐标
    
      例子4:

       $(function(){
        $('a').click(function(e){
         
         alert(e.type); //获得事件类型
         
         alert(e.pageX + ' '  +e.pageY);
         
        });
       });

    

  1.6.模拟操作//如.$('xxx').mouseenter();

  
     $('xxx').trigger('被模拟的事件');//也可以简化
  
     例子5:

      $(function(){
       $('#b1').click(function(){
        //让username对应的文本输入框获得焦点
        $('#username').trigger('focus');
        //另外，也可以简化
        $('#username').focus();
       });
      });

     

2.动画

  2.1.show() / hide()//显示 / 隐藏

   //作用:通过同时改变元素的宽度和高度来实现显示和隐藏
   
    用法:
     show(速度,[回调函数]);
  
     速度可以使用"normal","fast","slow"，也可以使用毫秒数
     
     回调函数会在整个动画执行完毕之后执行
     

  2.2.slideUp() / slideDown()

  
   //作用：通过改变元素的高度来实现显示和隐藏
   用法同上。   
   
   
    例子:

     $(function(){
      $('#a1').toggle(function(){
       
       $('#d1').show('slow');
       
       $('#d1').slideDown('slow');
       
      },function(){
       
       $('#d1').hide('slow');
       
       $('#d1').slideUp('slow');
       
      });
     });

      
   

  2.3.fadeIn() / fadeOut()//淡入，淡出

  
   //作用：通过改变元素的不透明度来实现显示和隐藏
   用法同上。
   
   例子:

    $(function(){
     $('#b1').toggle(function(){
      
      $('#d1').fadeOut('slow');
      
     },function(){
      
      $('#d1').fadeIn('slow');
      
     });
    });

   

  2.4.自定义动画

  
   animate(params,speed,[callback]) 
     
    params  : //是一个javascript对象，描述的是动画执行结束时的样式。
    
    speed  : //速度，单位是毫秒。
    
    callback : //回调函数，会在动画执行完毕之后执行。
    
    
    例子:

     $(function(){
      $('#d1').click(function(){
       //动画队列
       $(this).animate({'left':'400px'},3000);
       $(this).animate({'top':'250'},2000).fadeOut('slow');
      });
     });

    
 

3.类数组的操作

  //类数组：指的是jQuery选择器会将查找到的所有的dom对象封装成一个jQuery对象，
  //将这些dom对象称为类数组。
   

  3.1.length属性  : //获得jQuery对象包含的dom对象的个数。

   

  3.2.each(fun(i)) : //循环遍历每一个元素,this代表被迭代的dom对象，

         //$(this)代表被迭代的jquery对象。
    

  3.3.eq(index)  : //返回index+1位置处的jquery对象

   

  3.4.index(obj)  : //返回下标，其中obj可以是dom对象或者jquery对象。

   

  3.5.get()   : //返回dom对象组成的数组

   

  3.6.get(index)  : //返回index+1个dom对象。

   
   例子:

    $(function(){
     $('#b1').click(function(){
      //var $obj = $('ul li');
      alert($obj.length);
      
      $obj.each(function(i){
       //i:表示正在被访问的那个dom对象的下标,
       //下标从0开始。
       //this:表示正在被访问的那个dom对象
       if(i==0){
        $(this).css('font-size','60px');
       }else if(i==1){
        $(this).css('font-style','italic');
       }else{
        $(this).css('color','red');
       }
      });
      
      //var $obj = $('ul li');
      var $o = $obj.eq(1);
      //$o.css('font-size','60px');
      var index = $obj.index($o);
      //alert(index);
      
      //var $obj = $('ul li');
      var arr = $obj.get();
      //alert(arr[1].innerHTML);
      
      var $obj = $('ul li');
      var obj = $obj.get(1);
      alert(obj.innerHTML);
     });
    });