jQuery_第五章_事件和动画
Jquery中的事件与动画
一、window.onload和$(document).read()的细微差别
(1)执行时机
window.onload:所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行
$(document).read():在DOM完全就绪时就可以被调用
(2)多次使用
$(document).read()可以多次使用,在现有的行为上追加新的行为,依次执行
window.onload事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数 其弊端是:当有多个javascript文件时,每个文件都需要用到window.onload方法
(3)简写方式
二、事件
基础事件:
window事件
鼠标事件:
点击事件:click()、
鼠标指针移过时:mouseover()、
鼠标指针移出时:mouseout()
键盘事件:
按下按键时:keydown()
产生可打印的字符:keypress()
释放按键时:keyup()
$(function(){ $("input").keyup(function(event){ var code=event.keyCode; alert(code); }); });
表单事件:
获得焦点:focus()
失去焦点:blur()
复合事件:
hover()和toggle()
hover()
三、事件的绑定
简单绑定事件
合成事件
toggle() 方法
1.jQuery中的事件
基础事件
语法:
事件名=”函数名()”;
jQuery中的典型的事件方法
事件 典型事件方法 说明
单机事件 click(fn) 单机鼠标时发生,fn代表函数
按下键盘触发 keydown(fn) 按下键盘时发生,fn(函数)
失去焦点事件 blur(fn) 失去焦点发生,fn(函数)
1.Window事件:
例如:打开网页时加载页面,关闭窗口,调整窗口大小,移动窗口等操作,比如文档就绪事件,他对应的方法是ready()方法.
2.键盘事件:
常用的鼠标事件的方法
方法 描述 执行时机
click() 触发或将函数绑定到指定元素的click事件 单机鼠标时
Mouseover() 触发或将函数绑定到制定元素的mouseover事件 鼠标指针移过时
Mouseout() 触发或将函数绑定到制定元素的mouseout事件 鼠标指针移出时
3.键盘事件
常用键盘事件的方法
方法 描述 执行时机
Keydown() 触发或将函数绑定到指定元素的keydown事件 按下按键时
Keyup() 触发或将函数绑定到指定元素的keyup事件 释放按键时
Keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时
键盘事件例:
$(“input”).keydown(function(event){
If(event.keyCode==13){
Alert(“您按下的是回车!”);
}
});
4.表单事件
常用的表单事件的方法
方法 描述 执行时机
Focus() 触发或将函数绑定到指定元素的focus事件 获取焦点时
Blur() 触发或将函数绑定到指定元素的blur事件 失去焦点时
键盘事件例:
$(function(){
$(“input”).focus(function(){
$(this).css(‘background’,’red’);
});
$(“input”).blur(function(){
$(this).css(‘background’,’white’);
});
});
绑定事件与移除事件
1.绑定事件
语法:bind(type,[data],fn)
Bind()方法有3个参数,其中参数data不是必须的详细说明:
Bind()方法的参数说明
类型 定义 描述
Type 事件类型 主要包括blur,focus,click,mouseout,等基础事件,还可以是自定义事件
[data] 可选参数 作为event.data属性值传递给事件对象的额外数据对象,该参数可选
Fn 处理函数 用来绑定的处理函数
1.绑定单个事件
假设需要完成单机按钮,为所有<p>元素添加红色背景,可以使用click(),也可以使用 bind(),下面使用bind方法完成该功能
$(function(){
$(“input”).bind(“click”,function(){
$(“p”).css(“background”,”red”);
});
});
2.同事绑定多个事件
$(function(){
$(“input”).bind({
Mouseover:function(){
$(“ul”).css(‘background’,’red’);
}
Mouseout:function(){
$(“ul”).css(‘background’,’white’);
}
});
});
3.移除事件
移除事件与绑定事件是相对的,在jQuery中为匹配元素移除单个元素或多个元素,可以使用unbind方法
语法:
Unbind([type],[fn]).
Unbind方法有两个参数,两个参数都是可选的,如果没有参数则是移除全部事件,
UnBind()方法的参数说明
类型 定义 描述
[type] 事件类型 包括:blur,focus,click,mouseout,等 事件,可以是自定义事件
[fn] 处理函数 用来接触绑定的处理函数
例如:
$("input").unbind({mouseover:t1});
复合事件
在jQuery中有两个复合事件 hover() 和 toggle() 方法
这两个方法与ready()方法类似,都是jQuery自定义方法
1.hover()方法
Hover()方法用于模仿鼠标指针悬停事件
语法: hover(enter,leave);
$(function(){
$(“input”).hover(function(){
$(“ul”).show();
}),function(){
$(“ul”).hide();
}
});
2.toggle()方法
在jQuer中,toggle()方法用于模拟鼠标连续click事件,第一次单机元素,触发指定的第一个函数(fn1),第二个(fn2),第三个(fn3),等等(更多),随后每次单机重复这几个函数的调用
Toggle()方法的语法:
Toggle(fn1,fn2,fn3);
例子:
$(functoin(){
$(“body”).toggle(
Function(){
$(this).css(‘backgorund’,’red’);
},
Function(){
$(this).css(‘backgorund’,’blue’);
},
Function(){
$(this).css(‘backgorund’,’white’);
}
);
});
jQuery中的动画
控制元素显示与隐藏
1.控制元素显示
语法: $(selector).show([speed],[callback]);
Show()与hide()的参数说明
参数 描述
可选,规定从隐藏到全可见的速度,默认为0;
Speed 可能值:毫秒(如:1000)
在设置输的情况下,元素从隐藏到完全可见的 过程,逐渐改变元素的高宽,内外边距,透明度
Callback 可选,show函数执行后,要执行的函数
2.控制元素隐藏
在jQuery中,与show方法对应的是hide方法
Hide方法用于隐藏(可以控制元素的隐藏速度)
语法:
$(selector).hide([speed],[callback]);
他的参数与show方法的参数一样,第一个是
隐藏的速度,第二个是隐藏后调用的函数
3.切换元素的可见状态
$(function(){
$(“input”).click(function(){
//其他代码省略
$(“li:gt(5):not(:last)”).toggle();
});
});
中间代码实现了只让中间的代码隐藏
改变元素透明度
1.控制元素淡入与淡出
控制元素淡出使用fadeout
控制元素淡入使用fadein
语法:
Fadein: $(selector).fadein([speed],[callback]);
Fadeout: $(selector).fadeout([speed],[callback]);
Fadeout()与fadein()的参数说明
参数 描述
可选,规定从隐藏到全可见的速度,默认为0;
Speed 可能值:毫秒(如:1000)
在设置输的情况下,元素会慢慢透明或者慢慢 呈现出来
Callback 可选,show函数执行后,要执行的函数
除非设置了speed参数,否则不能设置该参数
改变元素的高度
用于改变元素的高度的方法是slideup与slidedown
若一个元素隐藏,当调用slidedown方法显示该元素时,这个 元素会从上向下延伸显示,而slideup相反,元素会从下到上
缩短直到隐藏
本章总结
1.在jQuery中,提供了click()方法等一系列基础绑定方法,支持window事件,鼠标事件,键盘事件和表单事件等基础事件的绑定.
2.使用bind()方法可以一次性绑定一个或多个时间处理方法,使用unbind()方法可以移除事件绑定
3.在jQuery中,提供了hover()和toggle()等复合事件方法
4.在jQuery中,提供了一系列显示动画效果的方法,其中show()方法控制元素显示,hide()方法隐藏,使用toggle()方法切换元素的可见状态,使用fadein()方法和fadeout()方法实现元素的淡出淡入,使用slideup(0方法和slidedown()方法实现元素的收缩与展开
jQuery_第五章_事件和动画的更多相关文章
- 第三章 jQuery事件和动画
1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...
- 【WPF学习】第十五章 WPF事件
前两章学习了WPF事件的工作原理,现在分析一下在代码中可以处理的各类事件.尽管每个元素都提供了许多事件,但最重要的事件通常包括以下5类: 生命周期事件:在元素被初始化.加载或卸载时发生这些事件. 鼠标 ...
- 第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...
- jQuery 第五章 实例方法 详解动画之animate()方法
.animate() .stop() .finish() ------------------------------------------------------------------- ...
- jQuery 第五章 实例方法 事件
.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ----------------------- ...
- PMP备考_第五章_项目范围管理_实践思考
项目范围管理 前言 今天学习项目范围管理的内容,深切的感受到了原单位在项目管理方面存在的问题,今天在这里做一个总结,既相当于对项目范围的一个学习整理,也相当于自己对项目实践过程中存在问题的一个思考. ...
- jQuery_第三章_工厂函数
- jQuery_第四章_思维图
---------------------------------------------------------------------------------------------------- ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
随机推荐
- 【转】HTTP响应报文与工作原理详解
超文本传输协议(Hypertext Transfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一个请求;服务器接到 ...
- Collections笔记
Colletion是集合接口 Collections是集合工具类,是一个类哈! public class CollectionsTest { public static void main(Strin ...
- Eclipse发布Maven项目到远程服务器
pom.xml中的配置依赖有两种: 一.tomcat-maven.plugin <plugin> <groupId>org.codehaus.mojo</groupId& ...
- pku2104
传送门:http://poj.org/problem?id=2104 题目大意:给定一个长度为N的数组{A[i]},你的任务是解决Q个询问.每次询问在A[l], A[l+1], ...... , A[ ...
- zip-auto.sh
#!/bin/sh #auto zip package #Define Path #####test######### mkdir -p /root/shell/test1 /root/shell/t ...
- CMake Tutorial
1.最简实例 使用cmake的最简实例是由一个源程序文件生成一个可执行文件.例如由下述C++源程序文件生成可执行文件tutorial. main.cpp #include<iostream> ...
- linux环境下Vim的配置
原文链接:http://blog.chinaunix.net/uid-26826958-id-3272375.html (本文转自此链接中的部分内容,但做了适当修改) 安装vim命令:sudo ap ...
- eclipse使用egit提交代码报错
在eclipse上使用插件egit同步代码时出现如下错误 解决办法: 开eclipse中的windows-->Preferences-->Team-->Git-->Config ...
- mysql 子查询优化
今天用到要查询七天内都没有装机的门店信息,首先想到了用not in,先把装机的userid查出来,然后再id not in,但是这样就必须使用子查询,数据量少还可以,数据量大了的话,肯定效率特别低,因 ...
- Spring @Aspect切面参数传递
Spring @Aspect切面参数传递: Xml: <?xml version="1.0" encoding="UTF-8"?> <bean ...