<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ动画</title>
</head>
<style>
a{display: inline-block;background:#34daa2;border:1px solid #34daa2;padding:3px 15px;color: #fff;}
.box{
background: plum;
padding:20px;
color: #fff;
width: 300px;
display: none;
}
.span2{
display: none;
}
</style>
<body>
<a href="#" onclick="boxClick()">点击<span class="span1">▶</span> <span class="span2">▼</span></a>
<div class="box">
一、JQ鼠标事件<br />
1.click()事件;<br />
2.dbclick事件;(表单验证、全选、反选)<br />
3.focusin();获取焦点事件,可作用于父级<br />
4.focusout();失去焦点事件,可作用于父级<br />
5.mousedown();鼠标按下事件,和click有区别(鼠标按下就触发事件)<br />
6.mouseup();鼠标抬起事件,和mousedown()事件结合起来就是click事件<br />
7.mousemove();鼠标移动事件<br />
8.mouseover();鼠标移入事件<br />
9.mouseout();鼠标移出事件<br />
例:mouseover和mouseout可以写成链式写法:<br />
$('p').mouseenter(function(){<br />
$(this).css('color','pink')<br />
}).mouseleave(function(){<br />
$(this).css('color','blue')<br />
})
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<script type="text/javascript"> function boxClick(){
if($('.box').is(':hidden')){
$('.box').slideDown(500);
$('.span2').show(500);
$('.span1').hide(500);
}else{
$('.box').slideUp(500);
$('.span2').hide(500);
$('.span1').show(500);
}
}
</script>

JQ——利用一个开关,点击一个按钮完成展开收起功能的更多相关文章

  1. 当你输入一个网址/点击一个链接,发生了什么?(以www.baidu.com为例)

    >>>点击网址后,应用层的DNS协议会将网址解析为IP地址: DNS查找过程: 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束. 如果用户 ...

  2. 修改jq weui自定义对话框点击确定按钮不关闭对话框

    如果我们在对话框给用户输入值时,当用户输入空值点击确定按钮时,应该给个提示然后让用户继续输入. 如果在方法里使用 return false;,结果用户输入空值时对话框还是会关闭.正确做法如下: 先设置 ...

  3. JQuery------实现点击左右按钮,切换图片功能

    如图: 代码: html @*商品主图片*@ <div class="product-img" style="display:table-cell;width:40 ...

  4. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  5. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  6. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  7. 问题:asp.net 点击button按钮调到页面顶部;结果:asp.net点击一个按钮,使页面跳转到本面页上的指定位置

    asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...

  8. 页面上有3个输入框:分别为max,min,num;三个按钮:分别为生成,排序,去重;在输入框输入三个数字后,先点击生成按钮,生成一个数组长度为num,值为max到min之间的随机整数点击排序,对当前数组进行排序,点击去重,对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  9. 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

随机推荐

  1. 关于guns开源框架单元测试问题

    首先在test文件夹里面删除红框里面的两个文件 然后再在需要测试的类里面右键类名生成测试文件 生成的测试文件加上这两句话 @RunWith(SpringJUnit4ClassRunner.class) ...

  2. JavaScript 是如何工作:Shadow DOM 的内部结构 + 如何编写独立的组件!

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  3. 升级本地部署的CRM到Dynamics 365及部分新特性介绍。

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复241或者20161226可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  4. Dynamics 365新引入了多选选项集类型字段

    本人微信和易信公众号:微软动态CRM专家罗勇 ,回复276或者20180630可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  5. python 图片在线转字符画预览

    文章链接:https://mp.weixin.qq.com/s/yiFOmljhyalE8ssAgwo6Jw 关于python图片转字符画,相信大家都不陌生,经常出现在 n个超有趣的python项目中 ...

  6. 人脸识别Android SDK集成

    目前我们的应用内使用了ArcFace 的人脸检测功能,这里就和大家分享一下我们的集成过程和一些使用心得~ 集成ArcFace FD 的集成过程非常简单在 ArcFace FD 的文档上有说明支持的系统 ...

  7. AlwaysOn配置时在连接步骤时报错(35250)

    1.错误描述 1XX.XXX.XXX.241(主节点) 1XX.XXX.XXX.242(从节点) 添加节点需要在主节点上执行的,错误代码:35250 报错截图 2.网上相关介绍都是怀疑端口5022的问 ...

  8. Java - String 的字面量、常量池、构造函数和intern()函数

    一.内存中的 String 对象 Java 的堆和栈 对于基本数据类型变量和对象的引用,也就是局部变量表属于栈内存: 而通过 new 关键字和 constructor 创建的对象存放在堆内存: 直接的 ...

  9. Linux Shell 返回值之 PIPESTATUS

    BASH SHELL中,通常使用 $? 来获取上一条命令的返回码,对于管道中的命令,使用$?只能获取管道中最后一条命令的返回码,例如: 下面的例子 /djdjal/dajiojidksj.file是一 ...

  10. 一道C++、MFC上机面试题

    题目:写一个基于MFC对话框的程序,界面输入整型a和b,点击计算,开启线程计算a+b,并把结果返回给对话框.(1)不能用结构体和类(2)用到自定义消息(3)鼠标移到[计算]按钮上变为收尸图标.参考界面 ...