jQuery里面的常用的事件和基础动画的实现
一:了解jquery里面常用的事件
二:了解基础动画的实现
1:加载DOM
在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行)
在jQuery里面中使用 $(document).ready(function()) 作为窗体加载事件(在DOM加载完成之后就会执行)
2:事件绑定
在文档加载完成后,可以使用bind()方法来对匹配元素进行特定事件的绑定
bind(type [data],function)
例子:$("div").bind("mouseover mouseout click",function(){ })
unbind() 对匹配的元素进行移除事件的方法 unbind("type") type--事件类型
3:常用的事件
blur 失去焦点 focus 获取焦点 focusin focusout load unload click dblclick mousedown mouseup
mousemove mouseover mouseout mouseenter mouveleave change select submit keydown keypress
keyup error
4: 阻止事件冒泡: event.stopPropagation()
5:触发事件 trigger()
$("#id").trigger("click") 常用模拟触发事件
6:事件对象的属性
event.type ----获取事件类型
event.stopPropagation() -----阻止事件冒泡
event.pageX ---获取光标相对于页面的X坐标
event.pageY --获取光标相对于页面的Y坐标
event.target --获取事件源对象(获取到触发事件的元素)
event.which --在鼠标单击事件中获取鼠标的左中右键
event.metaKey --为键盘事件中获取CTRL键
event.metaKey :jquery1.4以及之前CTRL按下为true 后续版本改为false
7: 动画
show("速度") 显示元素
hide("速度") 隐藏元素
toggle() 切换效果
fadeOut() fadeIn() 这两个方法是改变元素的不透明度(实现隐藏和显示的效果)
slideUp() slideDown() 这两个方法是改变元素的高度
自定义动画:animate(params,speed,function(){ }) //一个包含样式属性及值的映射 速度 在动画完成之后执行的方法
jQuery里面的常用的事件和基础动画的实现的更多相关文章
- jQuery事件篇---基础事件
写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 【转载】Python编程中常用的12种基础知识总结
Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
- Python编程中常用的12种基础知识总结
原地址:http://blog.jobbole.com/48541/ Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时 ...
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
- jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 选择器(第一节) 选择器的扩展方法(第一节) ...
- jQuery中的常用内容总结(二)
jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...
随机推荐
- set的便捷操作
认识集合 由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素有三个特征: 1.确定性(集合中的元素必须是确定的) 2.互异性(集合中的元素互不相同.例如:集合A={1,a},则a不能等于1) ...
- 【STM32H7教程】第5章 STM32H7下载和调试方法(MDK5)
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第5章 STM32H7下载和调试方法(MDK5) 本 ...
- 从壹开始前后端分离 39 || 想创建自己的dotnet模板么?看这里
缘起 开工是利啦!哈喽各位小伙伴,周三好呀,新的一年又开始了,老张给大家做个榜样,新的一年也要好好学习哟,这两天闲的无事就整理整理了这个系列的 Github 代码,增加了一个英文的 README ,然 ...
- Redis 缓存失效和回收机制续
二.Redis Key失效机制 Redis的Key失效机制,主要借助借助EXPIRE命令: EXPIRE key 30 上面的命令即为key设置30秒的过期时间,超过这个时间,我们应该就访问不到这个值 ...
- 微信小程序之滑动日历展示
滑动日历效果 效果预览 实现要求:顶部固定悬浮的是获取未来一周的日期,分为上下两部分,上面部分显示星期,下面则显示具体日期.今天则显示今天,可点击头部具体日期,可向左向右滑动. 实现代码 顶部日历 页 ...
- 结合JDK源码看设计模式——迭代器模式
前言: Iterator翻译过来就是迭代器的意思.在前面的工厂模式中就介绍过了iterator,不过当时介绍的是方法,现在从Iterator接口的设计来看,似乎又是一种设计模式,下面我们就来讲讲迭代器 ...
- 结合JDK源码看设计模式——适配器模式
定义: 将一个类的接口转换成客户期望的另外一个接口(重点理解适配的这两个字),使得接口不兼容的类可以一起工作适用场景: 已经存在的类,它的方法和需求不匹配的时候 在软件维护阶段考虑的设计模式 详解 首 ...
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- windowns10安装httpd
下载页面:https://www.apachehaus.com/cgi-bin/download.plx 下载内容:httpd-2.4.38-o102r-x64-vc14-r2.zip 解压到本地磁盘 ...
- Windows Server 2016-活动目录NTP时间同步
在实际生产域环境下,往往会有很多跟时间不同步相关的问题,简单的说几种常见的情景:本地客户端时间与域控时间不统一导致无法加域:每次客户端电脑输入密码到进入桌面环境等N久:Skype for Busine ...