JavaScript库——jQuery事件及动画

最新推荐文章于 2022-08-10 10:11:03 发布
最新推荐文章于 2022-08-10 10:11:03 发布
阅读量199 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ymj960722/article/details/107573697
版权
本文详细介绍了jQuery中的事件处理，包括鼠标事件、键盘事件和其他事件，如click、keydown、ready等，以及事件参数和事件绑定与取消。同时，文章还探讨了jQuery动画的基础和应用，如animate()、fadeIn()、slideToggle()等，提供了丰富的示例和应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

事件类型

包括：

  1. 鼠标事件
  2. 键盘事件
  3. 其他事件
  4. 事件参数
  5. 事件绑定和取消

鼠标事件

click

鼠标单击时触发

$(function(){
            $('a').click(function(){
            $('img')
            .eq($(this).index())
            .css({'opacity':'1'})
            .siblings()
            .css({'opacity':'0'});
            });
});

dblclick

鼠标双击时触发
$

(function(){
        $('a').dblclick(function(){
        console.log($(this));
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    });
});
  • 双击事件是由两次单击完成，所以双击事件执行的时候必定会触发单击事件。
  • 一般情况下，单击双击分开执行，不会一起执行。

mousedown

鼠标按下时触发

$(function(){
        $('a').mousedown(function(){
        console.log($(this));
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    });
});

mouseup

按下鼠标松开时触发

$(function(){
        $('a').mouseup(function(){
        console.log($(this));
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    });
});

mouseenter

鼠标进入时触发

$(function(){
        $('a').mouseenter(function(){
        console.log($(this));
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    });
});

$(function(){
        $('nav').mouseenter(function(){
        console.log($(this));
    });
});

mouseleave

鼠标移出时触发

$(function(){
        $('a').mouseleave(function(){
        console.log($(this));
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    });
});

$(function(){
        $('nav').mouseleave(function(){
        console.log($(this));
    });
});

hover (over,out)

鼠标进入和退出时触发两个函数 ，相当于mouseenter和mouseleave

$(function(){
        $('a').hover(function(){
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    },function(){
        $('img')
        .eq($(this).index())
        .css({'opacity':'0'})
        .siblings()
        .css({'opacity':'1'});
    });
});

mouseover

鼠标进入指定元素及其子元素时触发

$(function(){
        $('nav').mouseover(function(){
        console.log($(this));
    });
});

mouseout

鼠标移出指定元素及其子元素时触发

$(function(){
            $('nav').mouseout(function(){
        console.log($(this));
    });
});

mousemove

在DOM内部移动时发生这个事件

$(function(){
        $('nav').mousemove(function(){
        console.log($(this));
    });
});

总结：

  1. 很多捣蛋程序通过mousemove做出来的。
  2. 拖拽文件上传用得到！

scroll

当滚动这个元素时会发生这个事件

$(function(){
            $('div').scroll(function(){
        console.log($(this));
    });
});

键盘事件

keydown

当键盘或者按钮被按下时，触发keydown事件。

$(function(){
        $(document).keydown(function(event){
        console.log(event);
    });
});

$(function(){
        $('input').keydown(function(event){
        console.log(event);
    });
});

小知识

  • clientX clientY 鼠标坐标
  • handleObj 回调函数
  • origType 事件类型
  • key 哪个键
  • keyCode AscII码对应的编码

总结：

  1. 有时候我们通过获取key值判断按下什么键
  2. 可以通过获取键位获取输入什么键
  3. 通过keycode：ASCII值判断

keyup

当按钮松开时，触发keyup事件，发生在当前获得焦点的元素上。

$(function(){
        $(document).keyup(function(event){
        console.log(event);
    });
});

总结：

  1. 现在的浏览器基本上可以使用keydown和keyup，发生在当前获得焦点的元素上
  2. 旧浏览器保留一个keypress事件

keypress

当键盘或者按钮按下时，发生keypress事件

$(function(){
        $(document).keypress(function(event){
        console.log(event);
    });
});

$(function(){
        $('input').keypress(function(event){
        console.log(event);
    });
});

总结：

  1. 独特在于必须输入内容才会触发
  2. 比如输入法、回退，Ctrl， alt不会触发的
  3. 现在版本和keypress keydown几乎没有区别

其他事件

ready()

当DOM载入就绪可以查询或者操纵时绑定一个要执行的函数

$(document).ready(function(){});
resize()   
当浏览器调整窗口大小时，触发事件
$(function(){
        $(window).resize(function(event){
        console.log(event);
    });
});

