JQuery学习笔记之隐藏与显示

来源：互联网发布：搭讪技巧知乎编辑：程序博客网时间：2024/05/16 13:07

JQuery封装了隐藏与显示方法，hide()方法为隐藏，show()方法为显示，toggle()是隐藏/显示切换，当指定元素状态为隐藏时变为显示，当指定元素状态为显示时变为隐藏。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery</title> <script src="jquery-3.1.1.min.js"></script> </head> <body> <center style="margin-top:20px"> <button id="hide" >隐藏</div> <button id="show" >显示</div> <button id="tag">隐藏/显示</button> </center> <center> <div id = "main" style="background-color:red;height:200px;width:200px"></div> </center> <script> $(document).ready( function(){ $("#hide").click(function(){ $("div").hide();//所有的div元素都隐藏 }); $("#show").click(function(){ $("div").show(); //所有的div元素都显示 }); $("#tag").click(function(){ $("div").toggle(); //所有的div元素都隐藏或显示 }); }); </script> </body> </html>

0 0