本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(314)

2021-04(186)

2021-05(139)

2021-06(104)

2021-07(3)

jQuery中的事件与动画

发布于2021-11-20 17:22     阅读(247)     评论(0)     点赞(2)     收藏(1)


jQuery中的事件

js中的事件:鼠标事件,键盘事件,window事件,表单事件

基础事件

  1. 鼠标事件

    click(),鼠标单击事件

    mouseover(),鼠标指针移过时

    mouseout(),鼠标指针移除时

    mouseenter(),鼠标指针进入时

    mouseleave(),鼠标指针移除时

  2. 键盘事件

    keydown(),按下键盘时

    keyup(),释放键盘时

    keypress(),产生可打印的字符

    获取当前按键的键值:keyCode,识别按下了哪个键

    例:$(document).keydown(function(event){

    if(event.keyCode=='13'){

    alter("确认提交吗?");

    }

    });

  3. 载入事件:ready()

  4. 浏览器事件

    调整浏览器的大小:$(selector).resize();

在方法内部,this指调用这个方法的DOM对象

绑定事件

  1. js:事件名=“函数名()”/DOM对象.事件名=函数。

  2. jQuery:bind ( type , [data] , fn);

    例:$("li"),bind("mouseover",function(){

    });

    同时绑定多个事件

    $("li"),bind({

    mouseover:function(){ },//逗号分隔

    mouseover:function(){ }

    });

参数类型参数含义描述
type事件类型基础事件、自定义事件
[data]可选参数作为event.data属性值传递给事件对象的额外数据对象,该参数不是必须的
fn处理函数用来绑定处理函数

移除事件

unbind([type],[fn])

  1. 仅移除一个事件:

    var con=function(){ };

    $("li").unbind("mouseover",con);

  2. 移除多个事件

    $("li").unbind();

复合事件

  1. hover()方法

    hover(enter,leave)

    模拟鼠标指针移入移出,鼠标移入处罚第一个函数,移除时触发第二个函数

    $("li").hover(

    function(){$("li:eq("+$("li").index(this)+") div").show()},

    function(){$("li:eq("+$("li").index(this)+") div").hide()}

    );

  2. toggle()方法

    toggle(fn1,fn2......fnnN)

    相当于连续单击事件,第一次点击触发第一个函数,第二次触发第二个……

    toggle()

    切换元素的可见状态,如果是可见的切换为隐藏,隐藏的切换为可见的

    toggleClass()

    事件触发对象在加载某个样式和移除某个样式之间的切换

jQuery中的动画

控制元素显示与隐藏

  1. 显示

    $(selector).show([speed],[callback]);

  2. 隐藏

    $(selector).hide([speed],[callback]);

  3. 改变元素透明度

    $(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




所属网站分类: 技术文章 > 博客

作者:92wwhehjw

链接:http://www.qianduanheidong.com/blog/article/237530/198e589e3aa1b925ed36/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)