锋利的jQuery ——jQuery中的事件和动画(四)
一、jQuery中的事件
1)加载DOM
$(document).ready()和window.onload的区别
1》执行时机
$(document).ready(){} 方法内注册的事件,只要DOM就绪就会被执行。 window.onload则是所有内容加载完毕后才会触发。
2》多次使用
js的onload事件一次只能保存对一个函数的引用,他会自动用后面的函数覆盖前面的函数。
3》简写方式
$(document).ready(function(){ 编写代码})==$(function(){编写代码})=$().ready(function(){ });
2、事件绑定
文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以用bind()方法来匹配元素进行特定事件的绑定。
bind(type[,data],fn);
1》基本效果
2》加强效果
为了判断元素是否显示,可以使用jQuery中的is()方法来完成。
实现加强效果后,内容会隐藏和显示两种状态下切换。当相同的选择器在代码里多次出现时,用变量把它缓存起来。
3》改变绑定事件的类型
事件类型换成mouseover和mouseout。
除此之外,bind()方法还能绑定其他所有的javascript事件。
4》简写绑定事件
更好的减少代码量
3、合成事件
jQuery有两个合成事件,一个是hover(),一个是toggle(),都属于jQuery自定义的方法。
1》hover()方法
hover(enter,leaver)是光标悬停事件,移动到上面是触发enter,移除时触发leave。
hover(function(){},function(){})
2》toggle()方法
toggle()方法的语法结构是:toggle(fn1,fn2,。。fnN);
该方法用于鼠标连续单击事件,点击1次用fn1,点击2次用fn2.
3.》再次加强效果
addClass()和removeClass() 添加样式后添加行为。
4)事件冒泡
1》什么是冒泡事件,比如body>div>span 标签,每个元素都有click事件,那么点击span的时候同样也点击到了div和body,那么各个事件都会按照特定顺序响应click事件。
2》事件冒泡所引发的问题:有必要多事件的作用 范围进行限制。如用stopPropagation()方法来停止冒泡。 用preventDefault()方法来阻止元素的默认行为。如果想要同时停止事件冒泡和元素的默认行为,则需要用return false来代替。
事件捕获jQuery不支持,必须用原始的javascript;
5)事件对象的属性
1》event.type 可以获取到事件的类型。
2》event.preventDault()方法 和 event.stopPropagation()方法,一个是阻止默认的事件行为,一个是阻止事件的冒泡,这两种方法都经过jQuery封装后使之能兼容各类浏览器。
3》event.target 的作用是获取到触发事件的元素。
4》event.relatedTarget
5》evetn.pageX和event.pageY获取到光标相对于页面的X坐标和Y坐标。
6》event.which 方法的作用是在鼠标单击事件中获取到鼠标的左中右键;在键盘事件中获取键盘的按键。
7》event.metaKey 在键盘事件中获取<ctrl>按键
6)移除事件
锋利的jQuery ——jQuery中的事件和动画(四)的更多相关文章
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- 锋利的jQuery中的事件与动画
奋夜的奋斗 ---- 事件与动画 ---- 来自地狱的战镰 小小的单词难不倒我们哦!!!!!!! bind:绑定 unbind:接触绑定 toggle:栓牢 fadeou ...
- jQuery中的事件和动画效果
刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
随机推荐
- 7.28Assignment
1.考试题(7.27) + 2.插头dp 4道题 0/4 before 18:00 3.cdq分治 2道题理解 0/2 before 21:00 4.点分治 2道题 0/2 before 7:00 ...
- (76)深入浅出Mqtt协议
物联网(Internet of Things,IoT)时代机器之间(Machine-to-Machine,M2M)的大规模沟通需要发布/订阅(Publish/Subscribe)模式,轻量级.易扩展的 ...
- CSS 处理溢出强行换行
CSS折行样式 word-break:break-all;允许单词拆分折行 word-break:keep-all;只能在半角空格或连字符处换行. word-wrap:break-word;在长单词或 ...
- ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)A ASCII Area
A: 给你一个矩阵求'/' 和 '\' 围成的图形,简单签到题,有一些细节要考虑. 题解:一行一行的跑,遇到'/'和'\' 就加0.5, 在面积里面的'.' 就加1.用一个flag来判断是否在围住的图 ...
- Vue 项目构建
一.初始化项目 1.vue init webpack (fileName) 2.项目名称 3.项目描述 4.项目作者 5.是否依赖 .Vue 文件开发 第一个选项可以不依赖 .Vue 文件开发, 第二 ...
- Android传感器【转】
本文转载自:http://blog.csdn.net/ffmxnjm/article/details/52101592?locationNum=3&fps=1 传感器的意义 事实上,目前智能手 ...
- 数据结构和算法(Java版)快速学习(数组Array)
Java数组 在Java中,数组是用来存放同一种数据类型的集合,注意只能存放同一种数据类型. 用类封装数组实现数据结构 数据结构必须具有以下基本功能: ①.如何插入一条新的数据项 ②.如何寻找某一特定 ...
- zay大爷的神仙题目 D1T2-腐草为萤
题面如下 依照旧例放外链 [题目背景] 纤弱的淤泥中妖冶颓废在季夏第三月最幼嫩的新叶连凋零都不屑何必生离死别——银临<腐草为萤> [问题描述] 扶苏给了你一棵树,这棵树上长满了幼嫩的新叶, ...
- iOS应用将强制使用HTTPS安全加密-afn配置https(190926更新)
WWDC 2016苹果开发者大会上,苹果在讲解全新的iOS10中提到了数据安全这一方面,并且苹果宣布iOS应用将从2017年1月起启用名为App Transport Security的安全传输功能. ...
- 【python3】 抓取异常信息try/except
注意:老版本的Python,except语句写作"except Exception, e",Python 2.6后应写作"except Exception as e&qu ...