第四章 jQuery中的事件和动画

一、jQuery中的事件

  • 加载DOM

在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法。这两者有很大的不同:

  1. 执行时机

window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行。而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕。

有时我们需要的图片没有加载完毕,我们需要的图片宽高可能不一定有效。这种情况可以使用jQuery的load()方法。load()方法会在元素的onload中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容加载完毕后触发。如果处理函数绑定在元素上,则会在元素内容加载完毕后触发。

$(window).load(function({}))等价于js的window.onload=function(){}

2. 多次使用

window.onload方法只能使用一次,否则后面的window.onload会覆盖前面的。这点在引入多个·js时尤其困扰,但是jQuery中的$(document).ready()方法每次调用都会在现有的行为上追加新的行为,并按照注册顺序依次执行。

3.简写方式

$(document).ready()方法可以简写为$(function(){})或者$().ready(),这点在jQuery源码中已经进行过处理,他们的功能是一样的。

  • 事件绑定

使用bind()方法给匹配元素进行特定事件的绑定。

格式为bind(type [.data] fn);

第一个参数是事件类型,包括:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等。也可以自定义名称。

第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定事件的处理函数。

 $(function () {
$(".head").bind("click",function(){ //给.head元素添加一个点击事件
var $content=$(this).next(); //定义一个局部变量保存$(this).next
if($content.is(":visible")){ //实现点击显示再点击隐藏的切换
$content.hide();
}else{
$content.show();
}
})
});

像blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、 mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、 keydown、keypress、keyup、error等常用事件jQuery提供了简写,eg: $(".head").mouseover(function(){}).mouseout(function(){});

PS: bind()方法的其他用法
  1. 绑定多个事件类型
 $(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
});

2.添加事件命名空间便于管理

 $(function(){
$("div").bind("mouseover.plugin",function(){
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("div").click(function(){
$("div").unbind(".plugin");
});
});

3.相同事件名称,不同命名空间执行方法

 $(function(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin",function(){
$("body").append("<p>click.plugin事件</p>");
});
$("button").click(function(){
$("div").trigger(".click!"); //!作用是匹配所有不包含在命名空间中的click方法
});
});
  • 合成事件

  1. hover()

hover()方法用于模拟光标悬停效果,鼠标移上触发第一个函数,鼠标移除触发第二个函数。用来替代jQuery中的bind("mouseenter")和bind("mouseleave")。

格式: hover(enter,leave);

