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

    一、jQuery中的事件:

      1、加载DOM:

        jQuery:$(document).ready();

        JavaScript:window.onload();

        $(window).load(function(){

        })  等价于

        window.onload = function(){}

      简写方式:

      (1)$(document).ready(functon(){})

      (2)$().ready(functon(){})

      (3)$(function(){})

      2、事件绑定:

        bind();

      3、合成事件:

      (1)hover() :用于模拟光标悬停事件。

      (2)toggle() :用于模拟鼠标连续单击事件。另一作用,切换元素的可见状态。

      4、事件冒泡:

        event.stopPropagation();  //停止事件冒泡

        event.preventDefault();  //阻止默认行为

        改写为:

        return false;

       事件捕获:

        jQuery不支持事件捕获,需要使用JavaScrip原生实现。

      5、事件对象的属性:

      (1)event.type

      (2)event.stopPropagation();

      (3)event.preventDefault();

      (4)event.target

      (5)event.relatedTarget

      (6)event.pageX、event.pageY

      (7)event.which

      (8)event.metaKEY

      6、移除事件:

        unbind();

        one();

      7、模拟操作:

        trigger(type,[data]);  //参数:类型、传递的数据

        $("btn").trigger("click");  简化写法:

        $("btn").click();

        注意:常用模拟、触发自定义事件、传递数据、具有执行默认操作的功能,例如:

             $("input".trigger("focus");  //触发元素绑定的focus事件,也会使input元素本身得到焦点(浏览器的默认操作)

            triggerHandler() :只触发绑定的focus事件,不执行浏览的默认操作。

      8、其它用法:

        bind();

        (1)绑定多个事件类型。

        (2)添加事件命名空间,便于管理。

        (3)相同事件名称,不同命名空间执行方法,trigger("click!");。

    二、jQuery中的动画:

      (1)show();  //同时修改元素的多个样式属性,高度、宽度、不透明度。

          将元素的display样式设置为先前的显示状态(block 或 inline,或其他除了 none 之外的值)

          .show("slow") :元素将在600毫秒内慢慢的显示出来。其它的关键字还有 normal 和 fast(长度分别为400毫秒和200毫秒),还可以指定一个数字,单位是毫       秒。方法 hide();也是适用的。show(600)方法会从上到下增大内容的高度,从左到右增大内容的宽度,同时增加内容的不透明度,直到内容完全显示。

      (2)hide();

          将元素设置css样式,display/none,等价于,.css("display","none")

      (3)fadeIn();  //改变元素的不透明度。增加不透明度。

      (4)fadeOut  //在指定的时间内降低元素的不透明度,直到元素完全消失(display:none)。

      (5)slideUp();  //改变元素的高度。元素又下到上缩短隐藏。  

      (6)slideDown();  //如果一个元素的display属性为none,调用该方法,这个元素将从上至下延伸显示

      注意:jQuery中的任何动画效果,都可以指定3种速度参数,即 slow 、normal 和 fast(时间分别是0.6秒、0.4秒、0.2秒),当使用速度关键字时要加引号,例如:show("slow");如果用数字作为时间的参数,不需要加引号,单位是毫秒,例如:show(1000);。

    2、自定义动画方法:

      animate();

      //简单动画、累加累减动画、多重动画([1]、同时执行多个动画,[2]、按顺序执行多个动画,动画队列。)、综合动画。

    3、动画回调函数:

      回调函数适用于jQuery中所有的动画效果方法。

    4、停止动画和判断是否处于动画状态:

      (1)停止元素的动画:

        stop([clearQueue],[gotoEnd]);

          参数clearQueue和gotoEnd都是可选参数,为Boolean值(true或false)。

          参数clearQueue代表是否要情况未执行完的动画队列。

          参数gotoEnd代表是否直接将正在执行的动画跳转到末状态。

      (2)判断元素是否处于动画状态:

        $("element").is(":animate");

      (3)延迟动画:

        delay();

    5、其他动画方法:

      (1)toggle(); :切换元素的可见状态。

      (2)slideToggle(); :通过高度变化来切换匹配元素的可见性。只调整元素的高度。

      (3)faseTo(); :把元素的不透明度以渐进方式调整到指定的值。只调整元素的不透明度。

      (4)fadeToggle(); :通过不透明度变化来切换匹配元素的可见性。只调整元素的不透明度。

    6、动画方法概括:

      改变样式属性:

    方法名 说明
    hide() 和 show() 同时修改多个样式属性,即高度、宽度、不透明度
    fadeIn() 和 fadeOut() 只改变不透明度
    slideUp() 和 slideDown() 只改变高度
    fadeTo() 只改变不透明度
    toggle() 用来代替hide()和show()方法,所以会同时修改多个样式属性,即高度、宽度和不透明度
    slideToggle() 用来代替slideUp() 和 slideDown(),所以只能改变高度
    fadeToggle() 用来代替fadeIn() 和 fadeOut()方法,所以只能改变不透明度

             特别注意:

    animate() 自定义动画方法,可以用它代替所以的动画方法
  • 相关阅读:
    Linux下安装python
    oracle 12c使用问题总结
    oracle下载地址
    Informatica PowerCenter下载地址
    主流ETL工具
    【phonegap】下载文件
    eclipse显示包的层次关系
    UltraISO 9.6.5.3237
    Windows操作系统设置代理
    wireshark常用的过滤命令
  • 原文地址:https://www.cnblogs.com/sunny-blog/p/4025651.html
Copyright © 2011-2022 走看看