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);





目录
相关文章
N..
|
3月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
34 1
N..
|
3月前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
39 1
|
3月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
2月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
21 1
|
2月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
31 0
|
5天前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
10 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
11天前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
2月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
15 0
|
2月前
|
JavaScript
jQuery 动画小练习
jQuery 动画小练习
20 0
|
2月前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
19 0