以上代码通过hover()事件就可以简写为:

 $(function () {
$(".head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});

PS:hover()方法必须传入2个function,即时有一个操作函数没有也要写上。

2. toggle()

toggle()方法用于模拟鼠标的连续单击事件。第一次单击触发第一个函数,第二次单击触发第二个函数。如果有更多函数则依次触发,然后每次单击都重复对这几个函数的轮番调用。

PS:toggle()方法还可以实现切换元素的可见状态。

 $(function () {
$(".head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
});
});
  • 事件冒泡与事件捕获

当页面元素触发事件的时候,该元素的容器以及页面都会按照特定顺序响应该元素的触发事件,事件的传播顺序就叫事件的流程。事件流分为冒泡型和捕获型。冒泡型事件流所有浏览器都支持,它是从明确的事件源到不明确的事件源依次向上触发。由于事件流的存在,我们有必要对时间的作用范围进行限制。捕获型事件流不是所有主流浏览器都支持,它是从不明确的事件源到明确的事件源依次向下触发,这种缺陷无法通过JS解决,因此jQuery不支持事件捕获。

  1. 事件对象

jQuery事件对象创建只需要为函数添加一个参数即可。创建的事件对象只有事件处理函数才能访问到。事件执行完毕后,事件对象就被销毁。

 $("element").bind("click",function(e){    //e:事件对象
//...
});

2.停止事件冒泡

使用stopPropagation()方法停止事件冒泡。

 $("span").bind("click",function(e){                     //e是事件对象
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
e.stopPropagation(); //停止事件冒泡
});

3.阻止默认行为

通过preventDefault()阻止元素的默认行为。

 $("input").bind("click",function(e){                     //e是事件对象
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
e.preventDefault(); //阻止事件默认行为
});

如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的简写方式。e.preventDefault()可以改为return false;

  • 事件对象属性

  1. e.type  获取事件的类型。
  2. e.preventDefault()方法   阻止浏览器默认行为。
  3. e.stopPropagation()方法  阻止事件的冒泡。
  4. e.target  获取触发事件的元素。
  5. e.relatedTarget  获取相关元素。
  6. e.pageX和pageY  获取光标相对于页面的x坐标和y坐标。
  7. e.which  单击事件中获取鼠标的左、中、右键;键盘事件获取键盘的按键。
  8. e.metaKey 键盘事件中获取ctrl键。
  • 移除事件

通过unbind()方法移除事件。

unbind([type],[data]);

第一个参数是事件类型,第二个参数是将要移除的函数。如果没有参数,则删除所有绑定的事件。如果提供了事件类型作为参数,则只删除该类型的绑定事件。如果把绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

 $("p").click(function(){
$("#btn").unbind();
});

只需要触发一次随后就立即删除绑定的情况,可以使用one()方法。one()方法可以为元素绑定处理函数。当处理函数触发一次后,立即被删除。

  • 模拟操作

  1. 常用模拟

使用trigger()方法完成模拟操作。 eg:   $("#btn").trigger("click"); 也可以简写为$("#btn").click();

2. 触发自定义事件

 $(function(){
$("div").bind("myclick",function(){
$("body").append("<p>我的自定义事件</p>");
});
$("div").trigger("myclick");
});

3. 传递数据

trigger(type,[data])方法有两个参数,第一个参数是触发的事件类型,第二次参数是要传递给事件处理函数的附加数据,以数组形式传递。

4. 执行默认操作

trigger()方法触发事件后,会执行浏览器默认操作。如果只想触发绑定事件,而不想执行浏览器默认操作,使用triggerHandler()方法。

二、jQuery中的动画

  • 动画类型

方法 说明
hide()和show() 同时修改高度宽度不透明度
fadeIn()和fadeOut() 改变不透明度
slideUp()和slideDown() 改变高度
fadeTo() 改变不透明度
toggle() 用来代替hide()和show()
slideToggle() 用来代替slideUp()和slideDown()
fadeToggle() 用来代替fadeIn()和fadeOut()
animate() 自定义动画以上动画内部其实都是调用了animate方法
  • 停止动画

如果需要在某处停止动画,需要使用stop()方法。

stop([clearQueue],[gotoEnd]);

clearQueue和gotoEnd都是可选参数,为Boolean值。clearQueue是是否要清空未执行完的动画队列,gotoEnd是是否直接将正在执行的动画跳转至末状态。

  • 判断元素是否处于动画状态

为避免动画累积造成的动画与用户行为不一致,首先判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。

 if($(element).is(":animated")){   //判断元素是否处于动画状态
//如果没有进行动画,则添加新的动画
}
  • 延迟动画

使用delay()方法对动画进行延迟操作。delay()方法既可以推迟动画队列中函数的执行,也可以用于自定义队列。

$(this).animate({left:"400px"},3000)
.delay(1000);
  • 动画队列

当一个animate()方法中应用多个属性时,动画是同时发生的。当链式的写法应0用动画方法时,动画是按顺序发生的(除非queue选项值为false)。

【锋利的jQuery】学习笔记04的更多相关文章

  1. 锋利的JQuery 学习笔记

    第一章                认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...

  2. 锋利的jquery学习笔记

    1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...

  3. 锋利的jQuery学习笔记之jQuery选择器

    在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...

  4. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  5. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  6. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  7. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  10. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

随机推荐

  1. sudo easy_install MySQL-pythonubuntu常用命令

    修改密码 sudo passwd root 安装openssh-server sudo apt-get install openssh-server 安装easy_install sudo wget ...

  2. HDU-2568 前进

    http://acm.hdu.edu.cn/showproblem.php?pid=2568 前进 Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  3. Oracle statspack 安装及使用

    转载:http://blog.csdn.net/joinplay/article/details/23358133 oracle statspack 工具从oracle 8.1.6开始被引用,从ora ...

  4. JavaScript高级程序设计51.pdf

    (续上篇) 模拟鼠标事件 var btn=document.getElementById("myBtn"); //创建事件对象 var event=document.createE ...

  5. JavaScript高级程序设计35.pdf

    遍历 “DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker,两个类型能够基于给定的起点对DOM结构执行深度优先(depth-fir ...

  6. usaco 奶牛集会 && 奶牛抗议

    奶牛集会 Description 约翰家的N头奶牛每年都会参加“哞哞大会” .哞哞大会是世界奶牛界的盛事.集会上 的活动很多,比如堆干草,跨栅栏,摸牛仔的屁股等等.当然,哞哞大叫肯定也包括在内. 奶牛 ...

  7. 17 Great Machine Learning Libraries

    17 Great Machine Learning Libraries 08 October 2013 After wonderful feedback on my previous post on ...

  8. Yii中用递归方法实现无限级分类

    用递归方法实现多级分类,适合分级不太多的分类,如三到四级. 数据库结构: Model中(Category.php) /** * 获取全部分类信息 */ public function getAllca ...

  9. flashback drop(2015-2-3学习日记)

    知识面是由知识点组成的,你在研究某一个知识点的时候常常会遇到另一个知识点,然后你去研究那个知识点,又会带出更多的知识点,最终组成了知识面. 今天在看书的时候看到一个删除表的语句: DROP TABLE ...

  10. 微信开发第2章 通过appid appsecret获取accesstoken

    通过 appid appsecret是可以获取accesstoken的 ,请不要一直获取,不然会把token的机会浪费掉,获取到后7200秒后失效,建议保存为6000秒到7000秒左右,具体可以查看微 ...