zoukankan      html  css  js  c++  java
  • 6.6

    事件

    1、常用事件:

    click(function(){...}) 当点击时

    hover(function(){...}) 当鼠标移动到上面时

    blur(function(){...}) 当光标消失时

    focus(function(){...}) 当光标出现时

    change(function(){...}) 域的内容改变时

    keyup(function(){...})  某个键盘按键被松开时

    Keydown  某个键盘按键被按下时

    load  一张页面或一幅图像完成加载

    2、事件绑定:

    .on(events[,selector],function() {})

    3、移除事件:

    .off(events[,selector],function(){})

    4、组织后续事件执行:

    return false   // 常见阻止表单提交等

    注意:

    clickkeydownDOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:

    $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件

        $(this).addClass('hover');

    });

    $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件

        $(this).removeClass('hover');

    });

    5、页面载入:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

    $(document).ready(function(){

    // 在这里写你的JS代码...

    })

    6、事件委托:

    $("table").on("click", ".delete", function () {

      // 删除按钮绑定的事件

    })

    动画效果:

    1// 基本:

    show([s,[e],[fn]])

    hide([s,[e],[fn]])

    toggle([s],[e],[fn])

    2// 滑动:

    slideDown([s],[e],[fn])

    slideUp([s,[e],[fn]])

    slideToggle([s],[e],[fn])

    3// 淡入淡出

    fadeIn([s],[e],[fn])

    fadeOut([s],[e],[fn])

    fadeTo([[s],o,[e],[fn]])

    fadeToggle([s,[e],[fn]])

    4// 自定义(了解即可)

    animate(p,[s],[e],[fn])

    补充:

    1、each:

    jQuery.each(collection, callback(indexInArray, valueOfElement))

    可以用return false来中间停止

    2、data:

    在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

    $("div").data("k",100);//给所有div标签都保存一个名为k,值为100

    $("div").data("k");//返回第一个div标签中保存的"k"的值

    $("div").removeData("k");  //移除元素上存放k对应的数据

    插件:jQuery.extend(object)    了解

  • 相关阅读:
    ESLint规则整理与实际应用
    node vue 项目git 管理
    Node.js安装及环境配置之Windows篇
    Windows服务 --- SqlDependency的使用
    插槽
    报表菜单的配置
    HTTP 错误 500.21
    项目部署错误 HTTP Error 500.19
    Steup factory 面板介绍
    Steup Factory 操作注册表
  • 原文地址:https://www.cnblogs.com/liuzeng/p/9146686.html
Copyright © 2011-2022 走看看