• 【原】《锋利的JQuery》读书笔记(三)


     

    三、JQuery中的事件和动画

    1、$(document).ready()  执行时机——DOM就绪

    2、load()方法

        【1】如果绑定window   $(window).load() 所有元素都加载完才执行

        【2】如果绑定元素, 元素加载完就执行

    3、$(this) 将当前的DOM元素转成JQuery对象

    4、is()方法用于判断

    5、绑定事件 bind() ——形式 bind("click",function(){})

    6、绑定事件的简写:去掉bind() ,直接 .click(function(){})

    7、合成事件两个

       hover() ——>鼠标悬停切换

       toggle()——>鼠标单击切换,可见状态切换

    8、事件冒泡

        【1】定义:后代中事件触发会逐级向上触发父级的事件

         【2】停止事件冒泡:

                  bind("click",function(event){

                   ........

                   event.stopPropagation();   //写上这句就不会触发上级的事件了

                    });

         【3】阻止默认的行为:点击按钮会提交、点击链接会跳转

                event.preveentDefault();

         【4】以上两种情况可以直接用一句话搞定:return false;

    9、事件对象

    【1】event.type() 事件类型

    【2】event.preventDefault() 阻止默认事件

    【3】event.stopPropagation()停止事件冒泡

    【4】event.target 获得触发事件的元素

    【5】event.pageX()/event.pageY() 鼠标的x,y 坐标

    【6】event.which 鼠标单击哪个键(1,左 2、中  3、右)

    【7】event.metakey()   获得<ctrl>按键

    10、移除事件  unbind()

    [1]unbind(type) 移除特定的一类事件

    [2]unbind(type,func()) 移除某个事件

    [3]unbind() 移除所有事件

    one() 绑定的事件只触发一次

    11、模拟操作 trigger()

    12、bind的其他功能

    绑定多个事件

    添加事件命名空间

    相同事件名称,不同命名空间的执行方法

    13、JQuery的动画

    【1】可见、不可见

    show()或 show(1000)

    hide() 或hide(1000)

    【2】淡入淡出

    fadeIn()

    fadeOut()

    【3】高度变化

    slideUp()

    sildeDown()

    【4】animate()方法

    animate(样式,速度,动画完成时的方法)————都是可选的

    14、多重动画:按照动画的顺序与动画拆开写

    15、动画回调函数:解决动画结束后欲改变CSS样式或执行某些行为的方法

    16、stop()停止元素的动画

           stop(true) 停止多个连续的动画

          stop(true,true) 停止当前动画并到达当前动画的末状态

    17、判断是否处于动画状态

    $(element).is(":animated") 返回布尔值

    18、其他动画

     toggle() 切换隐藏、可见

    slideToggle() 切换改变高度的隐藏、可见

    fadeTO(600,0.2)  0.6秒调整到指定的2%不透明度 

    作者:Tony zhao 欢迎访问:找与淘网

    本文出处:http://www.cnblogs.com/ytaozhao    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    Java 8 —— Lambda表达式
    Calendar 学习
    No provider available for the service com.xxx.xxx 错误解决
    ContextLoaderListener错误
    pom文件中引入依赖成功了,但是jar包找不着
    https=http+ssl
    Spring boot学习笔记
    Spring cloud 学习笔记
    记录一些注解的含义
    Linux笔记
  • 原文地址:https://www.cnblogs.com/ytaozhao/p/2567788.html
Copyright © 2020-2023  润新知