zoukankan      html  css  js  c++  java
  • jQuery事件以及动画

    jQuery事件以及动画

    一、jQuery事件

      加载DOM

      在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

      事件绑定

      对匹配的元素进行特定的事件绑定: bind()

      可以使用 jQuery 的 is() 方法判断元素是否可见

      合成事件

      hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.

      toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个,toggle() 的另一个作用是可以切换元素的可见状态.

      事件冒泡

      事件会按照 DOM 层次结构像水泡一样不断向上只止顶端

      解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.

      事件对象的属性

      事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到,事件处理函数执行完毕后, 事件对象就被销毁了.

      event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.

      移除事件

      移除某按钮上的所有  click 事件: $(“btn”).unbind(“click”)

      移除某按钮上的所有事件: $(“btn”).unbind();

      one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

    二、jQuery中的动画

      隐藏和显示

      hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(“display”, “none”);

      show(): 将元素的 display 样式改为先前的显示状态.

      以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来.

      以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度.

      其它动画

      fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失. fadeIn() 则相反.

      slideDown(), slideUp(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时, 这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.

      toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.

      slideToggle(): 通过高度变化来切换匹配元素的可见性.

      fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间).

    三、jQuery加载并解析XML(补充)

      JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.

      JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历

    如果,您对我的这篇博文有什么疑问,欢迎评论区留言,大家互相讨论学习。
    如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】。
    如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】。
    如果,您对我的博文感兴趣,可以关注我的后续博客,我是【AlbertRui】。

    转载请注明出处和链接地址,欢迎转载,谢谢!

  • 相关阅读:
    【JS】修改字体
    【git】.gitignore文件常用设置
    【CSS】让textarea在div里水平垂直都居中的三种办法
    【JS】随着进度条进展,逐个显示li节点
    【MySQL】The server time zone value 'xxxxxx' is unrecognized or represents more than one time zone 解决方案
    浅谈Web前端开发中的Touch事件
    [转]PostgreSQL与MySQL比较
    RDLC:An error occurred during local report processing
    [转]让你的PHP更安全
    [转]Win7或Windows server 2008中IIS7支持ASP+Access解决方法
  • 原文地址:https://www.cnblogs.com/albertrui/p/8491036.html
Copyright © 2011-2022 走看看