focus()

当元素获得焦点时触发事件

$(function(){
        $('input').focus(function(){
        console.log('我获得焦点了');
    });
});

blur()

当元素失去焦点时触发事件

$(function(){
        $('input').blur(function(){
        console.log('我失去焦点了');
    });
});

change()

当元素得值发生改变时，发生change事件

$(function(){
        $('input').change(function(){
        console.log('我改变了111');
    });
});

select()

当textarea或者文本类型的input文本被选择时，会发生select事件

$(function(){
        $('textarea').select(function(){
        console.log('我被选中了');
    });
});

总结：

只有可编辑的文本和文本域等可以产生select事件

submit()

当提交表单时，发生submit事件

$(function(){
        $('input[type=button]').click(function(){
      //给form绑定submit事件
        $('form').submit();
    });
});

submit具有三个功能

1. 提交表单

$(function(){
        $('input[type=button]').click(function(){
        $('form').submit();
    });
});

2. 阻止提交表单

$(function(){
        $('form').submit(function(){
        //......
        return false;
    });
});

3. 提交表单时做一些我们所需要的做的事

可以写函数 多用于表单验证

$(function(){
        $('form').submit(function(){
        var inputValue = $('input[type=text]').val();
        if (inputValue!=='www.baidu.com') return false;
    });
});

总结：

  1. button不再form就是普通按钮
  2. button在form中，相当于submit提交按钮
  3. button是html5新增的
  4. 在ie中就是普通按钮
  5. 在非ie中就是提交按钮

事件参数

event

概念：我们需要通过event获取鼠标位置和键盘位置，否则监听事件无意义
所有事件都会传入event对象作为参数，可以从event对象上获取很多信息；

$(function(){
		$(document).keydown(function(event){
		//console.log(event.keyCode);//值
      if(event.keyCode==37){
      alert('弹出左键');
      } else if (event.keyCode==39){
      	alert('弹出右键');
      }
	});
});

事件绑定和取消

on(events,[selector],[data],fn)

在选择元素上绑定一个或多个事件的事件处理函数
绑定一个事件

function flash(){
        $('.button').show().fadeOut('slow');
    }
    $('.bind').click(function(){
        $(document).on('click','.obj',flash)
        .find('.obj').text('点击按钮有效果');
    });

多个事件处理

$(function(){
        var index = 0;
    $('a').add(document).on({
        mouseenter:function(event){
            event.stopPropagation();//阻止事件的冒泡
            index=$(this).index();
            //图片切换函数
            imgChange();
        },
        keydown:function(event){
            event.stopPropagation();//阻止事件的冒泡
            console.log(event.keyCode);
            if (event.keyCode==37) {
                index=index>0?--index:$('a').length-1;
            } else if (event.keyCode==39) {
                index=index<$('a').length-1?++index:0;
            } else {
                return true;
            }
            imgChange();
        }
    });
    function imgChange(){
        $('img')
        .eq(index)
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    }
});

add()

方法表示将元素添加到已存在的元素组合中
语法：$(选择器).add(element,context)

off(events,[selector],[data],fn)

在选择元素上移除一个或者多个事件处理函数

function flash(){
        $('.button').show().fadeOut('slow');
    }
    $('.unbind').click(function(){
        $(document).off('click','.obj',flash)
        .find('.obj').text('这个按钮点击没有效果');
    });

one(type,[data],fn)

为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数

function flash(){
        $('.button').show().fadeOut('slow');
    }
    $('.one').click(function(){
        $(document).one('click','.obj',flash)
        .find('.obj').text('次按钮可以点击一次');
});

jQuery动画基础

原理

我们只需要以固定的时间间隔（0.1秒），每次DOM元素的css样式修改一点（例如:高度，宽度增加10%），看起来就像动画。

自定义动画

animate()

概念：可以实现任意动画效果，需要传递的参数是DOM元素最终的css状态和时间。

var div = $("#test-animate");
div.animate({
        opacity:0.25,
        width:'256px',
        height:'256px
},3000);

第一个参数：{}属性变化的对象
第二个参数：动画执行的事件毫秒数

delay()

概念：方法可以实现动画暂停

var swiper = function(){
        $('div').stop()
        .animate({'width':'0%'},1000)
        .delay(3000)
        .animate({'width':'100%'},1000);
    }

动画函数

show()

直接无参形式调用show（）会显示DOM元素，但是只要传递一个时间参数进去，就变成动画

