JQ——利用一个开关,点击一个按钮完成展开收起功能
2024-10-13 18:11:58
<!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>
最新文章
- iOS10 权限崩溃问题
- PHP实现把文本中的URL转换为链接的auolink()
- phpcmsv9 阿里云OSS云存储整合教程
- nodeJS代码实现计算交社保是否合适
- SU suspike命令学习
- Intersoft Mobile Studio 2013 R1 SP1 Crack
- indexedDB article
- (第二章)Java并发机制的底层实现原理
- jquery中的on事件
- BDIA增强
- three.js是JavaScript编写的WebGL第 三方库
- .Net 异步随手记(二)
- SharePoint 2016 修改左上角连接
- display:none和visibility:hidden区别
- OC语言大总结(下)
- Ubuntu 常见的问题及常见软件的安装_ubuntu16.04
- CENTOS7上安装MYSQL5.7.21流程
- 使用WebBrowser控件播放Flash网页相关问题解决方法(转)
- tensorflow入门指南
- MSSQL查询收缩和备份进度
热门文章
- C++系列总结——new和delete
- 【设计原则和编程技巧】单一职责原则 (Single Responsibility Principle, SRP)
- 环境搭建 - Java(Windows)
- HTML和CSS在IE7中常见的兼容性问题
- C# Tostring()方法
- Python列表之班荆道故
- Linux内核高端内存
- Error:Cannot run program ";svn"; (in directory ";E:demo\Hello";): CreateProcess error=2,
- bootatrsp datetimepicker的初始化和阻止模态窗关闭(事件冒泡)
- Storm入门(三)HelloWorld示例