当前位置
首页 > 迪奥学院 > Js脚本 >

jQuery事件和动画

时间:03/02/2014来源: 作者: 点击:

TAG:

 

2.1事件编写 
Js代码  收藏代码
  1. $(function(){  
  2.     //编写代码  
  3.     })  

2.2事件绑定 
Js代码  收藏代码
  1. $(function(){  
  2.     $("#a h1.head").bind("click",function(){  
  3.         $(this).next().show();  
  4.     })  
  5. })  

2.3合成事件 
Js代码  收藏代码
  1. 2.3.1 hover()  
  2. $(function(){  
  3.     $("#a h1.head").hover(function(){  
  4.         $(this).next.show();  
  5.     },function(){  
  6.         $(this).next.hide();  
  7.     })  
  8. });  
  9. 2.3.2 toggle()  
  10. $(function(){  
  11.     $("#a h1.head").toggle(function(){  
  12.         $(this).next().toggle();   
  13.     },function(){  
  14.         $(this).next().toggle();  
  15.     })  
  16. });  

2.4阻止默认动作 
Js代码  收藏代码
  1. $(function(){  
  2.    $("#sub").bind("click",function(event){  
  3.        var username = $("#username").val();  //获取元素的值  
  4.         if(username==""){     //判断值是否为空  
  5.       $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息  
  6.          return false;  
  7.     }  
  8.    })  
  9. })  

2.5移除事件 
Js代码  收藏代码
  1. $(function(){  
  2.     $('#btn').bind("click", myFun1 = function(){  
  3.         $('#test').append("<p>我的绑定函数1</p>");  
  4.     }).bind("click", myFun2 = function(){  
  5.         $('#test').append("<p>我的绑定函数2</p>");  
  6.     }).bind("click", myFun3 = function(){  
  7.         $('#test').append("<p>我的绑定函数3</p>");  
  8.     });  
  9.         $('#delTwo').click(function(){  
  10.             $('#btn').unbind("click",myFun2);  
  11.     });  
  12. })  

2.6 fadeIn()和fadeOut通过改变透明度 
Js代码  收藏代码
  1. $(function(){  
  2.     $("#panel h5.head").toggle(function(){  
  3.         $(this).next("div.content").fadeOut();  
  4.     },function(){  
  5.         $(this).next("div.content").fadeIn();  
  6.     })  
  7. })  

2.7 slideUp()和slideDown()通过改变高度 
Js代码  收藏代码
  1. $(function(){  
  2.     $("#panel h5.head").toggle(function(){  
  3.         $(this).next("div.content").slideUp();  
  4.     },function(){  
  5.         $(this).next("div.content").slideDown();  
  6.     })  
  7. })  

咨询QQ:122388150 | 唐山网站建设,广告设计,动漫原创人设,网站重构,专注网站UI设计,创意设计,产品周边包装设计,标志设计 | 迪奥创意设计

Copyright 2006-2015 diaor.com © all right co,.Ltd