jQuery事件与动画
一 事件
1 加载DOM事件
$(document).ready():执行时机:DOM元素准备就绪
执行次数:多次
简单写法:原:$(document).ready(function(){})
简1:$().ready(function(){})
简2:$(function(){})
window.onload(): 执行时机:页面所有元素准备就绪
执行次数:1次
简写:无
2 事件绑定与移除事件
事件绑定:
bind(type,[data],fn):type:事件类型, data:可选择参数,自定义餐宿,fn:绑定的处理函数
one(type,[data],fn):同bind()方法
bind()方法与one()方法区别:bind():无限触发
one():只触发一次
绑定多个事件类型:
bind("type1 type2 ....typeN",function(){})
js事件绑定与jquery事件绑定区别:jQuery事件绑定类型少了on
例如:js中鼠标单击事件为:onclick(),jquery中为click()
事件移除:
移除按钮上以前注册的事件:unbind([type],[data])
同时移除多个事件:unblind(type1).unbind(type2)......unbind(typeN)
3 合成事件
hover(enter,leave):模拟鼠标悬停事件,光标移上出发enter,移开出发leave 用于替代bind("mouseenter")和bind("mouseleave")
toggle(fn1,fn2,......,fnN):模拟鼠标连续单击事件,切换元素显示状态
4 事件冒泡
定义:子元素和父元素绑定同样的事件,子元素该事件被触发了,父元素也相应的触发,事件按照特定顺序由里往外响应
引发的问题及解决方案: 问题:引起预料之外的结果 解决方案:1 事件注册之后return false; 2 event.stopPropagation(); 注:event是由函数中传下来的
阻止默认行为:preventDefault()
5 事件对象属性
event.type():获取事件类型
event.preventDefault():阻止默认事件行为
event.stopPropagation():阻止事件冒泡
event.target():获取到触发事件的元素
event.relatedTarget()
event.pageX()和event.pageY():获取到光标相对于页面x坐标和y左标
event.which():鼠标单击事件中,获取到鼠标的左,中,右键
event.metaKey():键盘事件中获取<ctrl>按键
event.originaIEvent():指向原始的事件对象
6 事件捕获:从最顶端往下触发
缺陷:并非所有浏览器都支持事件捕获 解决方案:使用原生js
二 动画
1 show()和hide():显示与隐藏
1) 无参:<<==>>css("display","none/block/inline")
2) 有一个参数(speed):动画速度
2 jQuery Fading():实现元素的淡入淡出效果
1)fadeIn():提高元素不透明度,直至隐藏元素显示
语法:$(selector).fadeIn([speed],[callback]);
speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
callback:函数执行完后的回调函数名称。
2)fadeOut():降低元素不透明度,直至可见元素消失
语法:$(selector).fadeOut([speed],[callback]);
speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
callback:函数执行完后的回调函数名称。
3)jQuery fadeToggle():在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
4)jQuery fadeTo():允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:$(selector).fadeTo(speed,opacity,[callback]);
speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
opacity:数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
callback: 函数执行完后的回调函数名称。
3 jQuery 滑动方法
1)slideUp():向上滑动元素。
语法:$(selector).slideUp([speed],[callback]);
speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
callback:函数执行完后的回调函数名称。
2)slideDown():向下滑动元素
语法:$(selector).slideDown([speed],[callback]);
speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
callback:函数执行完后的回调函数名称。
3)slideToggle():在 slideDown() 与 slideUp() 方法之间进行切换
语法:$(selector).slideToggle([speed],[callback]);
speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
callback:函数执行完后的回调函数名称。
4 自定义的动画
animate():创建自定义动画。
语法:$(selector).animate(params,[speed],[callback]);
params:定义形成动画的 CSS 属性。
speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
callback:动画完成后所执行的函数名称
animate()操作多个属性(多重动画)
例
- $("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px';});});
animate() - 使用相对值(累加动画,累减动画)
例
- $("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'-150px'});});
animate() - 使用队列功能
例
- $("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");
- div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});
5 动画回调(callback):动画执行完毕后所执行的操作
6 停止动画和动画状态判断
停止动画:stop():动画或效果完成前进行强制性停止。
适用范围:用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:$(selector).stop([stopAll],[goToEnd]);
stopAll:是否清除动画队列。默认:false
goToEnd:是否立即完成当前动画。默认: false。
无参例:
- $("#stop").click(function(){$("#panel").stop();});
有参数:
- $("#stop").click(function(){$("#panel").stop(true);});
状态判断:is(":animated")
7 动画队列
1)以链式方式添加动画时,动画阿布顺序执行
2)默认情况:动画同时发生,当以回调形式应用动画时,动画按回调顺序发生
====完
web技术教程:http://www.w3school.com.cn/index.html
jQuery事件与动画的更多相关文章
- jQuery事件以及动画
jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...
- JQuery 事件与动画
第一大部分 提纲 事件与动画 一.事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件. onclick - click ondblclick - db ...
- 第三章 jQuery事件和动画
1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...
- JavaScript jQuery 事件、动画、扩展
事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...
- 初学jQuery之jQuery事件与动画
今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready 准备就绪 2.鼠标事件 方法 ...
- JQuery事件与动画总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...
- jquery事件和动画操作集锦
一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){ //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...
- python 之 前端开发( jQuery事件、动画效果、.each()、 .data())
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- jQuery事件和动画
1.toggle事件 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
随机推荐
- PHP添加、更新solr索引
<?php $options = array ( 'hostname' => 'localhost', 'port' => '8080', 'path'=>'solr/help ...
- 由问题引出的fsck命令
博客停了两天,今天打开linux虚拟机,突然间报错了,顿时心中一喜(是吗?),当时看了下错误说明,好像有关于时间的问题(某个时间是未来时间)..然后我就去兴匆匆的修改系统时间,重启...唉,没作用.只 ...
- 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。
在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...
- js学习笔记之:时间(三)
今天来学习一个简单的时间应用:时间的倒影,如图所示: 主要知识点: 1 获取系统的时间值:2 建立一个div的倒影 div的倒影主要利用css来控制,函数值为:filter:flipv() 步骤 ...
- php中jsonp的跨域实例
我们现在www.test.com这个域名下面有这么个html文件testjsonp.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- Apache 相关配置
1. HTTP缓存设置 ExpiresActive On #ExpiresDefault 设置全局缓存时间,将导致一些get请求不能连续执行 #ExpiresDefault "access ...
- HDU2669 第六周练习I题(扩展欧几里算法)
第六周练习I题 I - 数论,线性方程 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- jquery ajax用例样板
$.ajax({ url: '${managerPath}/customer/updateOrder.do', type: 'POST', async: false, data: { id: date ...
- Spring ApplicationContext的事件机制
ApplicationContext的事件机制是观察者设计模式的实现,通过 ApplicationEvent 类和 ApplicationListener 接口,可以实现 ApplicationCon ...
- 机器学习公开课~~~~mooc
https://class.coursera.org/ntumlone-001/class/index