站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家，探索程序员的人生之路！分享IT最新技术，关注行业最新动向，让你永不落伍。了解同行们的工资，生活工作中的酸甜苦辣，谋求程序员的最终出路!
1158
文章
588274
访问
分类
暂无分类
标签
暂无标签
jQuery中的事件与动画
发布于2021-11-20 17:22 阅读(247) 评论(0) 点赞(2) 收藏(1)
jQuery中的事件
js中的事件：鼠标事件，键盘事件，window事件，表单事件
基础事件
-
鼠标事件
click()，鼠标单击事件
mouseover(),鼠标指针移过时
mouseout()，鼠标指针移除时
mouseenter()，鼠标指针进入时
mouseleave()，鼠标指针移除时
-
键盘事件
keydown()，按下键盘时
keyup()，释放键盘时
keypress()，产生可打印的字符
获取当前按键的键值：keyCode，识别按下了哪个键
例：$(document).keydown(function(event){
if(event.keyCode=='13'){
alter("确认提交吗？");
}
})；
-
载入事件：ready（）
-
浏览器事件
调整浏览器的大小：$(selector).resize();
在方法内部，this指调用这个方法的DOM对象
绑定事件
-
js：事件名=“函数名（）”/DOM对象.事件名=函数。
-
jQuery：bind ( type , [data] , fn);
例：$("li"),bind("mouseover",function(){
});
同时绑定多个事件
$("li"),bind({
mouseover：function(){ }，//逗号分隔
mouseover：function(){ }
});
| 参数类型 | 参数含义 | 描述 |
|---|---|---|
| type | 事件类型 | 基础事件、自定义事件 |
| [data] | 可选参数 | 作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须的 |
| fn | 处理函数 | 用来绑定处理函数 |
移除事件
unbind（[type],[fn]）
-
仅移除一个事件：
var con=function(){ };
$("li").unbind("mouseover",con);
-
移除多个事件
$("li").unbind();
复合事件
-
hover()方法
hover(enter,leave)
模拟鼠标指针移入移出，鼠标移入处罚第一个函数，移除时触发第二个函数
$("li").hover(
function(){$("li:eq("+$("li").index(this)+") div").show()},
function(){$("li:eq("+$("li").index(this)+") div").hide()}
);
-
toggle()方法
toggle(fn1,fn2......fnnN)
相当于连续单击事件，第一次点击触发第一个函数，第二次触发第二个……
toggle()
切换元素的可见状态，如果是可见的切换为隐藏，隐藏的切换为可见的
toggleClass()
事件触发对象在加载某个样式和移除某个样式之间的切换
jQuery中的动画
控制元素显示与隐藏
-
显示
$(selector).show([speed],[callback]);
-
隐藏
$(selector).hide([speed],[callback]);
-
改变元素透明度
$(selector).fadeIn([speed],[callback])；//控制元素淡入
$(selector).fadeOut([speed],[callback])；//控制元素淡出
| 参数类型 | 描述 |
|---|---|
| speed | 可选，从隐藏到完全可见的速度，默认’0‘，可能值：毫秒，slow，normal，fast |
| callback | 可选，show执行完之后，要执行的函数 |
改变元素的高度
$(selector).slideDown([speed],[callback]);//该元素隐藏时，从上向下延伸显示
$(selector).slideUp([speed],[callback]);//该元素显示时，从下到上缩短隐藏
自定义动画
$(selector).animate({params},speed,callback);
动画只对数值类型有用
原文链接:https://blog.csdn.net/m0_59795746/article/details/121416397
站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的公众号:程序员总部,交个朋友吧!关注公众号回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分
所属网站分类: 技术文章 > 博客
作者：92wwhehjw
链接：http://www.qianduanheidong.com/blog/article/237530/198e589e3aa1b925ed36/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)