jQuery事件
来源：互联网 发布：人工智能汽车 编辑：程序博客网 时间：2024/06/05 15:41
一：鼠标事件
方法 描述 执行时机
click() 触发或将函数绑定到指定元素的 click 事件 单击鼠标时
mouseover() 触发或将函数绑定到指定元素的 mouseover 事件 鼠标指针移过时
mouseout() 触发或将函数绑定到指定元素的 mouseout 事件 鼠标指针移除时
mouseenter() 触发或将函数绑定到指定元素的 mouseenter 事件 鼠标指针进入时
mouseleave() 触发或将函数绑定到指定元素的 mouseleave 事件 鼠标指针离开时
**相同点** **不同点**mouseover() 鼠标在其被选元素的子元素上来回进入时；
区别： 鼠标进入被选元素时会触发 | 触发：mouseovr()
mouseenter() 不触发:mouseenter()
mouseout() 鼠标在其被选元素的子元素上来回离开时；|
区别： 鼠标离开时被选元素时，会触发 | 触发mouseout();
mouseleave() 不触发:mouseleave();
二：键盘事件
方法 描述 执行时机
keydown() 触发或将函数绑定到指定元素的 keydown 事件 按下键盘时
keyup() 触发或将函数绑定到指定元素的 keyup 事件 释放键盘时
keypress() 触发或将函数绑定到指定元素的 keypress 事件 产生可打印的字符时
三：绑定事件
对同一个元素进行多个不同的事件处理，例如：鼠标指针移至到某个元素上时出现一种特效，
离开时又显示不同的特效，这时就需要绑定事件 bind();
既然有绑定事件，也有移除事件 unbind();
语法：
bind(type,[data],function);//其中。[data]参数不是必需的注 bind()方法的参数说明
------------------------------------参数类型 参数含义 描述
type 事件类型 主要包括click mouseover mouseout 等基础事件，还可以是自定义事件
[data] 可选参数 作为event.data属性值传递给事件对象的额外数据对象，该参数不是必需的
function 处理函数 用来绑定处理函数
3.1） 移除绑定事件
语法：
unbind([type],[function]);注：unbind()方法有两个参数，这两个参数不是必需的，当unbind()不带参数时，表示移除所绑定的全部事件。
参数类型 参数含义 描述
[type] 事件类型 主要包括click mouseover mouseout 等基础事件，此外，还可以是自定义事件
[function] 处理函数 用来解除绑定的处理函数
四：复合事件
在jQuery中 有两个复合事件方法，——hover() 和 toggle() 方法,都是jQuery自定义的方法
1.）hover()方法用于模拟鼠标指针 移入 和 移出 事件，当鼠标指针移至元素 上时，会触发指定的第一个函数 (enter)
当鼠标指针移出这个事件时，会触发指定的第二个函数 (leave)，该方法相当于mouseenter 和mouseleave
事件的组合。语法格式如下：
语法：
hover(enter,leave);2.）toggle() 方法
在jQuery中，toggle() 分为带参数的方法和不带参数的方法，带参数的方法用于模拟鼠标连续click事件。
第一次单击元素，触发指定的第一个函数 (fn1),当再次单击同一个元素时，则触发指定的第二个函数 (fn2)
如果有更多函数，则依次触发，直到最后一个，随后的每次单击都重复对这几个函数轮番调用。
语法：
toggle(fn1,fn2...fnN);toggle() 不带参数时，与show() 和 hide() 方法的作用一样，切换元素的可见状态，如果元素时可见的，则切换
隐藏状态，如果元素时隐藏的，则切换可见状态。语法格式如下：
语法：
toggle();在jQuery中的 toggle() 方法一样，toggleClass（） 可以对样式进行切换，实现事件触发时某元素在 “加载某个样式”和“移除某个样式” 之间切换，语法格式如下：
语法：
toggleClass(ClassName);toggle() toggleClass（）总结如下：
toggle( fn1,fn2….fnN); 实现单击事件的切换，无须额外绑定click事件
toggle(); 实现事件触发 对象在 “显示”和“隐藏”状态之间切换
toggleClass(); 实现事件触发对象在 “加载某个样式”和“移除某个样式”之间切换
五：jQuery动画
jQuery动画1.）控制元素显示：
在jQuery中，可以使用 show() 方法控制元素的显示，show() 等同$(selector).css(“display”,”block”);
除了可以控制元素的显示外，还能定义显示元素时的效果，如显示速度，语法如下：
语法：
$(selector).show([speed],[callback]);
参数说明:
speed a.可选。规定元素从隐藏到完全可见的速度，默认为 “0”
b.可能值。 毫秒(如1000)、slow normal fast; 速度值
c.在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变高度、宽度、外边距、内边距和透明度。
callback 可选。show 函数执行完之后，要执行的函数。
2.1.）控制元素隐藏
在jQuery中，与s**how()方法对应的是 **hide() 方法，该方法可以控制元素隐藏，
hide()方法等同于$(selector).css(“display”,”none”),除了可以控制元素的隐藏外，它还能定义隐藏元素
时的效果，如隐藏速度，语法如下：
语法：
$(selector).hide([speed],[callback]);
其参数设置方式与show（） 方法相同，绝大多数情况下，hide()方法与show()方法总是在一起使用，如选项卡，下拉菜单、提示信息等。
3.1.改变元素透明度
fadeIn(); 控制元素淡入 $(selector).fadeIn([speed],[callback]);
fadeOut(); 控制元素淡出 $(selector).fadeOut([speed],[callback]);
注：speed a 可选。规定元素从隐藏到完全可见的速度。默认为0
b.可能值。 毫秒(如1000)、slow normal fast; 速度值
c.在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变透明度，给视觉以淡入的效果
callback 可选。fadeIn 函数执行完之后，要执行的函数。
除非设置了 speed参数，否则 不能设置该参数。
4.1.改变元素高度
slideUp(); 控制元素从下到上直至隐藏 $(selector).fadeUp([speed],[callback]);
fadeDown(); 控制元素从上到下延伸显示 $(selector).fadeDown([speed],[callback]);
注：
speed 为可选参数 用来规定元素高度的时长，它的取值也是slow,fast或毫秒
callback 可选参数 表示改变元素高度完成后执行的函数名称
------------自定义动画----------语法
**$(selector).animate({params},speed,callback);** params: 必选 定义形成动画的CSS属性
**speed** **可选 规定效果时长，取值：毫秒，fast,slow****callback 可选 滑动完成 后执行的函数名称**一：鼠标事件——代码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>jQuery鼠标事件</title> <script src="../../jQuery数据库/jquery-1.12.4.min.js"></script> <script> $(function(){ $("input:eq(0)").click(function(){ alert("鼠标点击"); }); $("input:eq(1)").mouseover(function(){ alert("鼠标移入") $(this).val("移入"); }) ; $("input:eq(1)").mouseout(function(){ alert("鼠标移出") $(this).val("移出"); }) ; }); </script></head><body><input type="button" value="点击" /><input type="text" value="2222"/></body></html>二：键盘事件——代码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>键盘事件</title> <script src="../../jQuery数据库/jquery-1.12.4.min.js"></script> <script> $(function(){ //键盘按下/* $("input:eq(0)").keydown(function(){ $("p").html("键盘按下"); }) ; //键盘弹起 $("input:eq(0)").keyup(function(){ $("p").html("键盘弹起"); }) ;*/ //键盘按下并弹起/* $("input:eq(0)").keypress(function(){ $("p").html("键盘按下并弹起"); }) ;*/ //两者方法都可以 $("input").keydown(function(){ $("p").html("键盘按下"); }).keyup(function(){ $("p").html("键盘弹起"); }); //窗口事件 /* $(window).resize(function(){ alert("窗口变化"); });*/ }); </script> <style type="text/css"> p{ height: 70px; width: auto; border: 1px solid red; } </style></head><body><input type="text" /><p></p></body></html>三.绑定事件——代码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>绑定事件</title> <script src="../../jQuery数据库/jquery-1.12.4.min.js"></script> <script> /* $("input:eq(0)").bind("click",function(){ alert("绑定"); }) */ $(function(){ //绑定事件 $("input:eq(0)").bind( //注意这个外面这个大括号！！！ { "mouseover":function(){ $(this).next().val("移入"); },mouseout:function(){ $(this).next().val("移出"); } }); //移除绑定事件 $("input:eq(0)").dblclick(function(){ $(this).unbind(); $(this).next().val("解除绑定成功"); }); /*$("input:eq(0)").unbind();*/ //解除绑定 }); </script></head><body><input type="button" value="点击" /><input type="text" value="2222"/></body></html>四：复合toggle()事件——代码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>toggle事件</title> <script src="../jQuery数据库/jQuery-1.8.3.min.js" type="text/javascript"></script> <script> //触发这个事件，必须使用 jQuery版本的 1.8.3的版本 $(document).ready(function(){ //带参数，实现单击事件的切换，无须额外绑定click事件 显示和隐藏的切换/* $("input").toggle( function(){ $("body").css("background-color","red"); }, function(){ $("body").css("background-color","blue"); }, function(){ $("body").css("background-color","yellow"); } );*/ //这个倒不在意jQuery 数据库版本问题 //交替的显示和隐藏 $("input").click( function(){ $("p").toggle(); //不带参数，相当于show()和hide() 的联合使用 显示和隐藏的使用 //添加样式和移除某个样式的切换 // $("p").toggleClass("ys"); } ) }); </script> <style type="text/css"> .ys{ font-size: 30px; color: rosybrown; } </style></head><body><input type="button" value="连续点击改变body背景色"/><p class="ys">内容显示和隐藏的交替</p></body></html>4.复合事件——hover()
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>复合</title> <script src="../../jQuery数据库/jquery-1.12.4.min.js"></script> <script> //复合事件 $(function(){ //hover() 方法 用于模拟 鼠标移入 移出事件，当移入时，指定第一个函数，移出时，执行第二个函数 $("ul li").hover( function(){ $(this).css("background-color","red"); },function(){ $(this).css("background-color","#ebfffc"); } ); }); </script> <style type="text/css"> li{ font-size: 20px; list-style: none; padding: 20px; background-color: #ebfffc; display: inline; } li a{ text-decoration: none; } </style></head><body><div> <ul> <li><a href="#">唯品会</a></li> <li><a href="#">图书</a></li> <li><a href="#">电子书</a></li> <li><a href="#">服装</a></li> <li><a href="#">运动户外</a></li> </ul></div></body></html>五： jQuery动画
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>animate自定义动画</title> <script src="../jQuery数据库/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("button").click( //animate function(){ $("img").animate({height:'10%',width:'20%',opacity:'0.4'},"slow"); $("span").animate({fontSize:'30px',width:'200px',left:'100px',top:'-50px'},1000); } ) }); </script></head><body><button style="border-radius: 100%">开始动画</button><img src="../../image/1号店/tel_r.jpg" width="100px" style="border-radius: 100%"><span style="width: 100px; height: 40px;position: relative">Animate动画</span></body></html>- jQuery事件
- jquery事件
- JQuery事件
- JQuery事件
- jQuery事件
- jquery事件
- jQuery事件
- JQuery事件
- jquery 事件
- jquery事件
- jquery事件
- jQuery事件
- jQuery事件
- jQuery 事件
- jquery 事件
- jquery 事件
- JQuery事件
- jQuery 事件
- java中数组的应用
- Android应用性能优化
- 有序广播和无序广播
- 面试题——读取后缀表达式并计算
- quartz cron表达式
- jQuery事件
- 智能指针之scoped_ptr
- iOS核心动画学习
- 通过模拟火车售票窗口小Demo初识java多线程
- 安装wordpress，上传主题文件时候nginx出现：413 Request Entity Too Large
- Visual Studio Code启动项目
- table标签中设置td的边框线
- Day3:文件与文件系统的压缩与打包
- 崩溃问题查找方式-写文件
