百度前端学院js课堂作业合集+分析
Posted xing.org1^
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度前端学院js课堂作业合集+分析相关的知识，希望对你有一定的参考价值。
第一课：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js课程第一课</title> 6 <style> 7 body{padding: 20px;font:16px "微软雅黑";} 8 h3{text-align: center;margin-top: 0;} 9 label{width: 65px;display: inline-block;text-align: right;} 10 input{padding: 5px; border: 1px solid gray} 11 input:focus{outline: none;border: 1px solid #4488ff;} 12 span{font-size: 14px;} 13 .box{position: absolute;top: 0;right:0;bottom:0;left:0;margin: auto;width: 260px;height: 180px;padding: 20px;box-shadow: 0px 2px 3px 3px #f1f1f1;border-radius: 5px;transform: scale(1);transition: transform .35s ease-in-out;} 14 .row{margin-top: 10px;} 15 .error{color: red;font-size: 12px;padding: 5px 0;margin: 0;padding-left: 70px;} 16 .btn{padding: 5px 10px;background: #fff; border-radius: 5px;} 17 .btn:hover{color: #fff;background: #4488ff;border-color: #4488ff;cursor: pointer;} 18 .close{position: absolute;top: 10px;right: 10px;line-height: 14px;color: #DEDEDE;font-size: 24px;height: 14px;overflow: hidden;transform: rotate(0deg);transition: transform .35s;} 19 .close:hover{color: #333;cursor: pointer;transform: rotate(180deg);transition: transform .35s;} 20 /*.box-child{display: none;}*/ 21 .box-child{display: block;background: #fff;line-height: 180px;text-align: center;transform: scale(0);} 22 .box-an{display: block;transform: scale(1);} 23 .box-child p{line-height: 30px;margin-top: 45px;} 24 .gray{color: gray;} 25 .black{color: black;} 26 </style> 27 </head> 28 <body> 29 <div class="box"> 30 <h3>这是一个相当low的登录框</h3> 31 <form action=""> 32 <div class="row"> 33 <label for="name">用户名：</label> 34 <input type="text" id="name" placeholder="请输入您的用户名" value=""> 35 <p class="error" id="tip"></p> 36 </div> 37 <div class="row"> 38 <label for="pass">密码：</label> 39 <input type="password" id="pass" placeholder="" value=""> 40 </div> 41 <div class="row"> 42 <input type="button" value="登录" id="submit" class="btn" style="margin: 0 20px 0 75px;"> 43 <input type="reset" value="取消" class="btn"> 44 </div> 45 </form> 46 <div class="box box-child"> 47 <p><span id="sCont"></span><br>欢迎您登录小石头官网！</p> 48 <span id="close" class="close">X</span> 49 </div> 50 </div> 51 <script> 52 var oBtn = document.getElementById("submit"), 53 oTip = document.getElementById("tip"), 54 sCont = document.getElementById("sCont"), 55 oClose = document.getElementById("close"), 56 sName = document.getElementById("name"); 57 oBtn.onclick = function(){ 58 if(!sName.value){ 59 oTip.innerText = "请输入您的的用户名！"; 60 // 修改元素文本innerText 61 }else{ 62 // sCont.parentNode.parentNode.className = "box box-child box-an"; 63 // 选取父元素parentNode、选择其他元素(下图) 64 // sCont.parentNode.parentNode.style.display = ‘block‘; 65 sCont.parentNode.parentNode.style.transform = ‘scale(1)‘; 66 sCont.innerText = ‘HELLO！ ‘+ sName.value + ‘！‘; 67 // +号用于字符连接 68 } 69 } 70 oClose.onclick=function(){ 71 // sCont.parentNode.parentNode.className = "box box-child";//通过增删类名（核心是修改display或者其他用于可见/隐藏的方案，比如scale的0/1，比如opacity的0/1等） 72 // document.querySelector(".box-child")[‘style‘].display = ‘none‘;//通过display的方式修改值 73 // 注意querySelector的选择方法 74 // 注意[‘style‘]这种方括号选取属性的方法 75 sCont.parentNode.parentNode.style.transform = ‘scale(0)‘; 76 // 想要实现动画效果就要更改动画值，之前我是transform和display一起更改，动画效果就看不出来，后来只更改缩放，就有了效果。 77 } 78 </script> 79 </body> 80 </html>
1.js查找父元素：parentNode
其他补缺：
全部节点：childNodes
弟弟妹妹节点：nextSbiling
哥哥姐姐节点：previousSbiling
第一个儿子：firstChild
最后一个儿子：lastChild
2.document.querySelector(".btn-child"),注意选择器的那个点，或者是id的时候注意#号
3.当input的表单类型为submit和reset，且被form元素包裹的时候，点击submit和reset的类似按钮，会在执行完毕逻辑（比如提交表单）后，重置/重新刷新页面。当你想要提交后不刷新的功能时，我的解决方法是把submit改成了button按钮。
以上是关于百度前端学院js课堂作业合集+分析的主要内容，如果未能解决你的问题，请参考以下文章
百度前端技术学院2015JavaScript基础部分代码实现