第一课：
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 ????????????????// 修改元素文本innerText61 ????????????}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最后一个儿子：lastChild2.document.querySelector(".btn-child"),注意选择器的那个点，或者是id的时候注意#号3.当input的表单类型为submit和reset，且被form元素包裹的时候，点击submit和reset的类似按钮，会在执行完毕逻辑（比如提交表单）后，重置/重新刷新页面。当你想要提交后不刷新的功能时，我的解决方法是把submit改成了button按钮。百度前端学院js课堂作业合集+分析
原文地址：http://www.cnblogs.com/padding1015/p/7640523.html