jQuery 事件和动画

jQuery 事件和动画

  上回说到jQuery的选择器,大家都应该知道了,jQuery的使用可以让我们少写很多的代码,达到一个轻量级的效果,那么既然都有选择器等等方便,那么事件的使用肯定也是不可能缺少的,另外还加入一系列的动画效果,下面我们一起来看看吧!!

  

事件处理

 

  直接绑定指定事件,事件类型即方法名,支持clickfocus、blur、submit等。

    $("#button").click(function(){

    //script goes here

    });

  用on来绑定事件,off来解绑事件,第一个参数为事件名,第二个参数为回调函数。1.7.2版本开始支持。

    $("#button").on('click',function(){

    //script goes here

    });

  在1.7.1或更早版本,需要用bind/unbind(常规绑定),live/die(预绑定)来替代on/off

  更多详细信息请参见jQuery APIEvents部分。

  jQuery还支持如下方法:

    .blur() 表单元素失去焦点。

    .change() 表单元素的值发生变化

    .click() 鼠标单击

    .dblclick() 鼠标双击

    .focus() 表单元素获得焦点

    .focusin() 子元素获得焦点

    .focusout() 子元素失去焦点

    .hover() 同时为mouseentermouseleave事件指定处理函数

    .keydown() 按下键盘(长时间按键,只返回一个事件)

    .keypress() 按下键盘(长时间按键,将返回多个事件)

    .keyup() 松开键盘

    .load() 元素加载完毕

    .mousedown() 按下鼠标

    .mouseenter() 鼠标进入(进入子元素不触发)

    .mouseleave() 鼠标离开(离开子元素不触发)

    .mousemove() 鼠标在元素内部移动

    .mouseout() 鼠标离开(离开子元素也触发)

    .mouseover() 鼠标进入(进入子元素也触发)

    .mouseup() 松开鼠标

    .ready() DOM加载完成

    .resize() 浏览器窗口的大小发生改变

    .scroll() 滚动条的位置发生变化

    .select() 用户选中文本框中的内容

    .submit() 用户递交表单

    .toggle() 根据鼠标点击的次数,依次运行多个函数

    .unload() .当用户离开页面时,会发生 unload 事件。

