python day16
Posted A+
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python day16相关的知识，希望对你有一定的参考价值。
http://www.cnblogs.com/wupeiqi/articles/5433893.html JavaScirpt 正则，字符串三个方法 DOM 查找： 直接查找 间接查找 --getElementById --getElementsByTagName 操作： 值 innerText innerHtml value class： className classList.add classList.remove 样式： <input type=\'text\' style="color:red;font-size:40px;"/> tag = ..... tag.style.color = \'red\'; tag.style.fontSize = \'40px\'; 属性： <input id=\'i1\' name=\'n1\' alex=\'sb\' type=\'text\' style="color:red;font-size:40px;"/> setAttribute getAttribute removeAttribute ===> tabObj.checked = true ===>jQuery: 操作数据，prop(checked,true) 标签： 创建标签： 字符串 对象 将标签添加到HTML中 字符串形式的标签： p1.insertAdjacentHTML(\'beforeEnd\',tag); 对象形式的标签： p1.insertAdjacentElement(\'afterBegin\',document.createElement(\'p\')) xxx.insertBefore(tag,xxx[1]) 点赞： 创建标签，定时器（大小，位置，透明度） 1、this，当前触发事件的标签 2、createElement 3、appendChild 4、setInterval创建定时器 clearInterval删除定时器 5、removeChild删除子标签 定时器 setTimeOut,clearTimeout setInterval,clearInter 事件： 1、this，当前触发事件的标签 2、全局事件绑定 window.onKeyDown = function(){} 3、event，包含事件相关内容 4、默认事件 自定义优先：a,form 默认优先：checkbox jQuery 模块，Dom和javascript， 1.12.. --> ... 2.x --> IE9 查找： 选择器 id选择器 标签选择器 类选择器 组合 层级 #i1 .c1 $(\'input:eq(1),#i1 .item\') 筛选器 $(\'#i1\').find(\'.item\') $(\'#i1\').eq(1) 操作： CSS 属性 $(\'#i1\').html() # 获取html内容 $(\'#i1\').html("<span>123</span>") # 设置html内容 text() val() 文本操作 事件： - 优化 1、如何使用jQuery绑定 2、当文档加载完毕后，自动执行 $(function(){ ... }); 3、延迟绑定 4、return false; 扩展： JavaScirpt 正则，字符串三个方法 $.login Form表单验证（） Ajax： 偷偷发请求 -- jQuery循环 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--绑定事件，获取焦点onfocus(鼠标点击),失去焦点onblur(鼠标移走)--> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" /> <input id="i2" type="text"/> <script type="text/javascript"> function Focus(){ //console.log(\'Focus\'); //获取标签，清空 var tag = document.getElementById(\'i1\'); if(tag.value == "请输入关键字"){ tag.value = ""; } } function Blur(){ //console.log(\'blur\'); //移除标签，赋予 var tag = document.getElementById(\'i1\'); var val = tag.value; if(val.trim().length == 0){ tag.value = "请输入关键字"; } } </script> </body> </html> 模态对话框 中间对话框，隐藏，显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*隐藏，加!important最优先*/ .hide{ display: none !important; } /*遮罩层*/ .shade{ position: fixed; top:0; bottom: 0; left: 0; right: 0; /*background-color: black;*/ /*opacity: 0.6;*/ background-color: rgba(0,0,0,.6); z-index: 1000; } /*对话框层*/ .modal{ height: 200px; width: 400px; background-color: white; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; z-index: 1001; } </style> </head> <body> <div style="height: 2000px;background-color: #dddddd;"> <input type="button" value="点我" onclick="ShowModal();"/> </div> <div id="shade" class="shade hide"></div> <div id="modal" class="modal hide"> <a href="javascript:void(0);" onclick="HideModal();">取消</a> </div> <script> // 点击显示 function ShowModal(){ var t1 = document.getElementById(\'shade\'); var t2 = document.getElementById(\'modal\'); t1.classList.remove(\'hide\'); t2.classList.remove(\'hide\'); } // 点击隐藏 function HideModal(){ var t1 = document.getElementById(\'shade\'); var t2 = document.getElementById(\'modal\'); t1.classList.add(\'hide\'); t2.classList.add(\'hide\'); } </script> </body> </html> 表格，全选，取消，反选 -----版本1，不能复选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="CheckAll()"/> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <!--定义表格--> <table border="1"> <!--定义列头--> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <!--定义内容--> <tbody id="tb"> <tr> <td><input type="checkbox" id="test"/></td> <td>1</td> <td>11</td> </tr> <tr> <td><input type="checkbox" id="test1"/></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" id="test2"/></td> <td>3</td> <td>33</td> </tr> </tbody> </table> <script> //全选，遍历input配置checked等于checked(勾选) function CheckAll() { //获取指定内容 var tb = document.getElementById(\'tb\') var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.setAttribute(\'checked\',\'checked\'); } } //取消,去掉checked function CancleAll() { var tb = document.getElementById(\'tb\') var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.removeAttribute(\'checked\'); } } //反选，判断是否为真(是否勾选，勾选即取消，反之则勾选) function ReverseAll() { var tb = document.getElementById(\'tb\') var trs = tb.children; for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; if(ck.checked){ ck.checked = false; ck.removeAttribute(\'checked\'); }else{ ck.checked = true; ck.setAttribute(\'checked\',\'checked\'); } } } </script> </body> </html> -------版本2,完整版本 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" > <thead> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> </tbody> </table> <script> function CheckAll(ths){ var tb = document.getElementById(\'tb\'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(\'input\')[0]; inp.checked = true; } } } function CancelAll(ths){ var tb = document.getElementById(\'tb\'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(\'input\')[0]; inp.checked = false; } } } function ReverseCheck(ths){ var tb = document.getElementById(\'tb\'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(\'input\')[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script> </body> </html> 点赞功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ padding: 50px; position: relative; } </style> </head> <body> <div class="item"> <a onclick="Favor(this);">赞1</a> </div> <div class="item"> <a onclick="Favor(this);">赞2</a> </div> <div class="item"> <a onclick="Favor(this);">赞3</a> </div> <script> function Favor(ths){ // ;ths=> this=> 当前触发事件的标签 var top = 49; var left = 71; var op = 1; var fontSize = 18; var tag = document.createElement(\'span\'); tag.innerText = \'+1\'; tag.style.position = \'absolute\'; tag.style.top = top + "px"; tag.style.left = left + "px"; tag.style.opacity = op; tag.style.fontSize = fontSize + \'px\'; ths.parentElement.appendChild(tag); var interval = setInterval(function(){ top -= 10; left += 10; fontSize += 5; op -= 0.1; tag.style.top = top + "px"; tag.style.left = left + \'px\'; tag.style.opacity = op; tag.style.fontSize = fontSize + \'px\'; if(opt <= 0.2){ clearInterval(interval); ths.parentElement.removeChild(tag); } },50); } </script> </body> </html> DOM实现返回顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ position: fixed; right: 20px; bottom: 20px; color: red; } .hide{ display: none; } </style> </head> <body onscroll="BodyScroll();"> <div style="height: 2000px;background-color: #dddddd;"></div> <div id="back" class="back hide" onclick="BackTop();">返回顶部</div> <script> function BackTop(){ document.body.scrollTop = 0; } function BodyScroll(){ var s = document.body.scrollTop; var t = document.getElementById(\'back\'); if(s >= 100){ t.classList.remove(\'hide\'); }else{ t.classList.add(\'hide\'); } } </script> </body> </html> overflow: auto 滚动条 <div style="overflow:auto; width:250px; height:auto; border:1px solid #000;"></div> DOM 为空验证提交表单，为空不允许提交，不为空提交 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="username"/> <input type="submit" value="提交" onclick="return SubmitForm();"/> </form> <script> function SubmitForm(){ var user = document.getElementById(\'username\'); if(user.value.length > 0){ // 可以提交 return true; }else{ // 不可提交，提示错误 alert(\'用户名输入不能为空\'); return false; } } </script> </body> </html> JQUERY http://www.php100.com/manual/jquery/ JQUERY 全选，取消，反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="p1"> <p>hhh</p> </div> <input type="button" value="全选" onclick="CheckAll()" /> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <table border="1"> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>22</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function CheckAll(){ $(\'#tb input[type="checkbox"]\').prop(\'checked\',true); } function CancleAll(){ $(\'#tb input[type="checkbox"]\').prop(\'checked\',false); } function ReverseAll(){ $(\'#tb input[type="checkbox"]\').each(function(i){ // this 当前标签 // $(this)当前标签的jQuery对象 if($(this).prop(\'checked\')){ $(this).prop(\'checked\', false); }else{ $(this).prop(\'checked\', true); } }); } </script> </body> </html> 小说网站布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } h1{ padding: 0; margin: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; border: 1px solid red; } </style> <body onscroll="ScrollEvent();"> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog" id="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content" id="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName(\'catalog\')[0].classList.add(\'fixed\'); }else{ document.getElementsByClassName(\'catalog\')[0].classList.remove(\'fixed\'); } var content = document.getElementById(\'content\'); var sections = content.children; for(var i=0;i<sections.length;i++){ var current_section = sections[i]; // 当前标签距离顶部绝对高度 var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部，相对高度 var offTop = scOffTop - bodyScrollTop; // 当前标签高度 var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){ // 当前标签添加active // 其他移除 active var menus = document.getElementById(\'catalog\').children; var current_menu = menus[i]; current_menu.classList.add(\'active\'); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove(\'active\'); } } break; } } } </script> </body> </html> DOM实现隐藏菜单：点击菜单弹出内容，其它菜单收回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ width: 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } <!--逐层选择器调用,配置所有body标签选择器中的内容格式--> .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowMenu(ths){ // console.log(ths); // Dom中的标签对象 //$(ths) // Dom标签对象转换成jQuery标签对象（便利） //$(ths)[0] // jQuery标签对象转换成Dom标签对象 $(ths).next().removeClass(\'hide\'); $(ths).parent().siblings().find(\'.body\').addClass(\'hide\'); } </script> </body> JQUERY实现隐藏菜单：点击菜单弹出内容，其它菜单收回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ width: 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowMenu(ths){ // console.log(ths); // Dom中的标签对象 //$(ths) // Dom标签对象转换成jQuery标签对象（便利） //$(ths)[0] // jQuery标签对象转换成Dom标签对象 $(ths).next().removeClass(\'hide\'); $(ths).parent().siblings().find(\'.body\').addClass(\'hide\'); } </script> </body> </html> JQUERY实现隐藏菜单：点击菜单弹出内容，其它菜单收回 当文档树加载完毕后，自动执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ width: 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" >菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ // 当文档树加载完毕后，自动执行 $(\'.item .title\').click(function(){ // this,$(this) $(this).next().removeClass(\'hide\'); $(this).parent().siblings().find(\'.body\').addClass(\'hide\'); }); }); /* $(\'.item .title\').bind(\'focus\', function () { $(this).next().removeClass(\'hide\'); $(this).parent().siblings().find(\'.body\').addClass(\'hide\'); }) */ </script> </body> </html> 输入框，为空跳转，非空跳转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://www.baidu.com"> <input type="text" id="username" /> <input type="submit" value="提交" onclick="return SubmitForm();" /> </form> <script> function SubmitForm(){ var user = document.getElementById(\'username\'); if(user.value.length > 0 ){ // 可以提交 return true; }else{ // 不可提交，提示错误 alert(\'用户名输入不能为空\'); return false; } } </script> </body> </html> JQUERY 点击加减框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p> <a onclick="Add(this);"> + </a> <input type="text" /> </p> </div> <script src="jquery-1.12.4.js"></script> <script> function Add(ths){ var p = $(ths).parent().clone(); p.find(\'a\').text(\' - \'); p.find(\'a\').attr(\'onclick\', \'Remove(this);\'); $(ths).parent().parent().append(p); } function Remove(ths){ $(ths).parent().remove(); } </script> </body> </html> 点击按钮加内容，点击内容显示数值窗口对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="Add();" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function(){ /* $(\'li\').click(function () { alert($(this).text()); }); */ $("ul").delegate("li","click",function(){ alert($(this).text()); }); }); function Add(){ var tag = document.createElement(\'li\'); tag.innerText = \'666\'; $(\'ul\').append(tag); } </script> </body> </html> JQUERY 功能学习 jQuery 库可以通过一行简单的标记被添加到网页中 jQuery 是一个 JavaScript 函数库 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 可以通过下面的标记把 jQuery 添加到网页中： <head> <script type="text/javascript" src="jquery.js"></script> </head> 请注意，<script> 标签应该位于页面的 <head> 部分。 1. 基础 jQuery 实例 jQuery 的 hide() 和show 函数，隐藏和显示 HTML 文档中所有的 <p> 元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.12.4.js"></script> </head> <body> <h2> 这是头部</h2> <p>第一行</p> <p>第二行</p> <input id="btnShow" type="button" value="显示" /> <input id="btnHide" type="button" value="隐藏" /> <script type="text/javascript"> $("#btnShow").bind("click", function(event) { $(\'p\').show(); }); $("#btnHide").bind("click", function(event) { $(\'p\').hide(); }); </script> </body> </html> 只隐藏p元素，一个按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $(\'p\').hide(); }); }); </script> </head> <body> <h2> 这是头部</h2> <p>第一行</p> <p>第二行</p> <button type="button">点我</button> </body> </html> 2.下载 jQuery 共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读） jquery.js 测试使用 jquery.min.js 正式环境用，精简 引用 <head> <script src="jquery-1.12.4.js"></script> </head> 3.jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions） $(this).hide() 隐藏当前的 HTML 元素(使用this,this为当前html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $(this).hide(); }); }); </script> </head> <body> <button type="button">Click me</button> </body> </html> $("#test").hide() 隐藏 id="test" 的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $("#test").hide(); }); }); </script> </head> <body> <h2>头部</h2> <p>段一</p> <p id="test">段二</p> <button type="button">Click me</button> </body> </html> $("p").hide() 隐藏所有 <p> 元素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>以上是关于python day16的主要内容，如果未能解决你的问题，请参考以下文章
Python全栈开发，Day16 - Web前端-JavaScript