一 事件

1 加载DOM事件

$(document).ready():执行时机:DOM元素准备就绪
            执行次数:多次
            简单写法:原:$(document).ready(function(){})
                                    简1:$().ready(function(){})
                                    简2:$(function(){})
window.onload(): 执行时机:页面所有元素准备就绪
         执行次数:1次
           简写:无

2 事件绑定与移除事件

  事件绑定:

      bind(type,[data],fn):type:事件类型, data:可选择参数,自定义餐宿,fn:绑定的处理函数
      one(type,[data],fn):同bind()方法

      bind()方法与one()方法区别:bind():无限触发
                one():只触发一次

      绑定多个事件类型:
              bind("type1 type2 ....typeN",function(){})

      js事件绑定与jquery事件绑定区别:jQuery事件绑定类型少了on

        例如:js中鼠标单击事件为:onclick(),jquery中为click()

  事件移除:

      移除按钮上以前注册的事件:unbind([type],[data])
      同时移除多个事件:unblind(type1).unbind(type2)......unbind(typeN)

3 合成事件

  hover(enter,leave):模拟鼠标悬停事件,光标移上出发enter,移开出发leave   用于替代bind("mouseenter")和bind("mouseleave")  

  toggle(fn1,fn2,......,fnN):模拟鼠标连续单击事件,切换元素显示状态

4 事件冒泡

    定义:子元素和父元素绑定同样的事件,子元素该事件被触发了,父元素也相应的触发,事件按照特定顺序由里往外响应

    引发的问题及解决方案: 问题:引起预料之外的结果 解决方案:1 事件注册之后return false; 2 event.stopPropagation(); 注:event是由函数中传下来的

    阻止默认行为:preventDefault()

5 事件对象属性

    event.type():获取事件类型
    event.preventDefault():阻止默认事件行为
    event.stopPropagation():阻止事件冒泡
    event.target():获取到触发事件的元素
    event.relatedTarget()
    event.pageX()和event.pageY():获取到光标相对于页面x坐标和y左标
    event.which():鼠标单击事件中,获取到鼠标的左,中,右键
    event.metaKey():键盘事件中获取<ctrl>按键
    event.originaIEvent():指向原始的事件对象

6 事件捕获:从最顶端往下触发
   缺陷:并非所有浏览器都支持事件捕获 解决方案:使用原生js

二 动画

1 show()和hide():显示与隐藏
     1) 无参:<<==>>css("display","none/block/inline")
     2) 有一个参数(speed):动画速度

2 jQuery Fading():实现元素的淡入淡出效果
     1)fadeIn():提高元素不透明度,直至隐藏元素显示
        语法:$(selector).fadeIn([speed],[callback]);
          speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
          callback:函数执行完后的回调函数名称。
     2)fadeOut():降低元素不透明度,直至可见元素消失
            语法:$(selector).fadeOut([speed],[callback]);
          speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
          callback:函数执行完后的回调函数名称。

     3)jQuery fadeToggle():在 fadeIn() 与 fadeOut() 方法之间进行切换
          如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
          如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

     4)jQuery fadeTo():允许渐变为给定的不透明度(值介于 0 与 1 之间)。
        语法:$(selector).fadeTo(speed,opacity,[callback]);
          speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
          opacity:数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
          callback: 函数执行完后的回调函数名称。

3 jQuery 滑动方法

     1)slideUp():向上滑动元素。
        语法:$(selector).slideUp([speed],[callback]);
          speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
          callback:函数执行完后的回调函数名称。

     2)slideDown():向下滑动元素
        语法:$(selector).slideDown([speed],[callback]);
          speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
          callback:函数执行完后的回调函数名称。

     3)slideToggle():在 slideDown() 与 slideUp() 方法之间进行切换
        语法:$(selector).slideToggle([speed],[callback]);
          speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
          callback:函数执行完后的回调函数名称。

4 自定义的动画

    animate():创建自定义动画。
        语法:$(selector).animate(params,[speed],[callback]);
          params:定义形成动画的 CSS 属性。
          speed:规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
          callback:动画完成后所执行的函数名称

    animate()操作多个属性(多重动画)

  1. $("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px';});});

    animate() - 使用相对值(累加动画,累减动画)

  1. $("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'-150px'});});

    animate() - 使用队列功能

  1. $("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");
  2. div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});

5 动画回调(callback):动画执行完毕后所执行的操作

6 停止动画和动画状态判断

    停止动画:stop():动画或效果完成前进行强制性停止。

        适用范围:用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

        语法:$(selector).stop([stopAll],[goToEnd]);
            stopAll:是否清除动画队列。默认:false
            goToEnd:是否立即完成当前动画。默认: false。

无参例:

  1. $("#stop").click(function(){$("#panel").stop();});

有参数:

  1. $("#stop").click(function(){$("#panel").stop(true);});

    状态判断:is(":animated")

7 动画队列
    1)以链式方式添加动画时,动画阿布顺序执行
    2)默认情况:动画同时发生,当以回调形式应用动画时,动画按回调顺序发生

                                                                          ====完

web技术教程:http://www.w3school.com.cn/index.html

jQuery事件与动画的更多相关文章

  1. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  2. JQuery 事件与动画

    第一大部分 提纲 事件与动画 一.事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件. onclick - click ondblclick - db ...

  3. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  4. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  5. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

  6. JQuery事件与动画总结

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...

  7. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

  8. python 之 前端开发( jQuery事件、动画效果、.each()、 .data())

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  9. jQuery事件和动画

    1.toggle事件 <!DOCTYPE html>   <html>   <head lang="en">   <meta charse ...

随机推荐

  1. PHP添加、更新solr索引

    <?php $options = array ( 'hostname' => 'localhost', 'port' => '8080', 'path'=>'solr/help ...

  2. 由问题引出的fsck命令

    博客停了两天,今天打开linux虚拟机,突然间报错了,顿时心中一喜(是吗?),当时看了下错误说明,好像有关于时间的问题(某个时间是未来时间)..然后我就去兴匆匆的修改系统时间,重启...唉,没作用.只 ...

  3. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

  4. js学习笔记之:时间(三)

    今天来学习一个简单的时间应用:时间的倒影,如图所示:   主要知识点: 1  获取系统的时间值:2 建立一个div的倒影 div的倒影主要利用css来控制,函数值为:filter:flipv() 步骤 ...

  5. php中jsonp的跨域实例

    我们现在www.test.com这个域名下面有这么个html文件testjsonp.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  6. Apache 相关配置

    1. HTTP缓存设置 ExpiresActive On #ExpiresDefault 设置全局缓存时间,将导致一些get请求不能连续执行 #ExpiresDefault "access ...

  7. HDU2669 第六周练习I题(扩展欧几里算法)

    第六周练习I题 I - 数论,线性方程 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...

  8. jquery ajax用例样板

    $.ajax({ url: '${managerPath}/customer/updateOrder.do', type: 'POST', async: false, data: { id: date ...

  9. Spring ApplicationContext的事件机制

    ApplicationContext的事件机制是观察者设计模式的实现,通过 ApplicationEvent 类和 ApplicationListener 接口,可以实现 ApplicationCon ...

  10. 机器学习公开课~~~~mooc

    https://class.coursera.org/ntumlone-001/class/index