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_第五章_事件和动画的更多相关文章

  1. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  2. 【WPF学习】第十五章 WPF事件

    前两章学习了WPF事件的工作原理,现在分析一下在代码中可以处理的各类事件.尽管每个元素都提供了许多事件,但最重要的事件通常包括以下5类: 生命周期事件:在元素被初始化.加载或卸载时发生这些事件. 鼠标 ...

  3. 第五章 jQuery中的动画

    通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...

  4. jQuery 第五章 实例方法 详解动画之animate()方法

    .animate()   .stop()   .finish() ------------------------------------------------------------------- ...

  5. jQuery 第五章 实例方法 事件

    .on() .one() .off() .trigger() .click / keydown / mouseenter ...    .hover() ----------------------- ...

  6. PMP备考_第五章_项目范围管理_实践思考

    项目范围管理 前言 今天学习项目范围管理的内容,深切的感受到了原单位在项目管理方面存在的问题,今天在这里做一个总结,既相当于对项目范围的一个学习整理,也相当于自己对项目实践过程中存在问题的一个思考. ...

  7. jQuery_第三章_工厂函数

  8. jQuery_第四章_思维图

    ---------------------------------------------------------------------------------------------------- ...

  9. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

随机推荐

  1. UDP网络程序模型设计

    UDP网络程序设计 1. UDP网络编程模型程序初始化 1.1服务器使用的函数 创建socket----->socket 绑定地址-------->bind 接受数据--------> ...

  2. IOS第三方数据库--FMDB 分类: ios技术 2015-03-01 09:38 57人阅读 评论(0) 收藏

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...

  3. <libxml2/tree.h> file not found

    Build Settings: head search paths :$(inherited) /usr/include/libxml2 Build phases: 加上libxml2.tbd

  4. [Angular Tutorial] 11 -Custom Filters

    在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号: ...

  5. iOS 约束,设置文字控制的高度

    在使用xib或者storyboard进行界面开发和设置约束时,会遇到文字控件,下个控件到文字控件的距离设置. 由于文字控件的大小和文字本身的大小是不同的,那就会造成“设置位置”与设计图的比例不同. 怎 ...

  6. 微信网页授权redirect_uri错误的可能错误之一

    授权回调页面域名 后面不要加/ 加了/ 就会出错.

  7. UITextField 之 手势收起键盘

    1. 注册手势 /** * 注册手势 */ -(void)gestureReg{ //放弃第一响应者 UITapGestureRecognizer * tap = [[UITapGestureReco ...

  8. iOS 准备

    iOS 编程知识点 iOS 基础知识点 iOS 之 系统机制 Xcode 使用技巧 Mac 使用技巧 iOS 之 英语 iOS 之 编外知识点 iOS 知识库链接

  9. Linux下配置Apache最大连接数

    最近有博友发现我的博客经常http 503,博客负载不大,应该不会出现负载问题,很有可能就是Apache最大连接数原因,Apache默认支持150个连接.1.先要修改最大连接数,必须了解Apache的 ...

  10. Iframe 自适应高度并实时监控高度变化的js代码

    不得不用到iframe,且被强烈要求不能让它出现滚动条!嵌入的页面肯定是高度不一的,页面中也不能出现大片空白,所以也不能写死高度!真是麻鬼烦啊!google N次 + 百度M次 + 试验了1605次之 ...