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】。

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

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

  1. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

  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. Salesforce Admin篇(三) Delegated Administrator

    项目中,我们可能会遇见以下的场景. 1. HR 经理针对申请者和工作相关的表的app会经常需要修改布局查看需要的页面的字段: 2. 开发者将record type对应的picklist values等 ...

  2. handlerAdapter与方法返回值的处理

    前提:处理器方法被调用并返回了结果 public void invokeAndHandle(ServletWebRequest webRequest, ModelAndViewContainer ma ...

  3. java中dao层和service层的区别是什么

    dao层中已经有操作数据库的方法了,为什么还要service层去封装?有什么好处? tanghui12321 | 浏览 131990 次  我有更好的答案  推荐于2017-10-06 18:44:5 ...

  4. 【iOS】PLA 3.3.12

    发件人 Apple Program License Agreement PLA We found that your app uses the Advertising Identifier but d ...

  5. [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了

    有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...

  6. redis分布式锁&队列应用

    分布式锁 setnx(set if not exists) 如果设值成功则证明上锁成功,然后再调用del指令释放. // 这里的冒号:就是一个普通的字符,没特别含义,它可以是任意其它字符,不要误解 & ...

  7. Linux基础文件打包

    一.打包与解压 (一).打包压缩 [root@linux ~]# tar -czf etc1.tar.gz /etc //-z 调用gzip [root@linux ~]# tar -cjf etc2 ...

  8. kylin Retrieving hive dependency...

    由于公司环境配置hive默认连接hiveserver2 ,不管hive cli 还是beeline cli都默认使用beeline cli,连接hive需要输入账号密码; 启动kylin 时会Retr ...

  9. 干货 | 博云基于OVS自研容器网络插件在金融企业的落地实践

    本文根据博云在dockerone社区微信群分享内容整理 过去几年博云在企业中落地容器云平台遇到了很多痛点,其中一个比较典型的痛点来自网络方面,今天很高兴跟大家聊聊这个话题并介绍下我们基于OVS自研的C ...

  10. 后端小白的VUE入门笔记, 进阶篇

    使用 vue-cli( 脚手架) 搭建项目 基于vue-cli 创建一个模板项目 通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli 如果没有安装的话,使用 ...