刚刚学习了jqyery的一些事件和动画,下面我来总结一下:

1.基础事件

1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可以极大的提高web应用程序的响应速度。(不做过多的讲解)

2.鼠标事件

鼠标事件就是用户在文档上移动或者点击时引发的操作。

1.click();

2.mouseout();

3.mouseout();

 $(function () {
$('li').on('mouseenter',function () {
$(this).css('background', 'pink');
}).on('mouseout',function () {
$(this).css('background', "");
})
$("li").off("mouseout");
})

上面这段代码把鼠标事件展示出来了。

3.键盘事件

方法有:keydown()  keyup()  keypress()

$(document).keydown(function(event)){
if(event.keyCode=='')
}

4.表单事件

表单事件是所有事件中类型最稳定,且支持最稳定的事件之一。

当元素获得焦点时会触发focus事件,失去焦点会触发blur事件。

下面我来写一个例子

        $(function () {
$("[name=zh]").focus(function () {
$(this).addClass('myclass')
});
$("[name=zh]").blur(function () {
$(this).removeClass('myclass');
}) })

获得焦点会变颜色,blur就会移除添加的元素。

5.绑定事件与移除事件

在jquery绑定一个或者多个事件可以使用 bind() 或者 on() 2者等价,推荐使用 on(),移除事件可以使用 unbind()  或者 off().

例子:

   $(function () {
$('li').on('mouseenter',function () {
$(this).css('background', 'pink');
}).on('mouseout',function () {
$(this).css('background', "");
})
$("li").off("mouseout");
})

6.复合事件

在jquery中 复合事件方法:hover()和toggle()

hover()方法的作用是模拟鼠标悬停事件,当鼠标移动到元素上时会触发第一个函数,鼠标移出这个元素时 会触发第二个函数 和mouseover mouseout一样

代码:

$('#mum').hover(function(){
$(#mu).css("display","block");
},function(){
$(#mu).css("display","none");
});
});

toggle() 模拟鼠标连续点击事件 第一次单击元素,触发第一个函数,在单击同一个元素会触发第二个函数

代码和hover()的形式一样,不做过多演示。

最后在说一下jquery中的动画

控制元素显示和隐藏

1.控制元素显示

语法:$(selector).show([speed],[callback])

2.元素隐藏

语法:$(selector).hide([speed],[callback])

通过上面2个语法可以使元素自由的显示和隐藏。

改变元素透明度

1控制元素淡入

2控制元素淡出

淡入语法:$(selector).fadeIn([],[])

淡出语法:$(selector).fadeOut([],[])

代码如下:

 $(function () {
$("[type=button]").bind("click", function () {
$("div").animate({
borderWidth: }, ).animate({ fontSize: "50px", }, { queue: false, duration: }); })
})

注意: queue 指 是否队列,fales就是假,这样就会几个动画一起执行,不会出现先执行一个元素再执行下一个元素。

jQuery中的事件和动画效果的更多相关文章

  1. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  2. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  3. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  4. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  5. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  6. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  7. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  8. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  9. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

随机推荐

  1. 【安卓】aidl.exe E 10744 10584 io_delegate.cpp:102] Error while creating directories: Invalid argument

    这几天在使用.aidl文件的时候eclipse的控制台总是爆出如下提示: aidl.exe E 10744 10584 io_delegate.cpp:102] Error while creatin ...

  2. 欧拉函数 - HDU1286

    欧拉函数的作用: 有[1,2.....n]这样一个集合,f(n)=这个集合中与n互质的元素的个数.欧拉函数描述了一些列与这个f(n)有关的一些性质,如下: 1.令p为一个素数,n = p ^ k,则 ...

  3. matlab GUI封装exe文件

    学习matlab过程中,有时有些程序处理数据时老是看着代码,也会觉得疲倦,那么要试一试matlab的GUI吗?我就是这么使用matlab的GUI制作一个小程序,并且使用matlab封装成了exe文件. ...

  4. MVC学习笔记

    7 天玩转 ASP.NET MVC 阅读笔记 1.Web Form的问题 1.响应慢,web控件转化成html需要时间 2.带宽消耗,页面保存web控件的状态(viewstate) 3.由web控件生 ...

  5. ubuntu下安装chrome

    首先.题主在试过直接ubuntu终端命令安装chrome失败. 把经历过的错误稍微提一下: 在终端输入 下载安装包 sudo wget https://dl.google.com/linux/dire ...

  6. Python之路

    Python学习之路 第一天   Python之路,Day1 - Python基础1介绍.基本语法.流程控制              第一天作业第二天   Python之路,Day2 - Pytho ...

  7. nginx笔记资料

    通配 hash 表 ngx_hash_init 实现注释:http://blog.csdn.net/gsnumen/article/details/7817396 ngx_hash_init之后的结构 ...

  8. JavaScript高级程序设计学习笔记--事件

    HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...

  9. socket通信之eofexception

    方案一: 用read()将不会抛出异常.因为read是block方式的. readInt()抛出异常的原因(我遇到的)是对方在该端口没有消息发送. 方案二: socket的端口被阻塞了 ,也就是我们需 ...

  10. mysql远程连接问题

    问题:在服务器里面新安装一个MYSQL数据库,结果在远程电脑连接不上,并提示“服务器连接错误Host 'XXX' is not allowed to connect to this MySQL ser ...