【学习笔记】锋利的jQuery(三)事件和动画
一、jQuery事件
1,加载事件
$(document).ready(function(){...}) //等同于$(function(){..})
$(window).load(function(){...}) //等同于window.onload = fn
2,基本事件绑定
bind(type,[.data],fn) //可绑定多个事件:bind("mouseover mouseout",fn)
unbind(type,fn) //解除绑定
one(type,[.data],fn) //绑定的事件只执行一次
//简写绑定
click(fn)/dblclick(fn)
mouseover(fn)/mouseout(fn)
mouseenter(fn)/mouseleave(fn) //不包括移出元素内部的子元素
scroll(fn) //常用表单事件
focus(fn)/blur(fn)
keyup(fn)/keydown(fn) //按下和松下按键
keypress(fn) //按了个键值时候
change(fn) //表单文本域(input:text,textarea,select)值改变时触发
//合成事件
hover(fn1,fn2) //相当于bind("mouseenter")和bind("mouseleave")
toggle(fn1,fn2,fn3...) //连续单击事件,轮番调用多个函数 trigger(type) //触发对应type的事件,会执行浏览器默认操作,type可为自定义名称
triggerHandler(type) //绑定type事件,且阻止浏览器默认操作
3,事件的命名空间
bind("click.name",fn);
bind("mouseover.name",fn);
bind("click",fn); unbind(".name"); //命名空间解绑
trigger("click!"); //匹配不包含命名空间的click,即第三个
4,event事件对象
bind(type,function(event){....}) //添加事件对象参数,推荐命名为event或e,原理上可随便命名 //event属性
event.type
event.target
event.relatedTarget //触发事件的相关元素
event.pageX/event.pageY //相对于页面的x和y坐标
event.which //键盘事件:返回按键的ASCALL码,点击事件:1(左)2(中)3(右)。jq中整合了keyCode和charCode的兼容及鼠标事件
event.keyCode //返回按键的ASCALL码,建议用which//event方法,两个同时使用,相当于事件里边添加"return false;"
event.stopPropagation(); //阻止冒泡
event.preventDefault(); //阻止浏览器事件默认行为
注意:jQuery中,获取和设置类似disabled和checked属性时,用prop()方法代替attr(),只有true/false值。
二、jQuery动画
/*
*params:动画的最终样式或值的效果,如{left:"+=500px"},left会进行累加
*speed:动画时间,单位ms。slow为600,normal为400,fast为200
*callback:动画完成后执行的回调函数
*/
animate(params,speed,callback);
$div.animate().animate()... //按顺序执行动画
.stop([clearQueue],[goEnd]) //两个布尔值参数可选,无参数仅停止当前动画
.delay() //推迟执行 //动画简写
hide()/show() //相当于css("display":"none/block/inline")
slideUp()/slideDown() //通过高度上下拉伸隐藏
fadeIn()/fadeOut() //淡进、淡出
fadeTo(speed,~) //渐进方式调到指定透明度 //组合动画
toggle()
slideToggle()
fadeToggle() //animate(params,500),常用的params
{scrollTop:"-=50"}
{height:"+=50"}
【学习笔记】锋利的jQuery(三)事件和动画的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java虚拟机内存溢出异常--《深入理解Java虚拟机》学习笔记及个人理解(三)
Java虚拟机内存溢出异常--<深入理解Java虚拟机>学习笔记及个人理解(三) 书上P39 1. 堆内存溢出 不断地创建对象, 而且保证创建的这些对象不会被回收即可(让GC Root可达 ...
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Jquery绑定事件及动画效果
Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...
- Flutter学习笔记(36)--常用内置动画
如需转载,请注明出处:Flutter学习笔记(36)--常用内置动画 Flutter给我们提供了很多而且很好用的内置动画,这些动画仅仅需要简单的几行代码就可以实现一些不错的效果,Flutter的动画分 ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画 学习目标 熟悉蒙皮动画的术语: 学习网格层级变换 ...
- 锋利的jQuery之事件
jQuery中的事件和动画 JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如:当浏览器 ...
- 不写完不让回家的JQuery的事件与动画
在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...
- 第4章 jQuery的事件和动画(1)——事件篇
jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...
随机推荐
- JQUERY 选择
jQuery 选择器 jQuery 采用 CSS 一个选择选择 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取 ...
- Codeforces 479E Riding in a Lift(dp)
题目链接:Codeforces 479E Riding in a Lift 题目大意:有一栋高N层的楼,有个无聊的人在A层,他喜欢玩电梯,每次会做电梯到另外一层.可是这栋楼里有个秘 密实验室在B层,所 ...
- 鸟哥的私房菜上 xpenguins 设备(ubuntu 12.04)
看了一个暑假linux,我觉得很辛苦啊,要很好地利用linux并不是的easy... 今天装了一下鸟哥课后给的xpenguins软件,就是桌面特性软件.会有非常多企鹅下落,本以为能够非常轻松的搞定.没 ...
- hdu 1814 Peaceful Commission (2-sat 输出字典序最小的路径)
Peaceful Commission Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- EpPlus读取生成Excel帮助类+读取csv帮助类+Aspose.Cells生成Excel帮助类
大部分功能逻辑都在,少量自定义异常类和扩展方法 ,可用类似代码自己替换 //EpPlus读取生成Excel帮助类+读取csv帮助类,epplus只支持开放的Excel文件格式:xlsx,不支持 xls ...
- 【spring教程之二】spring注射剂xml构造方法参数
1.上述续,假设你想注入bean当文件,传递给构造函数的参数.主要的变化是需要spring.xml配置文件来配置. <?xml version="1.0" encoding= ...
- s3c2440 的 rtc 操作
实时时钟(RTC)其主要功能是电源故障的制度下,使用后备电源,时钟继续.为了不浪费时间信息. s3c2440内部集成了RTC模块,并且用起来也十分简单. 其内部的寄存器BCDSEC,BCDMIN,BC ...
- 如何利用【百度地图API】进行定位?非GPS定位
原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...
- 完整具体解释GCD系列(二)dispatch_after;dispatch_apply;dispatch_once
原创Blog,转载请注明出处 本文阅读的过程中,如有概念不懂,请參照前专栏中之前的文章,假设还有疑惑,请留言. 这是我关于GCD专栏的地址 http://blog.csdn.net/column/de ...
- 九度oj题目&吉大考研11年机试题全解
九度oj题目(吉大考研11年机试题全解) 吉大考研机试2011年题目: 题目一(jobdu1105:字符串的反码). http://ac.jobdu.com/problem.php?pid=11 ...