jQuery中的事件与动画

简介: jQuery中的事件与动画

一、jQuery中的事件:


1.基础事件


(1)鼠标事件


(2)键盘事件


(3)window事件


2.复合事件


(1)鼠标光标悬停


(2)鼠标连续点击



二、鼠标事件:


//1.点击事件click


$("#btn1").click(function(){
$("#div1_1").css(“background”,“green”);
});




三、键盘事件:


//1.键盘按下事件keydown(按下任意键的时候触发)

$("#btn2").keydown(function(){
 $("#div2").css(“background”,“blue”);
 });
//2.键盘抬起事件keyup
$("#btn2").keyup(function(){
  $("#div2").css("background","green");
});
//3.按下可打印字符的时候事件keypress
$("#btn2").keypress(function(){
  $("#div2").css("background","pink");
});


四、//绑定事件bind(单个事件)


$("#btn3").bind(“click”,function(){

$("#div2").css(“background”,“orange”);

});

//绑定多个事件(实现鼠标移入和移出事件)
$("#div2").bind({
  mouseenter:function(){
    //鼠标移入代码
    $(this).css("width","300px");
  },mouseleave:function(){
    //鼠标移出代码
    $(this).css("width","200px");
  }
});
//移除绑定的事件(移除点击事件)
$("#div2").unbind("click");




五、复合事件:


//1.悬浮事件hover

$("#div3").hover(function(){

//放上去


$(this).css(“background”,“red”);

},function(){

//移开


$(this).css(“background”,“brown”);

});

//2.鼠标连续点击事件

$("#div3").toggle(function(){

alert(‘1’);

},function(){

alert(‘2’);

},function(){

alert(‘3’);

});



六、动画:

//1.隐藏hide

$("#div3").hide(1000);

//2.显示show

$("#div3").show(1000);

//元素的淡入和淡出
//1.淡出
$("#div3").fadeOut(2000);
//2.淡入
$("#div3").fadeIn(2000);
//改变元素的高度
//1.高度变低
$("#div3").slideUp(3000);
//2.高度变高
$("#div3").slideDown(3000);





目录
相关文章
|
7月前
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
111 1
|
9月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
138 22
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
173 55
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
133 0
|
10月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
255 9
|
11月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
134 1
|
10月前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
98 0
|
JavaScript
jQuery 事件
jQuery 事件
82 10
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
99 4