深入理解JQuery中的事件与动画

首先，使用JQuery事件与动画的效果比使用原生js来的方便得多，当然，最重要的是考虑到了浏览器的兼容性。

事件：

基于原生js，常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等，不再赘述。

事件绑定:

在文档加载完成后，使用bind(type,[data],func())方法绑定事件.

合成事件:

hover(enter-func,leave-func)相当于bind("mouseover")和bind("mouseleave").

toggle()模拟鼠标连点情况下的显示与隐藏事件toggle(show-func,hide-func).

事件冒泡：

在学习js高程（三）时，曾提及到大部分浏览器的事件处理机制是事件冒泡，也就是事件是逐级向上发生的。如果给你个内嵌元素绑定了事件，给他的父元素也绑定了一个相同type的事件，那么当事件处理内嵌元素时，父元素的事件也会随之触发，JQuery用一个方法可以阻止事件冒泡，使用event(事件对象).stopPropagation().

既让可以阻止事件冒泡，那么也可以阻止事件的默认行为，比如锚点元素a，当我们为a绑定一个click事件时，他不仅会实现我们绑定的事件函数，也会跳转到指定的href,那么要阻止这一跳转行为，需要用到event.preventDefault()来实现。这个方法也经常用在表单验证的过程中，当验证的字段不通过是，使用event.preventDefault()来阻止表单的submit。

当然，对于阻止事件冒泡和阻止默认行为，我们也可以使用return false，当我们要知道，return  false同时阻止了冒泡与默认行为，所以要慎用。

事件对象：

写在回调函数中的参数event即为事件对象。

type属性，获取事件的类型。

preventDefault()方法，阻止默认行为

stopPropagation()方法，阻止事件冒泡

target属性，获取事件触发的元素

pageX,pageY属性，获取光标相对于页面的坐标

mataKey属性，获取crtl按键

事件移除：

unbind(type,func-name)

第一个参数是移出事件的类型，第二个为移除事件的变量名，如果没有参数，删除该元素的所有事件，如果提供了type，则删除该元素所有类型为type的事件，若制订了第二个参数，则删除指定事件。

事件模拟：

trigger()，利用该函数实现进入页面时就触发指定事件（这个事件的类型是可以自定义的），trigger()有连个参数，第一个为type，第二个为[data]，这个是可选的，用于传递数据。我认为trigger()实际是上调用事件的过程。

动画：

Jquery中的动画用起来十分的方便。jquer所有的动画效果都可以添加时间参数。

show()与hide()：

显示与隐藏元素，hide()相当于display:none，而show()则把他还原（之前的display属性是什么，还原后还是什么）。可以通过设置参数来实现动画效果，show(),hide()接收关键字和时间值（ms）,关键字有slow(0.6s),fast(.2s),nomal(.4s)，他会同时改变元素的高度，宽度和不透明度。

fadeIn()与fadeOut():

改变元素的不透明度，fadeIn()提高不透明度，fadeOut()降低不透明度，直到display:none.

slideDown与SlideUp()

改变元素的高度，slideDown()元素自上到下延伸，slideUp()元素自下向上收缩。

animate()

当上面的方法实现的动画无法满足我们时，可以使用animate()来自定义动画。

animate(params,speed,callback)

params:包含样式的映射，如{left:"100px",heiget:"100px"}

speed:动画实现需要的事件(ms)

callback:动画完成时执行的函数。

像上面所写的params的栗子，实现的时left与height的同时改变，若不想同时改变，使用链式写法分开写。需要注意一点，css()不算动画，要想在动画执行完成后改变样式，需要把css()写入callback中.

判断元素是否处于动画状态is(":animated").

延迟操作:animate().delay(time).

其他动画:

toggle()显示与隐藏

slideToggle()改变高度的显示与隐藏。

fadeTo(time,op)通过指定时间将元素的不透明度变为op

fadeToggle()改变不透明度的显示与隐藏。

以上这篇深入理解JQuery中的事件与动画就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

    二.动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的

  • 分享一些常用的jQuery动画事件和动画函数

    部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px'); .css({ a:'12px', b:'#fff' }); .show(); .hide(); .toggle(); .fadeIn(); .fadeOut(); .fadeToggle(); .slideDown(); .slideUp(); .slideToggle(); .text('string'); .animate({ a:'40px', b:'ccc' },200) .fa

  • jQuery事件与动画基础详解

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                        执行时机 click(fn)                单击鼠标 $(document).ready(function(){ $("dd>img").click(function(){ $("dt>img").show(); }); mouseov

  • 一款基jquery超炫的动画导航菜单可响应单击事件

    一款基jquery超炫的动画导航菜单可响应单击事件

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

  • jQuery中animate动画第二次点击事件没反应

    用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • jQuery中事件与动画的总结分享

    jQuery中事件与动画的总结分享

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) --:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 window.onload() = function () { } $(function () { $("li").bind("click", function () { $(this).css("

  • JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • 深入理解JQuery中的事件与动画

    首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性. 事件: 基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述. 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover(enter-func,leave-func)相当于bind("mouseo

  • 深入理解jQuery中的事件冒泡

    深入理解jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="

  • JQuery中Bind()事件用法分析

    本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: 我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为.期中它的三个参数的意义分别如下: eventType是一个字符串类型的事件类型,就是你所需要绑定的事件.这类类型可以包括如下:blur, focus, focusin, focusout, load, re

  • JQuery中绑定事件（bind()）和移除事件（unbind()）

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript">     $(function(){        $('#btn').bind("click", function(){                      $('#test

  • 深入理解JQuery循环绑定事件

    深入理解JQuery循环绑定事件 <html> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <script typ

  • jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------

  • JQuery中DOM事件绑定用法详解

    本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m

随机推荐