var swiper = function(){
        $('img')
        .eq(index).stop()
        .show('slow')
        .siblings().hide('slow');
    }

hide()

直接无参形式调用hide （） 会隐藏DOM元素，但是只要传递一个时间参数进去，就变成动画

var div = $('#test-show-hide);
div.hide(3000);//在3秒钟内逐渐消失

toggle()

根据当前状态决定是show() 和hide()

var swiper = function(){
        $('div').stop().toggle('slow');
    }

fadeIn()

动画的淡入，也就是通过不断设置DOM元素的opacity属性实现的。

var swiper = function(){
        $('img')
        .eq(index).stop()
        .fadeIn('slow')
        .siblings().fadeOut('slow');
    }

fadeOut()

动画的淡出，也就是通过不断设置DOM元素的opacity属性实现的。

var swiper = function(){
        $('img')
        .eq(index).stop()
        .fadeIn(1000)
        .siblings().fadeOut(1000);
    }

fadeToggle()

根据元素是否可见决定下一步动作

var swiper = function(){
        $('div').stop().fadeToggle('slow');
    }

slideUp()

在垂直方向逐渐的展开

var swiper = function(){
        $('img')
        .eq(index).stop()
        .slideDown('slow')
        .siblings().slideUp('slow');
    }

slideDown()

在垂直方向逐渐的收缩

var swiper = function(){
        $('img')
        .eq(index).stop()
        .slideDown(1000)
        .siblings().slideUp(1000);
    }

slideToggle()

根据元素是否可见决定下一步动作

var swiper = function(){
        $('div').stop().slideToggle('slow');
    }

总结

  • show和hide会控制宽高和透明度
  • fade不控制宽高，只会控制透明度
  • slide只控制高度以及透明度，但是不控制宽度
ymj960722
关注
jQuery —— JavaScript 库
我的的博客哦
04-25 1248
/ css `div`中定义 position: absolute;})params想要更改的样式属性，以对象的形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余的参数可以忽略。🔰用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index= "1"
浅谈JavaScript 库———jQuery, ExtJs 的对比研究
12-29
### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA（Rich Internet Applications）技术的普及，JavaScript作为一种前端开发的重要工具，逐渐占据了重要的地位。它不再仅仅是用于...
jQuery 编程 | jQuery 动画
ffella的博客
08-10 132
jQuery提供了一些列的动画基本方法，同时也提供了自定动画方案.animate()。 .show() 当提供一个 duration（持续时间）参数，.show()成为一个动画方法。.show()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。 持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时...
jQuery的动画和事件
m0_67331668的博客
03-21 1310
hello，各位帅哥美女们，欢迎来到这次的分享环节，今天给大家带来的是jQuery简单的动画和事件，话不多说，让我们一起来看看吧 一、jQuery事件 1.加载Dom两种方式 1>.window.onload方式 执行时间：整个网页中所有内容（包括图片）加载完成后，才会执行 编写个数：1个 2>.jQuery方式 执行时间：网页结构绘制完成后，执行 编写个数：多个 3>.两个都有的情况下执行顺序【面试题】 jQuery3.0：window.onload比jQuery先执
2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画
Abcdzzr的博客
10-31 1154
目录 1.jQuery中的事件 1.1事件的组成 1.2基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显示与隐藏 11.改变元素的透明度 12.改变元素的高度 13.自定义动画 本章总结 1.jQuery中的事件 在jQuery中事件总共分为两大类；基础事件和复合事件。jQuery中的简单事件，与javaScript中的事件几乎一样，都含有鼠标事...
当调用jquery里面的hover方法用来显示和隐藏另一元素，出现闪动的情况下
weixin_45822952的博客
05-12 539
$(document).ready(function(){ $('#span1').hover( function (){ $('#img1').css('display','block') },function(){ setTimeout(function(){ $('#img1').css('display','none') },1000) ...
Jquery鼠标hover移入移出事件
热门推荐
findyou2016的博客
06-11 2万+
用了这么久Jquery都没发现$.hover()这种类似的监听事件是可以接收两个参数的主要也是因为用的少，一般都只用css的:hover来改变样式的而今天需要给元素hover时改变图片，这css做不到，只能用Jquery的监听事件了后来又发现用$.hover(function(){})这样改变图片后鼠标移走也不会变回原来的图片于是打算用鼠标移出事件将图片改回去，但无意中百度出了$.hover()的...
浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf
01-02
"浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf" 本文简要介绍了目前流行的JavaScript库，并对其中较为流行的两个库jQuery和ExtJs进行了较详细的介绍和对比研究。本文首先简要介绍了JavaScript库的概念和特点，...
小议JavaScript库——Dojo、jQuery和PrototypeJS的比较.pdf
最新发布
01-03
JavaScript 库比较 —— Dojo、jQuery 和 PrototypeJS 在当今的 Web 开发中，JavaScript 库扮演着越来越重要的角色。这些库提供了许多有用的功能，可以帮助开发者快速构建 Web 应用程序。本文将对 Dojo、jQuery 和 ...
网页模板——jQuery实现滚动到网站页面底部动画弹出对话框.zip
11-23
这个压缩包文件"网页模板——jQuery实现滚动到网站页面底部动画弹出对话框.zip"很可能是包含了一个示例或模板，用于教导开发者如何利用jQuery来创建这种动态效果。 首先，我们来详细解释一下这个功能的核心知识点：...
js基础动画（分享）
03-24
setInterval（函数，毫秒） 定时器 onmouseover 鼠标移入 onmouseout 鼠标移出 object.style.left 修改left object.offsetLeft 当前的left object.style.left=object.offsetLeft+num'px' clearInterval 清除定时器
Jquery实现input框搜索功能
weixin_40896800的博客
06-24 4735
$(function () { $(document).keydown(function(event){ //回车事件 if(event.keyCode==13){ var is = $(".scroll-nav").css('display'); if(is == 'none'){ ...
03. jQuery 事件
五月天的博客
06-04 116
 jQuery事件    jQuery 是为事件处理特别设计的 什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件"触发"（或"激发"）经常会被使用。 实例s: 在元素上移动鼠标。 选取单选按钮 点击元素 术语由事件"触发"（或"激发"）经常会被使用。实例: "按钮事件在你按下按键时触发"。 常见 D...
前端星-JS动画的基本原理（一）
xinyu_huo的博客
04-11 216
时间：4.11 题目：JS动画的基本原理（一） 主讲人：月影 1.动画的基本原理 定时器改变对象的属性 根据新的属性重新渲染动画 2.动画的种类 Javascript动画：操作DOM、Canvas CSS动画：transition、animation SVG动画：SMIL 3.JS动画优缺点 优点：灵活度、可控性、性能 缺点：易用性 简单动画例子： let rotation = 0; ...
JavaScript缓动动画
Heart优快云的博客
04-12 221
JS实现的缓冲运动动画效果示例 这篇文章主要介绍了JS实现的缓冲运动效果,涉及JavaScript数值运算与时间函数相关使用技巧。 1.缓冲需要用到数值取整 向上取整:Math.ceil() 向下取整Math.floor() 移动的速度逐渐减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数。 fu...
jquery当中mouseover和Mouseout 和mousemove的用法是什么？
qq_44594371的博客
11-17 323
例 1.12（mouseoverMouseout$Document.html） <html> <head> <title>设置opacity</title> <style type="text/css"> <!-- img{ border:1px solid #FFFFFF; } --> </style> ...
JavaScript 工作原理之十三－CSS 和 JS 动画底层原理及如何优化其性能
weixin_34059951的博客
07-01 158
原文请查阅这里，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原理的第十三章。 概述 正如你所知，动画在创建令人叹服的网络应用中扮演着一个关键角色。由于用户越来越注重用户体验，商户开始意识到完美，令人愉悦的用户体验的重要性，结果网络应用变得越来越重并且拥有更多动态交互的功能。这就要求网络...
JQuery的事件处理和动画效果
编码世界
07-02 1万+
1.jQuery的事件处理 1.1.文档加载事件 .ready(fn) $(document).ready(function(){ //编写代码 }); 与window.onload方法的区别 执行时间 window.onload方法是在页面中所有的DOM元素（包括元素的所有关联文件）完全加载到浏览器后才执行。 通过$(document).ready()方法注册的事件处理函数，只要DOM元...
js动画学习（二）
weixin_30858241的博客
02-20 64
四、简单动画之缓冲运动 实现速度的缓冲，即不同位置的速度不同，越靠近目标值速度越小，所以速度值与目标值与当前值之差成正比。这里要注意一个问题就是物体在运动中速度是连续变化的，不是按照整数变化的，当物体停止时由于小数的原因，位置可能不会回到原起点，会差一点，所以缓冲运动里变化的速度要取整。 1 //鼠标移到元素上元素右移，鼠标离开元素回去。 2 var ti...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值