第四章 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. 【HDOJ】1983 Kaitou Kid - The Phantom Thief (2)

    不仅仅是DFS,还需要考虑可以走到终点.同时,需要进行预处理.至多封闭点数为起点和终点的非墙壁点的最小值. #include <iostream> #include <cstdio& ...

  2. 深入详解SQL中的Null

    深入详解SQL中的Null NULL 在计算机和编程世界中表示的是未知,不确定.虽然中文翻译为 “空”, 但此空(null)非彼空(empty). Null表示的是一种未知状态,未来状态,比如小明兜里 ...

  3. [LeetCode#218] The Skyline Problem

    Problem: A city's skyline is the outer contour of the silhouette formed by all the buildings in that ...

  4. UVA_303_Pipe_(计算几何基础)

    描述 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=5&page ...

  5. Java中文乱码解决

    Jvm内部编码采用的是Unicode编码. 常见的字符编码集:ASCII编码,GBK编码,Unicode编码 UTF-8只是unicode的实现方式之一: UTF-8最大的一个特点,就是它是一种变长的 ...

  6. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  7. (转载)C++ const成员初始化问题

    (转载)http://www.189works.com/article-45135-1.html Const成员如其它任何成员一样,简单考虑其出现在三个位置:全局作用域.普通函数内部.类里面. 下面请 ...

  8. 搜索(另类状态BFS):NOIP 华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  9. Count Color POJ--2777

    Count Color Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32217   Accepted: 9681 Desc ...

  10. Red and Black

    Red and Black Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...