javascript 独立的语言，浏览器是js解释器 存在形式 - head <scrip> code </script> - 独立文件<script src=""> code </script> 一般放在body底部 注释： - 单行注释 // - 多行注释 /* */ 变量 - python： name = "Tom" - javascript： name = "Tom" # 全局变量 var name = "Eric" # 局部变量 基本数据类型 - 数字number(浮点型) var age = 18; parseInt() 转数字 parseFloat() 转浮点数 NaN 非数字 isNaN() Infinity 无穷大 isFinite() 数值计算 Math.abs()... - 字符串string var s = "abcdef" s.charAt(索引位置) s.substring() s.length ... - 列表(数组) a = [1, 2, 3, 4] - 字典 a = {"k1": "v1", "k2": "v2"} - 布尔 true false - null undefined for循环 1.循环时元素是索引 a = [11, 22, 33, 44] for(var index in a){ console.log(index) } a = {"k1": "v1", "k2": "v2"} for(var key in a){ console.log(key) } 2.下标 a = [11, 22, 33, 44] for(var i=0; i<a.length; i++){ } 不支持字典循环 while循环 定时器 setInterval("code", time(ms)) console.log() 条件语句 if(condition){ }else if(condition){ }else{ } == 值相等 != 不相等 === 值和类型都相等 && and || or 函数 function func_name(parameter){ } 参考： 《JavaScript》 http://www.cnblogs.com/wupeiqi/articles/5602773.html dom文档对象 1.找到标签 直接查找 通过id获取标签 document.getElementById() 通过name属性获取标签 document.getElementsByName() 通过class属性获取标签 document.getElementsByClassName() 通过标签名获取标签 document.getElementsByTagName() 间接操作 parentElement 父亲 children 孩子 firstElementChild 第一个孩子 lastElementChild 最后一个孩子 nextElementSibling 下一个兄弟 previousElementSibling 上一个兄弟 2.操作标签 innerText 获取文本内容 var = tag.innerText 设置文本内容 tag.innerText = "text" className 整体操作 tag.className ="className" 添加样式 tag.classList.add() 删除样式 tag.classList.remove() checkbox 获取值 var = checkbox.checked 设置值 checkbox.checked = true 事件 onclick=func(param) 定时器 示例： 滚动字幕 多选框 模态对话框 返回顶部 左侧菜单 作业： 1.登陆，注册 练习position 2.后台管理页面 - 左侧菜单 - 右边表格，全选，反选，模态框，返回顶部 3.商城页面
侧边栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ width:200px; } .item{ } .header{ height: 40px; background-color: #0d3ea2; color:white; line-height: 40px; text-align: center; font-weight: bold; } .content div{ height: 36px; line-height: 36px; text-align: center; background-color: #dddddd; } .hide{ display:none; } </style> </head> <body> <div class="menu"> <div class="item"> <div id="i1" class="header" onclick="changeMenu('i1')" >菜单1</div> <div class="content"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item" > <div id="i2" class="header" onclick="changeMenu('i2')">菜单2</div> <div class="content hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="changeMenu('i3')">菜单3</div> <div class="content hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div id="i4" class="header" onclick="changeMenu('i4')">菜单4</div> <div class="content hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> </div> <script> function changeMenu(tagId) { // menu -> items -> header + content->div //获取当前标签 var current_header = document.getElementById(tagId); // 获取菜单栏二级标签 var items = current_header.parentElement.parentElement.children; // 遍历所有二级标签，设置content都隐藏 for(var i=0; i<items.length; i++){ var item = items[i]; item.children[1].classList.add("hide"); } // 当前菜单的子菜单显示 current_header.nextElementSibling.classList.remove("hide"); } </script> </body> </html>
效果
模态框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0 auto; } /*遮罩层*/ .c1{ background-color: black; position: fixed; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.6; z-index: 9; } /*输入层*/ .c2{ background-color: white; width: 500px; height: 400px; z-index: 10; position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left: -250px; } .hide{ display: none; } /*form表格*/ #i2 form{ margin:0 auto ; width: 150px; height: 120px; /*border:1px solid red;*/ } </style> </head> <body> <!--主体内容开始--> <div> <table> <thead> <tr> <th>选择</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>李白</td> <td>23</td> </tr> <tr> <td><input type="checkbox"></td> <td>杜甫</td> <td>24</td> </tr> <tr> <td><input type="checkbox"></td> <td>白居易</td> <td>25</td> </tr> <tr> <td><input type="checkbox"></td> <td>李清照</td> <td>20</td> </tr> </tbody> </table> </div> <!--主体内容结束--> <button onclick="showModel()">添加</button> <button onclick="chooseAll()">全选</button> <button onclick="cancelAll()">取消</button> <button onclick="reverseAll()">反选</button> <!--遮罩层开始--> <div id="i1" class="c1 hide"></div> <!--遮罩层结束--> <!--输入层开始--> <div id="i2" class="c2 hide"> <form action=""> <p><input type="text"></p> <p><input type="text"></p> <p><input type="button" onclick="hideModel()" value="确认"></p> </form> </div> <!--输入层结束--> <script> // 显示 function showModel() { document.getElementById("i1").classList.remove("hide"); document.getElementById("i2").classList.remove("hide"); } // 隐藏 function hideModel() { document.getElementById("i1").classList.add("hide"); document.getElementById("i2").classList.add("hide"); } //全选 function chooseAll(){ // tbody - > tr -> td -> input(checkbox) var tbody = document.getElementById("tb"); // 获取所有标签 var trs = tbody.children; // 循环所有标签 for(var i=0; i<trs.length; i++){ var tds = trs[i].children; var checkbox = tds[0].firstChild; checkbox.checked = true; } } //取消全选 function cancelAll(){ // tbody - > tr -> td -> input(checkbox) var tbody = document.getElementById("tb"); var trs = tbody.children; for(var i=0; i<trs.length; i++){ var tds = trs[i].children; var checkbox = tds[0].firstChild; checkbox.checked = false; } } //反选 function reverseAll(){ // tbody - > tr -> td -> input(checkbox) var tbody = document.getElementById("tb"); var trs = tbody.children; for(var i=0; i<trs.length; i++){ var tds = trs[i].children; var checkbox = tds[0].firstChild; if(checkbox.checked){ checkbox.checked = false; } else{ checkbox.checked = true; } } } </script> </body> </html>
效果
滚动的文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i">hello world</div> <script> function func() { //获取id=i的标签 var tag = document.getElementById("i"); //获取标签内容 var content = tag.innerText; var left =content.charAt(0); var right = content.substring(1, content.length); var new_content = right + left; tag.innerText = new_content; } setInterval("func()", 1000); </script> </body> </html>
效果
注册框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*注册框主体*/ .pg-main{ width:600px; height: 500px; margin: 0 auto; border: 1px solid #dddddd; } /*标题*/ .pg-head{ height: 80px; line-height: 80px; font-size: 35px; font-weight: bold; margin-left:50px; } /*主体框*/ .pg-body{ height: 270px; color: #7b7b7b; } /*注册行*/ .pg-body-line{ height: 42px; line-height: 42px; } /*左边文字*/ .pg-body-left{ float:left; width: 200px; text-align: right; } /*星号*/ .pg-body-left span{ color:red; } /*右边*/ .pg-body-right{ float:left; width: 400px; font-size:14px; } /*右边输入框*/ .pg-body-right input{ width:250px; height: 28px; } /*验证码行输入框*/ .pg-body-right-verify input{ width:140px; height: 28px; float: left; /*margin:0 auto;*/ margin-top: 4px; } /*验证码图片*/ .pg-body-img{ width: 50px; height: 28px; float: left; margin-top: 4px; } /*验证码图片大小*/ .pg-body-img img{ height: 28px; } /*下部*/ .pg-foot { height: 120px; /*background-color: orange;*/ } /*协议勾选行*/ .pg-foot div{ margin-bottom: 10px; text-align: center; font-size:12px; } /*信息提交按钮*/ .pg-foot-button{ background-color: #e4393c; width: 260px; height: 36px; color:white; font-size: 16px; text-align: center; cursor:pointer; } </style> </head> <body> <!--注册框开始--> <div class="pg-main"> <!--头部标题开始--> <div class="pg-head"> 新用户注册 </div> <!--头部标题结束--> <!--信息输入部分开始--> <div class="pg-body"> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>用户名： </div> <div class="pg-body-right"> <input type="text"> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>用户名： </div> <div class="pg-body-right"> <input type="text"> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>手机号： </div> <div class="pg-body-right"> <input type="text"> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>登陆密码： </div> <div class="pg-body-right"> <input type="password"> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>确认密码： </div> <div class="pg-body-right"> <input type="password"> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>验证码： </div> <div class="pg-body-right-verify"> <input type="text"> </div> <div class="pg-body-img"> <img src="img/verify.png" alt=""> </div> </div> </div> <!--信息输入部分结束--> <!--信息提交开始--> <div class="pg-foot"> <div><input type="checkbox" class="pg-foot-checkbox"> 我已阅读并同意《用户注册协议》</div> <div> <input type="submit" class="pg-foot-button" value="同意以上协议并注册"> </div> </div> <!--信息提交结束--> </div> </body> </html>
效果：
