知识点
复习 html 标签，块级 行内 css position background text-align margin padding font-size z-index over-flow :hover opacity float(clear:both) line-height border color display 补充：页面布局 主站布局 <div class="pg-header"></div> <style>width:980px; margin:0 auto /*内容自动居中*/</style> <div class="pg-body"></div> <div class="pg-footer"></div> 后台管理布局 position fixed 窗口定位，永远固定在窗口某个位置 relative 单独无意义 absolute 页面定位，第一次定位在指定页面位置，滚轮滚动则改变 1.左侧菜单跟随滚动条 fixed 2.左侧菜单固定不动 absolute javascript for循环 for(var item in [11, 22, 33]){ console.log(item) //输出索引 } var arr = [11, 22, 33, 44] for(var i = 0; i < arr.length; i = i + 1){ break; } while(条件){ } 条件语句 if(){ } else if{ } else{ } == === swich(name){ case "1": console.log("1"); break; case "2": console.log("2"); break; default : console.log("default"); } 函数： function func(arg){ return arg+1; } var result = func(1); console.log(result); 普通函数： function func(){ } 匿名函数： setInterval("func()", 5000); setInterval(function(){ console.log("123"); }, 5000) 自执行函数： function func(){ } func() //解释到这里就会自动执行 (function(arg){ console.log(arg); })(1) 序列化操作 JSON.stringify(obj) // 将对象转换为字符串 JSON.parse(str) // 将字符串转为对象 转义 客户端（cookie） -》 服务器端 将数据进过转义后，保存在cookie中 decodeURI() encodeURI() eval python val = eval(表达式) exec(执行代码) javascript eval两者集合 时间 Date类 var d = new Date() d.getxxx() 获取 d.setxxx() 设置 作用域 其他语言（c#）：以代码块作为作用域 public void func(){ if(1 == 1){ string name = "java"; } console.writeline(name); //报错 } python：以函数作为作用域 def func(): if(1==1): name = "alex" print(name) //正常输出 func() print(name) //报错 javascript: 1.以函数作为作用域 function func(){ if(1==1){ var name = "alex"; } console.log(name); } 2.函数的作用域，在函数未被调用之前，已经被创建 3.函数的作用域存在作用域链，调用前被创建 例如： xo = "eric"; function func() { xo = "alex"; function foo() { console.log(xo) } xo = "tony"; return foo; } var ret = func() ret() 4.函数内局部变量提前申明 面向对象 function foo(){ var xo = "alex"; } foo() function Foo(n){ this.name = n; // 属性 this.sayName = function(){ console.log(this.name); } // 方法 } var obj = new Foo("we"); obj.name obj.sayName() this 指代对象（python self） 创建对象，new 函数() 原型： function Foo(n){ this.name = n; } # Foo原型 字典 Foo.prototype = { “sayName": function(){ console.log(this.name) } } DOM 文档对象模型 查找 直接查找 var obj = document.getElementById("li"); 间接查找 文件内容操作 innerText 仅文本 innerHTML 全部内容 value input value 获取当前标签中的值 select value 获取选中的value值（selectedIndex） textarea value获取当前标签中的值 搜索框示例 样式操作 className classList classList.add classList.remove obj.style.fontSize="16px"; obj.style.backgroundColor="red"; 属性操作 attributes setAttribute removeAttribute 创建标签，添加到html中 1.字符串 2.对象 document.createElement("div") 提交表单 任何标签都可以，通过dom提交表单 document.getElementById("id").submit(); 其他 console.log() 输出框 alert() 弹出框 var ret = confirm() 确认框 true/false url和刷新 location.href 获取url location.href= "url" 设置url，重定向 location.reload() 重新加载 相当于 location.href = location.href 定时器 var obj = setInterval(function(){}, 5000) clearInterval(obj) 设置延时 var obj = setTimeout(function(){}, 5000) clearTimeout(obj) 事件 onclick onblur onfocus 面试题：行为 样式 结构 相分离的页面？ js css html this 谁调用this，就指向谁 绑定事件 1.直接绑定标签， onclick="func()" 2.现获取dom对象，然后进行绑定 document.getElementById("id").onclick=func() this,当前触发事件的标签 第一种绑定方式： onclick="func(this)" function func(self){ //self,当前点击的标签 } 第二种绑定方式： id ="id" document.getElementById("id").onclick=function(){ this 指代当前点击的标签 } 第三种绑定方式： 一个事件可以执行多个函数 addEventListener() css属性转为javascript -去掉，首字符大写 多查手册 sublime 插件 emmet
代码实例：
AO对象
function func(age){ console.log(age); //function var age = 27; console.log(age); //27 function age() {} console.log(age); //27 } func(3); /* active object ==> AO 1.形式参数 AO.age = undefined; AO.age = 3; 2.局部变量 AO.age = undefined; 3.函数声明表达式 AO.age = function() */
一个hover两个元素不一样的效果
<style> .item:hover{ background-color: #e4393c; } .item:hover .b{ background-color: #64b5dd; } </style> <div class="item"> <div class="a">1234567890</div> <div class="b">1234567890</div> </div>
显示效果
javascript以函数为作用域
<script> xo = "eric"; function func() { xo = "alex"; function foo() { console.log(xo); //tony xo = "Jack"; } xo = "tony"; return foo; } var ret = func(); ret() </script>
左侧菜单跟随滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧菜单跟随滚动</title> <style> body{ margin: 0 auto; } .pg-header{ height:48px; background-color: #0d3ea2; } .pg-content .menu{ width:200px; position: fixed; top:48px; left:0; bottom:0; background-color: #333333; } .pg-content .content{ position:fixed; top: 48px; left:200px; right:0; bottom:0; background-color: #dddddd; overflow:auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu"> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> </div> <div class="content"> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> </div> </div> <div class="pg-footer"></div> </body> </html>
显示效果
左侧菜单固定不动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧菜单固定不动</title> <style> body{ margin: 0 auto; } .left{ float: left; } .right{ float: right; } .pg-header{ height:48px; background-color: #0d3ea2; } .pg-content .menu{ width:200px; position: absolute; top:48px; left:0; bottom:0; } .menu-back{ background-color: #333333; } .pg-content .content{ position:absolute; top: 48px; left:200px; right:0; bottom:0; /*!*min-width:980px;*! 最小宽度*/ /*overflow:auto;*/ } .content-back{ background-color: #dddddd; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left"> <div class="menu-back"> <p style="margin-top: 0">lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> </div></div> <div class="content right"> <div class="content-back"> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> </div> </div></div> <div class="pg-footer"></div> </body> </html>
效果同上
顶部菜单栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>顶部菜单栏</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <style> body{ margin: 0 auto; } .left{ float: left; } .right{ float: right; } .pg-header{ height:48px; background-color: #0d3ea2; line-height: 48px; color: white; } .pg-header .logo{ width:200px; color:white; font-size: 21px; text-align: center; background-color: #0d3686; } .pg-header .icons{ padding: 0 20px; } .pg-header .icons:hover{ background-color: #0d3686; } .pg-header .icons .num{ background-color: red; display: inline-block; padding: 10px 7px; font-size:12px; border-radius: 50%; line-height: 1px; } .pg-header .user{ padding: 0 30px; height: 48px; margin-right: 100px; background-color: #0d3ea2; } .pg-header .user .menu{ position: absolute; right:40px; top:48px; width:160px; z-index:20; background-color: #dddddd; display:none; } .pg-header .user .menu a{ display:block; text-underline: none; /*background-color: #0d3686;*/ } .pg-header .user:hover{ background-color: #0d3686; } .pg-header .user:hover .menu{ display:block; } .pg-header .user .menu a:hover{ background-color: #64b5dd; } .pg-header .user a img{ width:40px; height: 40px; border-radius: 50%; margin-top: 4px; } .pg-content{ } .pg-content .menu{ width:200px; position: absolute; top:48px; left:0; bottom:0; } .menu-back{ background-color: #333333; } .pg-content .content{ position:absolute; top: 48px; left:200px; right:0; bottom:0; z-index:9; /*!*min-width:980px;*! 最小宽度*/ /*overflow:auto;*/ } .content-back{ background-color: #dddddd; } </style> </head> <body> <div class="pg-header"> <div class="logo left">毛豆科技</div> <div class="user right"> <a href="#"><img src="img/微信头像.jpg" alt=""></a> <div class="menu"> <a href="#">设置</a> <a href="#">资料</a> <a href="#">退出</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span class="num">5</span> </div> <div class="icons right"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </div> </div> <div class="pg-content"> <div class="menu left"> <div class="menu-back"> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> </div></div> <div class="content right"> <div class="content-back"> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> <p>lalalallala</p> </div> </div></div> <div class="pg-footer"></div> </body> </html>
显示效果
提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>提交表单</title> </head> <body> <form id="f1" action="http://www.baidu.com/s?"> <input type="text" name="wd"> <input type="submit" value="提交"> <a onclick="submitForm()">提交</a> </form> <script> function submitForm() { document.getElementById("f1").submit(); } </script> </body> </html>
事件捕捉冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #main{ width:400px; height:300px; background-color: #e4393c; } #content{ width:300px; height:200px; background-color: #0d3ea2; } </style> </head> <body> 捕捉：html -> body -> div 冒泡：div -> body -> html <div id="main"> <div id="content"></div> </div> <script> var main = document.getElementById("main"); var content = document.getElementById("content"); // false 冒泡 true 捕捉 main.addEventListener("click", function () { console.log("main"); }, true); content.addEventListener("click", function () { console.log("content"); }, true); </script> </body> </html>
添加标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加标签</title> </head> <body> <button onclick="addElement1()">添加1</button> <button onclick="addElement2()">添加2</button> <div id="i1"><p><input type="text"></p></div> <script> // 通过字符串创建 function addElement1() { // 创建标签，添加到li里面 var tag = document.getElementById("i1"); var newTag = "<p><input type='text'></p>"; // beforeBegin afterBegin beforeEnd afterEnd tag.insertAdjacentHTML("beforeEnd", newTag); } // 通过对象方式 function addElement2() { // 创建标签，添加到li里面 var tag = document.getElementById("i1"); var input = document.createElement("input"); input.setAttribute("type", "text"); input.style.color = "red"; var p = document.createElement("p"); p.appendChild(input); tag.appendChild(p); } </script> </body> </html>
绑定多个事件函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定多个事件函数</title> </head> <body> <div id="i1" style="width: 300px; height:400px; background-color: red"></div> <script> var tag = document.getElementById("i1"); tag.addEventListener("click", function () { console.log("111"); },false); tag.addEventListener("click", function () { console.log("222"); },false); </script> </body> </html>
行为样式结构分离实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行为样式结构分离实例</title> <style> #i1{ background-color: #0d3686; width: 300px; height: 400px; } </style> </head> <body> <div id="i1"></div> <script> var div = document.getElementById("i1"); div.onclick = function(){ console.log("hello world") } </script> </body> </html>
表格隔行换色-1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行换色-1</title> </head> <body> <table border="1px" style="width:300px"> <tr onmouseover="t1(0)" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr> <tr onmouseover="t1(1)" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr> <tr onmouseover="t1(2)" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr> </table> <script> function t1(n) { var tag =document.getElementsByTagName("tr")[n]; console.log(tag); tag.style.backgroundColor="red"; } function t2(n) { var tag =document.getElementsByTagName("tr")[n]; console.log(tag); tag.style.backgroundColor=""; } </script> </body> </html>
效果
表格隔行换色-2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行换色-2</title> </head> <body> <table border="1px" style="width:300px"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <script> var trs = document.getElementsByTagName("tr"); var len = trs.length for(var i = 0; i < len; i++){ // i =0 1 2 作用域改变了 trs[i].onmouseover = function () { //this指向调用者 this.style.backgroundColor="red"; }; trs[i].onmouseout = function () { this.style.backgroundColor=""; }; } </script> </body> </html>
设置延时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置延时</title> </head> <body> <div id="i1"></div> <input onclick="del()" type="button" value="删除"> <script> function del() { var tag = document.getElementById("i1"); tag.innerText="已删除"; var obj = setTimeout(function () { tag.innerText=""; }, 5000) } </script> </body> </html>
输入框提示功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入框提示功能</title> </head> <body> <div style="width:600px; margin: 0 auto;"> <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字"> <input id="i2" type="text" placeholder="请输入关键字"> </div> <script> // 光标移入输入框隐藏提示文字 function Focus() { var tag = document.getElementById("i1"); var val = tag.value; if(val=="请输入关键字"){ tag.value=""; } } // 光标移出输入框显示提示文字 function Blur() { var tag = document.getElementById("i1"); if(tag.value.length==0){ tag.value="请输入关键字"; } } </script> </body> </html>