zoukankan      html  css  js  c++  java
  • 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件

    4.1.1 加载DOM

    jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的。

    • 1.执行时机
      $(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用。此时,网页的所有元素对jQuery而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。

    若要当页面元素加载完后才进行方法调用,可以使用jQuery中另一个关于页面加载的方法—load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。如:

    • 2.多次使用
      JavaScript的onIaod事件一次只能保存对一个函数的引用,它会自动用后面的函数搜盖前面的函数,因此不能在现有的行为上添加新的行为。

    而jQuery的$(document).ready()方法能够很好地处理这些情况,每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。例如如下 jQuery代码:

    会先弹出字符串“one”对话框,然后弹出字符串“two”对话框。

    • 3.简写方式

      可简写为:

      另外,$(docurnent)也可以简写为$()。当$()不带参数时,默认参数就是”document”,因此可以简写为:

    4.1.2 事件绑定

    在文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为:


    Note
    可以发现,jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如鼠标单击事件在jQuery中对应的是click事件,而在JavaScript中对应的是onclick()函教。

    • 简写绑定事件
      像click,mouseover和mouseout这类事件,在程序中经常会使用到,jQuery为此也提供了一套简写的方法。简写方法和bind[)方法的使用类似,实现的效果也相同,惟一的区别是能够减少代码量。

    4.1.3 合成事件

    jQuery有两个合成事件——hover()方法和toggle()方法。

    • 1.hover()方法
      语法结构为:

      hover()方法用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第1个函数( enter ) ;当光标移出这个元素时,会触发指定的第2个函数( leave )。

    • 2.toggle()方法
      语法结构为:

      toggle()方法用于模拟鼠标连续单击事件。第1次.单击元素,触发指定的第1个函数(fn1);当再次单击同一元素时,则触发指定的第2个函数(fn2 );如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

    4.1.4 事件冒泡

    • 1.什么是冒泡
      在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时<body>元素上也绑定了click事件。

    只单击内部<span>元素,就会触发外部<div>元素和<body>元素上绑定的click事件。这是由事件冒泡引起的。

    之所以称为冒泡,是因为事件会按照DoM的层次结构像水泡一样不断向上直至顶端,如下图:

    • 2.事件冒泡引发的问题
      事件对象
      在程序中使用事件对象非常简单,只需要为函数添加一个参数,jQuery代码如下:

      这样,当单击“element”元素时,事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。

    停止事件冒泡
    停止事件冒泡以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡泡。

    阻止默认行为
    网页中的元素有自己默认的行为,例如,单击超链接后会跳转、单击“提交”按钮后表单会提交,有时需要阻止元素的默认行为。
    在jQuery中,提供了preventDefault()方法来阻止元素的默认行为。如当输入值不合法时,阻止表单提交:

    事件捕获
    事件捕获和事件冒泡是刚好相反的两个过程,事件捕获是从最顶端往下开始触发。
    还是冒泡事件的例子,其中元素的click事件会按照以下顺序捕获:

    Note:
    停止事件冒泡stopPrapagation()方法和阻止默认行为preventDefault()方法有种简写方式:

    或者

    改写为:

    4.1.5 事件对象的属性

    (1)event.type()方法
    该方法的作用是可以获取到事件的类型。如“click”。

    (2)event.preventDefault()方法
    该方法的作用是阻止默认的事件行为。

    (3)event.stopPropagation()方法
    该方法的作用是阻止事件的冒泡。

    (4)event.target()方法
    该方法的作用是获取到触发事件的元素。

    (5)event.pageX()/event.pageY()
    该方法的作用是获取到光标相对于页面的x坐标和y坐标。

    (6)event.which()方法
    该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键; 在键盘事件中获取键盘的按键。

    (7)event.metaKey()方法
    该方法为键盘事件中获取ctrl按键。

    4.1.6 移除事件

    • 1.移除按钮元素上以前注册的事件
      如当点击id为delAll的元素时,移除id为btn的元素的click事件,jQuery代码为:

      unbind()方法结构:

      第1个参数是事件类型,第2个参数是将要移除的函数,具体说明如下。
      (1)如果没有参数,则删除所有绑定的事件。
      (2)如果提供了事件类型作为参数,则只删除该类型的绑定事件。
      (3)如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数会被删除。(看见下面的例子)

    • 2.移除<button>元素的其中一个事件


      当单击“删除第二个事件”按钮后,再次单击“点击我”按钮,显示下图效果:

      另外,对于只需要触发一次,随后就要立即解除绑定的情况,jQuery提供了一种简写方法——one()方法。one()方法可以为元素绑定处理函数。当处理函数触发一次后,立即被删除。即在每个对象上,事件处理函数只会被执行一次。

    4.1.7 模拟操作

    trigger(type, [,data])

    • 1.常用模拟
      以上的例子都是用户必须通过单击按钮,才能触发click事件,但是有时,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。

    在jQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。当页面装载完毕后,就会立刻输出想要的效果:

    也可以直接用简化写法click(),来达到同样的效果:

    • 2.触发自定义事件
      trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件,jQuery代码如下:

      想要触发这个事件,可以使用以下代码来实现:

    • 3.传递数据
      下面是一个传递数据的例子:

    • 4.执行默认操作
      trigger()方法触发事件后,会执行浏览器默认操作。例如:

      以上代码不仪会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(这是浏览器的默认操作)。

    如果只想触发绑定的focus事件,而不想执行浏览器默认操作,可以使用jQuery中另一个类似的方法—triggerHandler()方法。

    文本框只触发绑定的focus事件,不会得到焦点。

    4.1.8 其他用法

    • 1.绑定多个事件类型

      等同于:

    • 2.添加事件命名空间,便于管理
      例如可以把为元素绑定的多个事件类型用命名空间规范起来,jQuery代码如下:

    • 3.相同事件名称,不同命名空间执行方法
      例如可以为元素绑定相同的事件类型,然后以命名空间的不同按需调用 jQuery代码如下:

      当单击 div 元索后,会同时触发click事件和click.plugin事件。如果只是单机button元素,则只触发click事件,而不触发click.plugin事件。注意,trigger(“click!)后面的感叹号的作用是匹配所有 不包含 在命名空间中的click方法。

    4.2 jQuery中的动画

    4.2.1 show()方法和hide()方法

    • 1.show()方法和hide()方法
      $("element").hide(); 效果等同于 element.css("display","none");
      $("element").show()

    • 2.show()方法和hide()方法让元素动起来
      元素慢慢地显示出来,可以为show()方法指定一个速度参数,例如,指定一个速度关键字“slow”。jQuery代码如下:
      $("element").show("slow"); 或者指定时间(毫秒) $("element").show(1000);
      hide()方法与之类似。


      Note
      有参数时如show(600)或hide(600),会同时影响“内容”的高度、宽度和不透明度。若只想影响其中某个维度,则使用下面介绍的方法。

    4.2.2 fadeIn()方法和fadeout()方法

    与show[)方法不相同的是,fadeln()方法和fadeOut()方法只改变元素的不透明度。

    4.2.3 slideUp()方法和slideDown()方法

    这两个方法只会改变元素的高度。 > Note: jQuery中的任何动画效果,都可以指定3种速度参数,即“slow”、”normal”和”fast” (‘时间长度分别是0.6秒、0.4秒和0.2秒)。当使用速度关键字时要加引号,例如show(“slow”),如果用数字作为时间参数时就不需要加引号,例如show(1000).

    4.2.4 自定义动画方法animate()

    其语法结构为: 参数说明如下: ( 1 ) params: 一个包含样式属性及值的映射,比如{property1 :”value 1” , property2:”value2”, ..}。 ( 2 ) speed: 速度参数,可选。 ( 3 ) callback: 在动画完成时执行的函数,可选。
    • 1.自定义简单动画
      例如,使得id为panel的元素在点击是横向移动:
    • 2.累加、累减动画
      如果在500px之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。代码如下:
    • 3.多重动画
      (1)同时执行多个动画
      例如在元素向右滑动的同时,放大元素的高度。

      (2)按顺序执行多个动画(以下是链式写法)
    • 4.综合动画
      使用链式方式对多个动画进行排队。

    4.2.5 动画回调函数

    如集想在最后动画中改变元素的CSS样式,直接将css()方法附加在动画后面,并不能达到预期效果。出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。代码如下:

    4.2.6 停止动画和判断是否处于动画状态

    • 1.停止元素的动画
      很多时候需要停止匹配元素正在进行的动画,例如上例的动画,如果需要在某处停止动画,需要使用stop()方法。stop()方法的语法结构为:

      参数cIearQueue和gotoEnd都是可选的参数,为Boolean值(ture或 false) 。
      (1)clearQueue代表是否要清空未执行完的动画队列;
      (2)gotoEnd代表是否直接将正在执行的动画跳转到末状态,通常用于后一个动画需要基于前个动画的末状态的情况,可以通过stop(false,true)这种方式来让当前动画直接到达末状态;
      (3)若没有参数,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。

    Note:
    注意,jQuery只能设置正在执行的动画的最终状态,而没有提供直接到达未执行动画队列最终状态的方法。

    • 2.判断元素是否处于动画状态
      在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致。户快速在某个元素上执行animate()动画时,就会出现动画积累。解决方法是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。代码如下:

    4.2.7 其他动画方法

    除了上面提到的动画方法,jQuery中还有3个专门用于交互的动画方法。
    .toggle( speed, [callback])。
    .slideToggle( speed, [callback])。
    .fadeTo( speed, opacity, [callback])。

    • 1.toggle()方法
      toggle()方法可以切换元素的可见状态。如果元素是可见的,则切换为隐藏的;如果元素是隐藏的,则切换为可见的。

      相当于:
    • 2.slideToggle()方法
      slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

      相当于:

    • 3.fadeTo()方法
      fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。

    4.2.8 动画方法概括

    • 1.改变样式属性

    • 2.动画队列
      (1)一组元素上的动画效果
      当在一个animate()方法中应用多个属性时,动画是同时发生的.
      当以链式的写法应用动画方法时,动画是按照顺序发生的。
      (2)多组元素上的动画效果
      默认情况下,动画都是同时发生的。
      当以回调的形式应用动画方式时,动画是按照回调顺序发生的。

    另外,在动画方法中,要注意其他非动画方法会插队,例如css()方法要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中。

  • 相关阅读:
    FEniCS 1.1.0 发布,计算算术模型
    Piwik 1.10 发布,增加社交网站统计
    淘宝褚霸谈做技术的心态
    CyanogenMod 10.1 M1 发布
    Druid 发布 0.2.11 版本,数据库连接池
    GNU Gatekeeper 3.2 发布
    Phalcon 0.9.0 BETA版本发布,新增大量功能
    EUGene 2.6.1 发布,UML 模型操作工具
    CVSps 3.10 发布,CVS 资料库更改收集
    Opera 移动版将采用 WebKit 引擎
  • 原文地址:https://www.cnblogs.com/myitroad/p/7402176.html
Copyright © 2011-2022 走看看