jQuery中的事件和动画效果
刚刚学习了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就是假,这样就会几个动画一起执行,不会出现先执行一个元素再执行下一个元素。
3{BKKA8AZHZ}2FFWMB.jpg)
B@QP_6A)X[O[WB1.png)
B@QP_6A)X[O[WB1.png)
3{BKKA8AZHZ}2FFWMB.jpg)
jQuery中的事件和动画效果的更多相关文章
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 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 ...
- 欧拉函数 - HDU1286
欧拉函数的作用: 有[1,2.....n]这样一个集合,f(n)=这个集合中与n互质的元素的个数.欧拉函数描述了一些列与这个f(n)有关的一些性质,如下: 1.令p为一个素数,n = p ^ k,则 ...
- matlab GUI封装exe文件
学习matlab过程中,有时有些程序处理数据时老是看着代码,也会觉得疲倦,那么要试一试matlab的GUI吗?我就是这么使用matlab的GUI制作一个小程序,并且使用matlab封装成了exe文件. ...
- MVC学习笔记
7 天玩转 ASP.NET MVC 阅读笔记 1.Web Form的问题 1.响应慢,web控件转化成html需要时间 2.带宽消耗,页面保存web控件的状态(viewstate) 3.由web控件生 ...
- ubuntu下安装chrome
首先.题主在试过直接ubuntu终端命令安装chrome失败. 把经历过的错误稍微提一下: 在终端输入 下载安装包 sudo wget https://dl.google.com/linux/dire ...
- Python之路
Python学习之路 第一天 Python之路,Day1 - Python基础1介绍.基本语法.流程控制 第一天作业第二天 Python之路,Day2 - Pytho ...
- nginx笔记资料
通配 hash 表 ngx_hash_init 实现注释:http://blog.csdn.net/gsnumen/article/details/7817396 ngx_hash_init之后的结构 ...
- JavaScript高级程序设计学习笔记--事件
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...
- socket通信之eofexception
方案一: 用read()将不会抛出异常.因为read是block方式的. readInt()抛出异常的原因(我遇到的)是对方在该端口没有消息发送. 方案二: socket的端口被阻塞了 ,也就是我们需 ...
- mysql远程连接问题
问题:在服务器里面新安装一个MYSQL数据库,结果在远程电脑连接不上,并提示“服务器连接错误Host 'XXX' is not allowed to connect to this MySQL ser ...