jQuery中的事件与动画

一、jQuery中的事件:
1.基础事件
(1)鼠标事件
(2)键盘事件
(3)window事件
2.复合事件
(1)鼠标光标悬停
(2)鼠标连续点击
二、鼠标事件:
//1.点击事件click
$("#btn1").click(function(){
$("#div1_1").css(“background”,“green”);
});

//2.鼠标指针移过事件mouseover(当指针移入该元素以及包含的子元素时,都会重新触发该mouserover和mouseout事件)
$("#div1").mouseover(function(){console.log("指针移过");//给控制台打印信息
});//3.鼠标指针移出事件mouseout
$("#div1").mouseout(function(){console.log("指针移出");	
});//4.鼠标指针进入事件mouseenter(当鼠标指针移入该元素的子元素时,不会触发mouseenter和mouseleave事件)
$("#div1").mouseenter(function(){console.log("鼠标进入");
});//5.鼠标指针离开事件mouseleave
$("#div1").mouseleave(function(){console.log("鼠标离开");
});

三、键盘事件:
//1.键盘按下事件keydown(按下任意键的时候触发)
$("#btn2").keydown(function(){
$("#div2").css(“background”,“blue”);
});

//2.键盘抬起事件keyup
$("#btn2").keyup(function(){$("#div2").css("background","green");
});//3.按下可打印字符的时候事件keypress
$("#btn2").keypress(function(){$("#div2").css("background","pink");
});

四、//绑定事件bind(单个事件)
$("#btn3").bind(“click”,function(){
$("#div2").css(“background”,“orange”);
});

//绑定多个事件(实现鼠标移入和移出事件)
$("#div2").bind({mouseenter:function(){//鼠标移入代码$(this).css("width","300px");},mouseleave:function(){//鼠标移出代码$(this).css("width","200px");}
});//移除绑定的事件(移除点击事件)
$("#div2").unbind("click");

五、复合事件:
//1.悬浮事件hover
$("#div3").hover(function(){
//放上去
$(this).css(“background”,“red”);
},function(){
//移开
$(this).css(“background”,“brown”);
});
//2.鼠标连续点击事件
$("#div3").toggle(function(){
alert(‘1’);
},function(){
alert(‘2’);
},function(){
alert(‘3’);
});
六、动画:
//1.隐藏hide
$("#div3").hide(1000);
//2.显示show
$("#div3").show(1000);

//元素的淡入和淡出
//1.淡出
$("#div3").fadeOut(2000);
//2.淡入
$("#div3").fadeIn(2000);//改变元素的高度
//1.高度变低
$("#div3").slideUp(3000);
//2.高度变高
$("#div3").slideDown(3000);

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

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

相关文章

什么是 TCC分布式事务

转载自 什么是 TCC分布式事务 近两年微服务变得越来越火热,各种框架与组件的出现,更是为微服务的开发提供了便利。 我们都知道,每个微服务都是一个对应的小服务,多个服务之间可以方便的进行功能的组合,来形成功能更…

.NET跨平台实践:再谈用C#开发Linux守护进程 — 完整篇

Linux守护进程是Linux的后台服务进程,相当于Windows服务,对于为Linux开发服务程序的朋友来说,Linux守护进程相关技术是必不可少的,因为这个技术不仅仅是为了开发守护进程,还可以拓展到多进程,父子进程文件描…

React中解决样式丢失问题

解决多级路径刷新页面样式丢失的问题 1.public/index.html 中 引入样式时不写 ./ 写 / (常用)2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)3.使用HashRouter

使用jQuery操作DOM元素

一、DOM分类: 1.DOM core 2.Html-DOM 3.CSS-DOM 二、css样式 $(this).css(“font-size”,“25px”); $(this).css({“font-size”:“30px”,“color”:“white”}); $("#div3").addClass(“div3_style”); //移除样式 $("#div3").removeClass(…

静态代理

