- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title></title>
-
- <script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
-
- <script type="text/javascript">
- // 入口函数
- $(document).ready(function() {
- // 获取元素 根据标签名
- var jqButton = $("button");
- var jqDiv = $("div");
- // 绑定事件
- jqButton.click(function() {
- jqDiv.show();
- });
- });
- </script>
-
- <style type="text/css">
- div {
- background-color: red;
- height: 20px;
- margin: 10px;
- display: none;
- }
- </style>
-
- </head>
- <body>
- <button>显示盒子和设置内容</button>
- <div id="">
-
- </div>
- <div id="">
-
- </div>
- <div id="">
-
- </div>
- <div id="">
-
- </div>
- <div id="">
-
- </div>
- </body>
- </html>