黑马程序员技术交流社区

标题: 【西安校区】Jquery绑定事件及动画效果 [打印本页]

---

作者: 逆风TO    时间: 2020-1-7 10:35
标题: 【西安校区】Jquery绑定事件及动画效果
绑定事件


bind（type，data，fuc）

one(type,data,fuc) //只执行一次



常见事件类型


名称        含义
blur        失去焦点
focus        获得焦点
load        加载
resize        重置大小
scroll        滚动
unload        卸载
click        点击
dblclick        双击
mousedown        鼠标按下
mouseup        鼠标弹起
mousemove        鼠标移动
mouseover        鼠标悬停
mouseout        鼠标移走
mouseenter        鼠标移入
mouseleave        鼠标离开
change        内容改变
select        选中
submit        提交
keydown        有键按下
keypress        有键按下
keyup        有键弹起
error        有错误

判断是否显示

[Java] 纯文本查看 复制代码

if($("#id").is(":visible"))

 

{

}

 

else

 

{

 

}

简化绑定事件

[Java] 纯文本查看 复制代码

$(this).mouseover(function(){

 

//代码

 

})

Hover事件

hover（enter，leave）

光标移入，触发第一个事件，光标移走，触发第二个事件

[JavaScript] 纯文本查看 复制代码

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

 

//光标移入

 

},function(){

 

//光标移出

 

})

toggle事件

[JavaScript] 纯文本查看 复制代码

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

 

//第一次点击

 

},function(){

 

//第二次点击

 

})

[JavaScript] 纯文本查看 复制代码

$(this).toggle();  //表示显示隐藏之间的切换

 

$(this).slideToggle();  //切换显示

 

$(this).fadeTo(1000,0.5); //1000ms淡化到0.5透明度

阻止事件的冒泡event.stopPropagation()

阻止默认事件的发生event.preventDefault()
获取事件针对的对象event.target获取光标所在页面的位置event.pageX()/event.pageY()获取鼠标按键类型event.which()       1左键2中键3右键移除所有的绑定事件

[JavaScript] 纯文本查看 复制代码

$("#id").unbind("click")

 

或

 

$("#id").unbind();

移除指定的事件

[JavaScript] 纯文本查看 复制代码

$("#id").unbind("click",funName);

模拟触发事件

[JavaScript] 纯文本查看 复制代码

$("#id").trigger("click");

 

或

 

$("#id").click();

元素的显示隐藏

$("#id").show();

$("#id").hide();

[JavaScript] 纯文本查看 复制代码

$("#id").show("slow"); //600ms 

 

$("#id").show("normal"); //400ms

 

$("#id").show("fast"); //200ms

 

$("#id").hide("slow"); //600ms 

 

$("#id").hide("normal"); //400ms

 

$("#id").hide("fast");//200ms

 

$("#id").show(1000);//1000ms

元素的淡入淡出

[JavaScript] 纯文本查看 复制代码

$("#id").fadeIn();

 

$("#id").fadeOut();

元素延展出现或隐藏

[JavaScript] 纯文本查看 复制代码

$("#id").slideDown(); //显示

 

$("#id").slideUp(); //隐藏

自定义动画

animate(param,speed, callback);

[JavaScript] 纯文本查看 复制代码

$(this).animate({"left":"500px"},3000);  //三秒内，位置改变到指定地方

 

$(this).animate({"left":"+=500px"},3000);  //三秒内，位置改变500px

 

$(this).animate({"left":"-=500px"},3000);  //三秒内，位置改变500px

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2