1、接口 package AOP.proxy;/*** Created by Administrator on 2019/6/11.*/ public interface PersonDao {public void savePerson(); }2、目标实现类 package AOP.proxy;/*** Created by Administrator on 2019/6/11.*/ public class PersonDaoImpl implements PersonDao {…

选择大公司还是小公司

转载自 选择大公司还是小公司 本文转载自公众号 stormzhang,文中的“我”是原文作者。 前一段时间,我一知识星球的球友问我这么一个问题,说他是某 985 应届生,拿到了 BAT 一家互联网大公司的 offer,但同时他还拿到了…

未来的C#之只读引用与结构体

C中提供了const特性,使用该特性定义的参数,其所引用的参数或对象将不会被调用函数修改(当然const还提供了更多的特性,参见“Const正确性”)。在新的建议中,C#也将提供类似的特性。 只读ref参数 在C#中&am…

C++实现字符串的拼接

#include #include using namespace std; int main(){ //字符创的拼接 string a “rtmp://192.168.0.128:1935/live/Test”; string b “.flv”; a.append(b); cout<<a<<endl; string str; str.assign(a); //直接赋值 str.assign(str, 4, str.npos); //赋值给子…

表单验证

一、表单选择器&#xff1a; 用于选取某些特定的表单元素 二、常用的表单选择器&#xff1a; 1.:input,选取所有的textarea,button,input,select元素 eg:(&quot;:input&quot;).css(&quot;border&quot;,&quot;1pxsolidred&quot;);2.text选取所有的单行文…

React中BrowserRouter与HashRouter的区别

BrowserRouter与HashRouter的区别 1.底层原理不一样&#xff1a;BrowserRouter使用的是H5的history API&#xff0c;不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如&#xff1a;localhost:3000/demo/testHashRoute…

漫画:什么是优先队列

转载自 漫画&#xff1a;什么是优先队列 在之前的漫画中&#xff0c;我们介绍了二叉堆和堆排序。没看过的小伙伴可以看一看前文&#xff1a; 漫画&#xff1a;什么是二叉堆&#xff1f;&#xff08;修正版&#xff09; 漫画&#xff1a;什么是堆排序&#xff1f; 这一次&a…

安全——《微服务设计》读书笔记

身份认证和授权 1.单点登录&#xff08;SSO&#xff09; 当主体试图访问一个资源&#xff0c;他会被定向到一个身份提供者那里进行身份验证&#xff0c;身份提供者验明正向后会发消息给服务提供者&#xff0c;让服务提供者来决定是否允许它访问资源。 SAML和OpenID Connect/OAu…

抽象和封装

一、软件出现的目的是为了&#xff1a; 1.用计算机语言描述现实世界。 2.用计算机解决现实世界中的问题。 二、面向对象&#xff1a; 1.与人类的思维习惯一致 2.代码可重用性高&#xff0c;可靠性高。 三、从现实世界中抽象出类&#xff1a; 1.发现类 2.发现类的属性 3.发现类的…

支付对账系统怎么设计

转载自 支付对账系统怎么设计 支付对账系统是整个支付清结算体系中具体基础性意义的一个环节&#xff0c;是确保支付平台与各类第三方支付渠道数据一致性的关键系统&#xff0c;是商户资金结算、资金划拨、资金报表等逻辑准确运行的重要前提。 支付对账涉及账单下载处理、核心…

十二个 ASP.NET Core 例子

前言 在今天的博客中&#xff0c;我将介绍十几个可以在 ASP.NET Core 应用程序中使用的简单示例。从最简单的东西开始&#xff0c;比如 Options, 中间件&#xff0c;数据库&#xff0c;甚至 Nginx 或者 Docker。 首先确定你已经执行过了 dotnet restore , 然后运行 dotnet ru…

Opencv FFmpeg Ubuntu下编译问题

FFmpeg转码错误Cannot load libcuda.so.1 https://blog.csdn.net/yzhang6_10/article/details/81349532 srs2.0 安装启动 https://my.oschina.net/fengjihu/blog/413710 SRS-HLS服务的部署 https://blog.csdn.net/dengjoe/article/details/52698423 ubuntu编译ffmpeg并且demo测…

40 道基础Dubbo 面试题及答案

转载自 40 道 Dubbo 面试题及答案 想往高处走&#xff0c;怎么能不懂 Dubbo&#xff1f; Dubbo是国内最出名的分布式服务框架&#xff0c;也是 Java 程序员必备的必会的框架之一。Dubbo 更是中高级面试过程中经常会问的技术&#xff0c;无论你是否用过&#xff0c;你都必须…

康威定律和系统设计——《微服务设计》读书笔记

康威定律 任何组织在设计一套系统时&#xff0c;所交付的设计方案在结构上都与该组织的沟通结构保持一致。 ——梅尔.康威 如何理解这句话在软件工程上的含义&#xff1f;埃里克.S.雷蒙德说&#xff1a;如果你有四个小组开发一个编译器&#xff0c;那你会得到一个四步编译器。…