jQuery的事件与动画
jQuery中的事件
大家的知道,页面在加载的时候会触发load事件;当用户单击某个按钮的时,会触发click事件
jQuery中,事件分为两大类:基础事件和复合事件;
基础事件
鼠标事件:
.click()
为 "click"(鼠标单击) 事件绑定一个处理器,或者触发元素上的 "click" 事件。
.mouseleave()
为 mouse leaves(鼠标离开) 事件绑定一个处理函数,或者触发元素上的 mouse leaves(鼠标离开) 事件
.mouseout()
为 "mouseout" (鼠标移出)事件绑定一个处理函数,或者触发元素上的 "mouseout" 事件
.mouseover()
为 "mouseover"(鼠标指针移过) 事件绑定一个处理函数,或者触发元素上的 "mouseover" 事件。
键盘事件
jquery的键盘事件分为keypress、keydown和keyup事件
1、keypress()事件
keypress 当按钮被按下时,会发生该事件,我们可以理解为按下并抬起同一个按键。
2、keydown()事件
当按钮被按下时,发生 keydown 事件。
3keyup()事件
keyup 事件会在按键释放时触发,也就是你按下键盘起来后的事件
通过键盘事件操做相应
绑定事件与移除事件
绑定事件
语法:
bind(type [data], fn)
type:事件类型 (主要包括click,mouseover,mouseout 等基础事件,此外,还可以自定义事件)
[data]:可选参数 (该参数不是必须的)
fn:处理函数 (用来绑定处理函数)
通过绑定事件可以进行行对应的操做
移除事件
语法
unbind ([type] , [fn])
[type]: 事件类型 (主要包括click,mouseover,mouseout 等基础事件,此外,还可以自定义事件)
[fn] : 处理函数 (用来解除绑定的处理函数)
通过移除事件可以进行行对应的操做
复合事件
在jQuery中复合事件有两个方法--------hover()和toggle()这两个方法和ready()类似,都是jQuery的自定义方法
hover()方法
语法:
hover(enter , leave)
通过hover可以进行行对应的操做
toggle()方法
在jQuery 中,toggle( )分为带参数的方法和不带参数的方法,带参数的方法用于模拟鼠标连续dik事件。第一次单击元素,触发指定的第一个函数(fn1); 当再次单击同一个元素时,则触发指定的第二个函数(fn2): 如果有更多函数则依次触发,直到最后一个。随后的每次单击都重复对这几↑ 函 数轮备调用,togg le( )方法的
语法:toggle( fn1 ,fn2 ,.....,fnN)
通过toggle可以进行行对应的操做
jQuery中的动画
如果说行(action) 胜于言,那么在JavaScript 的世界里,效果则会让操作(action) 更胜一筹。通过jQuery,不仅能够轻松地为页面操作添加简单的视觉效果,甚至能创建出更为精致的动画。
jQuery 效果能够增添页面的艺术性,一个元素逐渐滑入视野而不是突然出现时,带给人的美感是不言而喻的。此外,当页面发生变化时,通过效果吸引用户的注意力,则会显著增强页面的可用性。下面通过学习以下jQuery 中动画的方法,让大家掌握并应用它们为页面添加动画效果,让页面
更加丰富多彩。
控制元素显示与隐藏
显示
在jQuery 中,可以使用show( )方法控制元素的显示,show( )等同于$(selector)cssdi"block" ),除了可以控制元素的显示外,它还能定义显示元素时的效果,如显示速度。show()的语法格式如下。
语法:
$(selector).show( [speed] , [callback] )
隐藏
在jQuery 中与show( )方法对应的是hide( )方法,该方法可以控制元素隐藏。hide( )方法等于isiector ,css("d isplay","none" ).除了可以控制元素的隐藏外,它还能定义隐藏元素时的效来如急藏速度。hide( )方法的语法格式如下。
语法
$(selector).hide( [speed] , [callback] )
控制元素的淡入淡出
在Quey 中,如果元素是隐藏的,则可以使用fadeln( )方法控制元素淡入,它与show以定义元素淡入时的效果,如显示速度。fadeln( )
语法
$(selector).fadeIn( [speed] , [callback] )
一般来说,fadeIn()方法常用于在网页中的轮播广告,菜单,信息,消息提示框和弹出窗口制作动画。
通过toggle可以进行行对应的操做
自定义动画
animate()方法的常规使用和之前介绍的3种常见动画的使用方法类似
语法
animate(properties[,duration][,easing][,complete])
animate()方法的第一个参数是一个必须参数,表示一个CSS属性和值的对象,动画将根据这组对象移动
所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。例如,width、height或者left可以执行动画,但是background-color不能
小结
在jQuery中,提供了一系列动画效果的方法,其中,使用show方法控制元素的显示,使用hide方法控制元素的隐藏,使用-fadeln()方法和fadeOut()方法实现元素的淡入和没出使用slideUp()方法和slideDown()方法实现元素的收缩和展开,使用animatel )方法实现自定义动画。当然jQuery的动画效果还吧只是怎么一点,可以让我们更加深入的学习
jQuery的事件与动画相关推荐
- JQuery中的事件以及动画
嘿嘿,今天学习了JQuery的事件以及动画,感觉即将学习完JQuery,在回忆起上周学习的JavaScript,感觉好多刚刚学习的知识点都记得模 糊啦,这个是很让失望的,这里只说明了一点,课是听过啦, ...
- 锋利的JQuery —— 事件和动画
大图猛戳 本文转自博客园xingoo的博客,原文链接:锋利的JQuery -- 事件和动画,如需转载请自行联系原博主.
- jQuery 选择器、DOM操作、事件、动画
$(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对 ...
- 四、jQuery 中的事件和动画(嘎嘎详细)
文章目录 前言 一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
- 【JavaLearn】(22)jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
- 【JavaLearn】#(22)jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
1. jQuery定义和特点 1.1 jQuery 入门 对 JavaScript 进行了封装,降低了使用JavaScript的难度,可以大幅提高开发效率(Write less, do more) j ...
- jQuery事件与动画
jQuery中的事件与动画1. 基础事件: window事件,鼠标事件,键盘事件,表单事件2. 语法:事件名="函数名()";或者:DOM 对象名.事件名=函数:3. jQuery ...
- 2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
- 《锋利的JQuery》读书要点笔记3——事件和动画
第四章 jQuery中的事件和动画 JS和HTML的交互是通过用户和浏览器操作页面时引发的事件来处理的,事件由浏览器自动生成. 4.1 jQuery中的事件 1. 加载DOM 这里主要是搞明白wind ...
最新文章
- kali-linux虚拟机与主机共享文件
- 使用JDK自带的jmap和jhat监控处于运行状态的Java进程
- 【ubuntu】ubuntu下用make编译程序报错找不到openssl/conf.h
- Linux学习之CentOS(三)----将Cent0S 7的网卡名称eno16777736改为eth0
- kali linux2.0下MariaDB修改密码
- 2013浙大878计算机基础综合大题答案解析
- vsftpd虚拟用户与匿名用户配合使用
- Java结构型设计模式之装饰者模式
- 提高系统可靠性的措施
- Method类及其用法
- Android热修复技术——QQ空间补丁方案解析(2)
- 某摄像头的游戏的总结
- 《吃透MQ系列,图灵学院和咕泡学院
- 『机器学习』入门教程汇总
- 分享自学编程收藏的网站学习资源
- RK3568平台开发系列讲解(安卓适配篇)获取 root 权限
- 开源软件 TOP 100
- 服务器tomcat运行一段时间会报org.apache.coyote.http11.Http11Processor.service Error parsing HTTP request header
- 拜日式精准引导词_在家练瑜伽,常用英文单词了解一下?(三)
- 刷magisk模块后不能开机_刷面具模块导致手机卡米无法开机的解决方法