JQ——利用一个开关，点击一个按钮完成展开收起功能
生活随笔
收集整理的這篇文章主要介紹了
JQ——利用一个开关，点击一个按钮完成展开收起功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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——利用一个开关，点击一个按钮完成展开收起功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 回炉Spring--Bean生命周期及A
- 下一篇： 查询出每一个雇员的姓名，工资，部门名称，