动态特效

  jquery$("#msg").show("fast");

  $("#msg").hide("slow");

  $("#msg").fadeIn();

  $("#msg").fadeOut();

  淡入淡出

    $(selector).fadeIn(speed,callback);

   可选的 speed 参数规定效果的时长。它可以取以下值:"slow""fast" 或毫秒。

  可选的 callback 参数是 fading 完成后所执行的函数名称。

  滑动

    $(selector).slideDown(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值:"slow""fast" 或毫秒。

  可选的 callback 参数是滑动完成后所执行的函数名称。

  动画 

    $(selector).animate({params},speed,callback);

  必需的 params 参数定义形成动画的 CSS 属性。

  可选的 speed 参数规定效果的时长。它可以取以下值:"slow""fast" 或毫秒。

  可选的 callback 参数是动画完成后所执行的函数名称。

 以上代码实现一个idMsgjQuery对象的渐入和淡出。函数接受的参数除了快慢等,还可以接收整形,作为渐入或淡出的完成时间,单位为ms。更多详细信息请参见jQuery APIEffects部分。

转载于:https://www.cnblogs.com/cj28-27/p/5560271.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/293976.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之用SingleTask和TaskAffinity解决手机截取的项目启动页面问题

今天做的远程截屏功能,服务端发一个命令下来,然后客户端截屏,截屏的代码已经写好,因为是跨进程通信的,我最后采取的办法是启动activity来实现的,但是问题来了,如果用户没有登录的情况下,可以截屏到任何页面,但是登录了之后,不在本应用里面切换的话,会回到应用的页面…

html怎么用excel打开乱码,我的Excel表格打开就乱码了,请问该如何修复?

回答: 第一种方法:采取直接修复最新版本的Excel具有直接修复受损文件的功能,大家可以利用Excel新增的“打开并修复”命令,来直接检查并修复Excel文件中的错误,只要单击该命令,Excel就会打开一个修复对话框&…

汽车模型身上出现反射效果

博客列表: www.1111kp.info, www.163123.info, www.360111.info, www.360123.info, www.6699ysk.info, www.aaafaipiao.com, www.bbbkp123.info, www.fp1111.info, www.fp1234.info, www.fpfuzhou.com, 3dsmax导出的模型,默认材质是漫反射(diffuse&…

记一次 .NET 某市附属医院 Web程序 偶发性CPU爆高分析

一:背景 1. 讲故事这个月初,一位朋友加微信求助他的程序出现了 CPU 偶发性爆高,希望能有偿解决一下。从描述看,这个问题应该困扰了很久,还是医院的朋友给力,开门就是 100块 红包 🤣&#x1f923…

执行CMD命令

可以执行多条命令,用“\r\n”分割 1 using System;2 using System.Diagnostics;3 4 namespace Tool5 {6 7 public class CMDHelper8 {9 public static string[] ExeCommand(string commandText) 10 { 11 12 Process p new Pr…

[iOS]应用内支付(内购)的个人开发过程及坑!

本文基于XcodeVersion 7.3 (7D175)版本,手机是iPhone 6,9.3系统。 一. 创建测试App 首先你需要登录 App的ItunesConnection,你会看到如下界面 简单的介绍一下这几个选项 1.我的App主要用于管理自己的App应用,例如编辑资料&…

Android之Intent 序列化反序列化

我们做截屏功能的时候,因为有2个进程,本来是把intent和MediaProjection放到Application里面,但是由于跨进程了,所以数据拿不到,就采用了Parcel 序列化出错,未找到出错的原因,找其它的解决方法: 查看Intent 的源代码, 发…

农商银行招聘计算机人员考什么,农商银行招聘考试题都考什么?

整理了农商农商一、行政职业能力测试类农商银行行测考试题型主要以选择题形式出现。主要包括言语理解、数量关系、判断推理、资料分析、常识五大部分。二、英语类农商银行考试英语部分:一般银行英语考试内容包括英语词汇与语法、英汉互译、改错、完型填空和阅读理解…

一步步学习微软InfoPath2010和SP2010--第八章节--使用InfoPath表单Web部件

本章中,你将学习到: 1. 配置Web部件设置 2. 创建Web部件连接 3. 创建表单参数 4. 使用其他浏览器表单参数 你可以使用InfoPath表单Web部件(Microsoft SharePoint2010新引入的)在SharePoint企业版或Microsoft…

讲一讲应用服务的新鲜事儿

微软中国MSDN 点击上方蓝字关注我们为了新功能的发布,以及 Linux 和 Windows 的改进,Azure App Service 团队付出了非常多的努力。很开心的是,我们看到了 Windows Containers 的正式版本,并可应用于 App Service 环境 v3 上。此外…

运维自动化之基于python语言的文字界面的运维管理软件

之前开发了phpmysqlshell运维监控系统,监控起来很方便,但在运维管理方便还是不能实现,所以最近打算使用python语言编写一套的运维管理系统,可以使用单台或多台机器同时管理与部署等功能,实现类似func、triaquae等管理软…

Android之4.0新特性

Android 4.0 平台 API等级:14 Android 4.0 是一次重要的平台发布版,为用户和应用程序开发者增加了大量的新特性。在下面我们将讨论的所有新特性和API中,因为它将 Android 3.x 版本中广泛使用的API和全息图像主题带给了小屏幕设备,因此我们说 Android 4.0 是一次重要的平…

iOS中的动画

2019独角兽企业重金招聘Python工程师标准>>> iOS中的动画 Core Animation Core Animation是一组非常强大的动画处理API,使用它能做出非常绚丽的动画效果,而且往往是事半功倍,使用它需要添加QuartzCore .framework和引入对应的框架<QuartzCore/QuartzCore.h>…

Debian7 apt源设置

刚装完系统时是没有 apt-spy 的&#xff0c;这时候我们可以暂时先找个可用的源代替&#xff0c;如&#xff08;写在 /etc/apt/sources.list 中&#xff09;&#xff1a; deb http://http.us.debian.org/debian/ stable main 执行以下命令更新软件包列表&#xff1a; apt-get up…

Android之6.0上的重要变化(一)

伴随着众多新特性和新功能,Android6.0(API level 23)在系统和API上都有着诸多的改变。本文着重介绍几个关键变化,以帮助你理解这些改变对你的APP产生的影响。 一、运行时权限检查(Runtime Permisssions) 此次发布引入了一个新的权限管理模型,使得用户能够在运行时控…

全世界70亿人同时起跳,地球会天崩地裂?答案可能让你难以置信

全世界只有3.14 % 的人关注了爆炸吧知识地球表示微微一笑不得不说&#xff0c;模友们的脑袋里总是充满了奇思妙想&#xff0c;比如超模君最近就收到了这么个问题&#xff1a;首先&#xff0c;这问题真就属于一看很有趣&#xff0c;细想全是BUG的那种。且不说怎么让70亿人同时聚…

计算机应用基础0006 18春在线作业1,《计算机应用基础0006》16春在线作业2

《计算机应用基础0006》16春在线作业2一、单选题(共 50 道试题&#xff0c;共 100 分。)1. 在Excel 2010的主界面中&#xff0c;不包含的选项卡是__B__&#xff1a; A. 公式B. 函数C. 插入D. 开始2. 以下属于无线接入互联网的是__D__&#xff1a; A. GPRS/CDMA B. WLAN C. 3G D…

2021.NET Conf China上的GraphQL

今天给大家分享.NET中的GraphQL&#xff0c;半个小时&#xff0c;没有把所有的代码敲出来&#xff0c;高估了自己的写码速度&#xff0c;所以通过这个文章分享出来。1、核心PPT2、主要代码using Conf2021GraphQL; using Conf2021GraphQL.Models; using Microsoft.EntityFramewo…