单机显示、双击隐藏
<style>div {width: 500px;height: 200px;background-color: green;display: none;}
</style>
<body><button id="btn">单击显示，双击隐藏</button><br><br><div> </div><script src="../jquery-3.4.1.js"></script><script>$(function () {$('#btn').click(function () { //单击事件$('div').css('display', 'block');$('div').html('div显示出来');})$('#btn').dblclick(function () { //双击事件$('div').css('display', 'none');})});</script>
</body>效果图
初始状态隐藏，单机显示
双击隐藏
事件绑定
<style>div{width: 200px;height: 200px;background-color: red;}
</style>
<body><div></div><br><br><button id="btn_all">反绑定（删除所有的事件）</button><br><br><button id="btn_one">反绑定（删除单击事件）</button><script src="../jquery-3.4.1.js"></script><script>$(function(){$('div').bind('click',function(){ //单击事件alert('单击了div');});$('div').bind('dblclick',function(){ //双击事件alert('双击了div');});$('#btn_all').click(function(){ //删除所有绑定的事件$('div').unbind();})$('#btn_one').click(function(){ //删除指定的事件（单击事件）$('div').unbind('click');})})</script>
</body>单击了div
点击‘删除单击事件’按钮
点击‘删除所有事件’按钮：单击、双击事件都不起作用
元素显示、隐藏、交替
<style>div {width: 300px;height: 300px;background-color: red;display: none;}
</style><body><button id="btn_show">显示</button><button id="btn_hide">隐藏</button><button id="btn_toggle">交替</button><br><br><div></div><script src="../jquery-3.4.1.js"></script><script>$(function () {$('#btn_show').click(function () {// $('div').show(2000)$('div').show('slow');});$('#btn_hide').click(function () {$('div').hide(1000);});$('#btn_toggle').click(function () {$('div').toggle(1000);});})</script>
</body>初始状态隐藏，点击‘显示按钮’：触发事件
点击’隐藏‘按钮
点击‘交替’按钮，一键控制显示、隐藏
向上收缩、向下展开、交替
<body><img src="./1.jpg" alt="" width="330" height="260"><br><br><button id="btn_up">向上收缩</button><button id="btn_down">向下展开</button><button id="btn_toggle">交替</button><script src="../jquery-3.4.1.js"></script><script>$(function () {$('#btn_up').click(function () {$('img').slideUp(2000);});$('#btn_down').click(function () {$('img').slideDown(2000);});$('#btn_toggle').click(function () {$('img').slideToggle(2000);});})</script>
</body>初始状态显示图片，点击‘向上收缩’按钮
点击‘向下展开’按钮
点击‘交替’按钮，一键控制 向上收缩、向下展开
淡入淡出设置
<style>div{width: 300px;height: 300px;background-color: rgb(20, 196, 219);display: none;}
</style>
<body><button id="btn_fadein">淡入</button><button id="btn_fadeout">淡出</button><div> </div><script src="../jquery-3.4.1.js"></script><script>$(function(){$('#btn_fadein').click(function(){$('div').fadeIn(2000);});$('#btn_fadeout').click(function(){$('div').fadeOut(2000);});})</script>
</body> 初始状态隐藏，点击‘淡入’按钮
点击‘淡出’按钮
