前端：DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
注：以后设置id，不能以数字开头并且与其他id不能重复，不然会找错
示例：
<div> <div class="c1">cla1</div> <div class="c1" id="i1"> <div name="n1">n1</div> <div name="n1"> <a>a1</a> <a>a2</a> </div> </div> <div class="c1">cla3</div> </div>
这里直接在终端浏览器上进行演示，演示效果图：
我们找到的分为两类，一类是元素，一类是元素集合。其他的直接查找也是通过这种方法来找，这里就不一一演示了。
2、间接查找
包含文本和标签： parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 只包含标签： parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
示例1：
<div> 123 <div class="c1">cla1</div> <div class="c1" id="i1"> <p>pppppp</p> <div name="n1"> <span>span</span> </div> <div name="n1"> <a>a1</a> <a>a2</a> </div> </div> <div class="c1">cla3</div> </div>
效果演示图:
效果演示图2:
如果nodeType=3，就是文本，如果nodeType=1，就是标签。
示例2：
<div> <div class="c1">cla1</div> <div class="c1" id="i1"> <p>pppppp</p> <div name="n1"> <span>span</span> </div> <div name="n1"> <a>a1</a> <a>a2</a> </div> </div> <div class="c1">cla3</div> </div>
效果演示图：
实例：只获取标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> 123 <div class="c1">asdf</div> <div class="c1" id="i1"> <p>p</p> <div name="n1"> <span>n1</span> </div> <div name="n2"> <a>a1</a> <a>a11111</a> </div> </div> <div class="c1">casdf</div> </div> <script> var i1 = document.getElementById("i1");//id为i1的标签 var p1_text = i1.parentNode;//含文本，也有标签 var p1 = i1.parentElement;//不含文本，只有标签 var eles_node = p1_text.childNodes //含文本和所有标签 for(var j=0;j<eles_node.length;j++){ var current_node = eles_node[j]; if(current_node.nodeType == 1){//nodeType==1是标签，nodeType>1是文本 console.log(eles_node[j]) } } var eles = p1.children;//不含文本所有标签 for(var i=0;i<eles.length;i++){ console.log(eles[i]) } </script> </body> </html>
结果：
二、操作
1、内容
1 innerText 文本 2 outerText 3 innerHTML HTML内容 4 outerHTML 5 value 值
示例：
<body> <a href="http://www.baidu.com">hello<span>world</span></a> <script> var obj = document.getElementsByTagName("a")[0]; alert(obj.innerText); alert(obj.innerHTML); </script> </body>
Text效果演示图：
Html效果演示图：
如果要赋值：
<body> <a href="http://www.baidu.com">百度<span>ok</span></a> <input id="txt" type="text"/> <select id="sel"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <script> var obj =document.getElementsByTagName("a")[0]; obj.innerText = "123"//赋值 obj.innerHTML = "<p>333</p>"//赋值 </script> </body>
value：可以获取值，也可以设置值。
<input id="txt" type="text"> <select id="sel"> <option value="1">上海</option> <option value="2">北京</option> </select>
效果演示图：
1、文本为空时取值：
2、文本有值时取值：
3、赋值：
获取例子中表单里面的值：
1、
2、
value可操作的标签：input:text、checkbox、radio、password、select、textarea
其他实例：
复选框操作：checked=true：选中；checked=false：未选中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>好吃的</h1> <div id="i1"> <ul> <li><input type="checkbox" value="1">芒果</li> <li><input type="checkbox" value="2">桂圆</li> <li><input type="checkbox" value="3">提子</li> </ul> </div> <div id="i2"> <ul> <li><input type="checkbox" value="11">火锅</li> <li><input type="checkbox" value="22">冒菜</li> <li><input type="checkbox" value="33">串串</li> </ul> </div> </body> </html>
效果演示图：
实例：全选、取消、反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选、取消、反选</title> </head> <body> <h1>今天你想吃什么</h1> <div> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancleAll();"/> <input type="button" value="反选" onclick="ReverseAll();"/> </div> <table> <thead> <tr> <th>序号</th> <th>菜名</th> <th>价格</th> </tr> </thead> <tbody id="tb"> <tr> <td><input class="c1" type="checkbox"/></td> <td>火锅</td> <th>188</th> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>冒菜</td> <th>68</th> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>烧烤</td> <th>88</th> </tr> </tbody> </table> <script> function CheckAll() {//全选 var tb = document.getElementById("tb"); var checks = tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = true; } } function CancleAll() {//取消 var tb = document.getElementById("tb"); var checks = tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = false; } } function ReverseAll() {//反选 var tb = document.getElementById("tb"); var checks = tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check =checks[i]; if(current_check.checked){//如果选中，就是true current_check.checked = false;//将选中的变为false }else{//如果没有选中，就是false current_check.checked = true;//将没有选中的变为true } } } </script> </body> </html>
实例：单选框
注：radio要有相同的name才能互斥。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单选框</title> </head> <body> <div> <ul class="radios"> <li><input type="radio" name="gender" value="11">man</li> <li><input type="radio" name="gender" value="22">woman</li> </ul> </div> <script> var radios = document.getElementsByTagName("input") </script> </body> </html>
效果演示图：
实例：下拉框
<select id="sel"> <option value="11">北京</option> <option value="22" selected="selected">上海</option> <!--selected="selected"：默认选中上海--> <option value="33">广州</option> </select>
效果演示图：
1：
2：
selectedIndex:
1:
2:
2、属性
1 attributes // 获取所有标签属性 2 setAttribute(key,value) // 设置标签属性 3 getAttribute(key) // 获取指定标签属性 4 5 /* 6 var atr = document.createAttribute("class"); 7 atr.nodeValue="democlass"; 8 document.getElementById('n1').setAttributeNode(atr); 9 */
实例：摸态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .hide{ display: none; } .model{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); z-index: 2; } .content{ height: 300px; width: 400px; background-color: pink; position: fixed; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; z-index: 3; } </style> </head> <body> <div style="background-color: palevioletred;height: 1024px"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td><input type="button" value="点我" onclick="Show();"></td> </tr> </table> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td><input type="button" value="点我" onclick="Show();"></td> </tr> </table> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td><input type="button" value="点我" onclick="Show();"></td> </tr> </table> </div> <div id="2" class="model hide"></div> <div id="3" class="content hide"> <p>用户：<input type="text"></p> <p>密码：<input type="password"></p> <p> <input type="button" value="确定" onclick="Hide()"> <input type="button" value="取消" onclick="Hide()"> </p> </div> <script> function Show() { document.getElementById("2").classList.remove("hide"); document.getElementById("3").classList.remove("hide"); } function Hide() { document.getElementById("2").classList.add("hide"); document.getElementById("3").classList.add("hide"); } </script> </body> </html>
给onclick传特殊参数：this。只要鼠标点击this就代指点击的是当前标签
实例：折叠菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ padding: 0; margin: 0; } .hide{ display: none; } .menu{ width: 200px; height: 500px; background-color: #2459a2; border: 2px solid #333; } .menu .title{ background-color: brown; cursor: pointer; } .menu .content{ background-color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="Show(this);">菜单一</div> <div class="content"> <ul> <li>内容1</li> <li>内容1</li> <li>内容1</li> </ul> </div> </div> <div class="item"> <div class="title" onclick="Show(this);">菜单二</div> <div class="content hide"> <ul> <li>内容2</li> <li>内容2</li> <li>内容2</li> </ul> </div> </div> <div class="item"> <div class="title" onclick="Show(this);">菜单三</div> <div class="content hide"> <ul> <li>内容3</li> <li>内容3</li> <li>内容3</li> </ul> </div> </div> <div class="item"> <div class="title" onclick="Show(this);">菜单四</div> <div class="content hide"> <ul> <li>内容4</li> <li>内容4</li> <li>内容4</li> </ul> </div> </div> </div> <script> function Show(arg) { arg.nextElementSibling.classList.remove("hide");//删除当前点击的div中的hide var father = arg.parentElement;//找到当前点击的div的父级 var sons = father.parentElement.children;//找到所有的item for(var i=0;i<sons.length;i++){ var current_ele = sons[i];//得到循环到哪个菜单 if(current_ele == father){ }else{ current_ele.children[1].classList.add("hide");//找到"content hide"的div } } } </script> </body> </html>
实例：搜索框
方法一：
<input type="text" placeholder="请输入内容">
方法二:
<html lang="en"> <head> <meta charset="UTF-8"> <title>万能搜索框</title> <style> .gg{ color: gray; } .bb{ color: black; } </style> </head> <body> <input type="text" class="gg" value="请输入内容" onfocus="Touch(this);" onblur="Move(this);"/> <script> function Touch(ths) { ths.className = "bb"; var current_val = ths.value;//通过点击标签获得value值 if (current_val == "请输入内容"){//判断点击后如果文本框里面值是：请输入内容 ths.value = "";//赋值一个空值给value } } function Move(ths) { var current_val = ths.value;//鼠标离开文本框时文本框里面的值 if (current_val =="请输入内容" || current_val.trim().length == 0){//判断鼠标离开后文本框内容如果是用户自己输入：请输入内容，或者是空格，或者是空 ths.value = "请输入内容";//就重新赋值 ths.className = "gg";//复制后将字体颜色变成灰色 } } </script> </body> </html>
onfocus:当鼠标获取焦点时，通俗来将就是鼠标点入搜索框时，鼠标在闪动并且边框也改变了颜色。
onblur:当鼠标离开搜索框时可以执行某个函数
实例：自定义属性操作
将自定义属性进行操作后，改变原来的文本内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义属性</title> </head> <body> <input type="button" onclick="Func();" value="点点点"/> <div id="i1"> <div class="c1">111</div> <div class="c1" abc="222">111</div> <div class="c1">111</div> <div class="c1" abc="222">111</div> <div class="c1">111</div> <div class="c1" abc="222">111</div> </div> <script> function Func() { var i1 = document.getElementById("i1");//找到id var divs = i1.children;//找到所有的孩子 for(var i=0;i<divs.length;i++){//循环所有的孩子 var current_div = divs[i];//获取索引 var result = current_div.getAttribute("abc");//找到索引对应的标签的属性 if(result == "222"){//如果属性的值等于222 current_div.innerText = "222";//将此标签的内容重新赋值 } } } </script> </body> </html>
效果演示图：
1：
2：
3、class操作
1 className // 获取所有类名 2 classList.remove(cls) // 删除指定类 3 classList.add(cls) // 添加类
1 以字符串形式呈现：obj.getElementById("...").className
2 以列表形式呈现：obj.getElementById("...").classList
3 删除属性：obj.getElementById("...").classList.remove("....")
4 添加属性：obj.getElementById("...").classList.add("....")
示例：
<select id="sel"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select>
效果演示图：
实例：Tab菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ list-style: none; padding: 0; margin: 0; } ul li{ float: left; background-color: paleturquoise; color: white; padding: 8px 10px; } .clearfix:after{ display: block; content: '.'; height: 0; visibility: hidden; clear: both; } .hide{ display: none; } .tab-menu .title{ background-color: #dddddd; } .tab-menu .title .active{ background-color: white; color: black; } .tab-menu .content{ border: 1px solid #dddddd; min-height: 150px; } </style> </head> <body> <div style="width: 600px;margin: 0 auto"> <div class="tab-menu"> <div class="title clearfix"> <ul> <li target="11" class="active" onclick="Show(this);">火锅配料</li> <li target="33" onclick="Show(this);">冒菜配料</li> <li target="22" onclick="Show(this);">烧烤配料</li> </ul> </div> <div id="cc" class="content"> <div con="11">牛油、醪糟...</div> <div con="22" class="hide">孜然、花椒粉...</div> <div con="33" class="hide">豆瓣、大蒜...</div> </div> </div> </div> <script> function Show(ths) { var tsrget = ths.getAttribute("target"); ths.className = "active";//给点击到的标签赋值class var brothers = ths.parentElement.children;//获取兄弟标签 for(var i=0;i<brothers.length;i++){ if(ths == brothers[i]){//如果循环到自己，就不做操作 }else{//如果循环到其他，就移除class属性 brothers[i].removeAttribute("class"); } } //操作内容 var contents = document.getElementById("cc").children;//获取内容div的子级 for(var j=0;j<contents.length;j++){//循环子级 var current_content = contents[j];//得到循环到的某一子级 var con = current_content.getAttribute("con");//获取con属性的值 if(con == tsrget){//如果con值和点击到标签的属性值一样 current_content.classList.remove("hide");//去除hide属性 }else{//如果不一样 current_content.className = "hide";//添加hide属性 } } } </script> </body> </html>
效果演示图：
1：
2：
4、标签操作
a、创建标签
1 // 方式一 2 var tag = document.createElement('a') 3 tag.innerText = "wupeiqi" 4 tag.className = "c1" 5 tag.href = "http://www.cnblogs.com/wupeiqi" 6 7 // 方式二 8 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
b、操作标签
1 // 方式一 2 var obj = "<input type='text' />"; 3 xxx.insertAdjacentHTML("beforeEnd",obj); 4 xxx.insertAdjacentElement('afterBegin',document.createElement('p')) 5 6 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' 7 8 // 方式二 9 var tag = document.createElement('a') 10 xxx.appendChild(tag) 11 xxx.insertBefore(tag,xxx[1])
beforeBegin:在<ul>上部添加
beforeEnd:在<li>的末尾添加
afterEnd:在<ul>的外部末尾添加
afterBegin:在<li>内部开头添加
实例：创建标签并插入标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加列表</title> </head> <body> <div> <h1>添加您知道的美食</h1> <input type="text"/> <input type="button" value="添加" onclick="Addcon(this);"/> </div> <div> <ul id="content"> <li>大宅门火锅</li> <li>老妈兔头</li> </ul> </div> <script> function Addcon(ths) { var val = ths.previousElementSibling.value;//获取输入的值 ths.previousElementSibling.value = "";//获取值后，将内容复制为空 var contentList = document.getElementById("content");//获取列表 // //第一种添加形式:字符串方式 // var str = "<li>" + val + "</li>";//将获取到的值和标签进行组合 // contentList.insertAdjacentHTML("beforeEnd",str);//将组合好的字符串添加到列表中 // //第二种添加形式：元素方式（推荐） var tag = document.createElement("li");//创建一个要添加的标签 tag.innerText = val;//将输入的值赋值 contentList.appendChild(tag);//添加到列表中 contentList.insertBefore(tag,contentList.children[1]);//添加到制定索引位置 // //扩展：添加子标签 // var tag = document.createElement("li");//创建一个要添加的标签 // tag.innerText = val;//将输入的值赋值 // var temp = document.createElement("a"); // temp.innerText = "百度"; // temp.href = "http://baidu.com"; // tag.appendChild(temp); // contentList.insertBefore(tag,contentList.children[1]);//添加到制定索引位置 } </script> </body> </html>
实例：标签操作之移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加列表实例</title> </head> <body> <h2 id="h2">222 <a>a</a> <span>s</span> </h2> <div id="content"> <div class="item">1</div> <div class="item">1</div> </div> <script> var h = document.getElementById("h2");//获取id=h2标签 var c = document.getElementById("content");//获取id=content标签 c.appendChild(h);//直接将h2标签和内容全部移到id=content标签里面 </script> </body> </html>
效果演示图：
实例：标签操作之克隆（拷贝、复制）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加列表实例</title> </head> <body> <h2 id="h2">222 <a>a</a> <span>s</span> </h2> <div id="content"> <div class="item">1</div> <div class="item">1</div> </div> <script> var h = document.getElementById("h2");//获取id=h2标签 var c = document.getElementById("content");//获取id=content标签 //克隆：.cloneNode(true) var newH = h.cloneNode(true);//cloneNode(true)加true表示h2标签里所有的内容都克隆，不加就表示只拷贝h2标签而里面文本和其他标签都没有拷贝 c.appendChild(newH); </script> </body> </html>
效果演示图：
实例：返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部实例</title> <style> .go-top{ background-color: palevioletred; position: fixed; width: 40px; height: 40px; right: 20px; bottom: 10px; } .hide{ display: none; } a{ text-decoration: none; color: palegoldenrod; } </style> </head> <body onscroll="Func();"><!--onscroll：只要滑动滚动条就会执行这个函数--> <div id="i1" style="height: 2000px"> <h1>顶部</h1> </div> <div id="i2" class="go-top hide"> <a href="javascript:void (0);" onclick="GoTop();">返回顶部</a> <!--href="javascript:void (0)"返回顶部时上不刷新(直接写Href是刷新)。也可以这样写：href="#"--> </div> <script> function Func() { var scrolltop = document.body.scrollTop;//获取滚动条距离顶部的距离 var ii = document.getElementById("i2"); if(scrolltop>10){ //判断滚动条距离顶部的距离大于10的时候 ii.classList.remove("hide"); //就将隐藏属性去掉 }else{ ii.classList.add("hide"); //判断滚动条距离顶部的距离小于10的时候，就将隐藏属性加上 } } function GoTop() { document.body.scrollTop = 0;//滚动条赋值为0，就返回到顶部 } </script> </body> </html>
5、样式操作
注意backgroundColor的写法
1 var obj = document.getElementById('i1') 2 3 obj.style.fontSize = "32px"; 4 obj.style.backgroundColor = "red";
6、位置操作
1 总文档高度 2 document.documentElement.offsetHeight 3 4 当前文档占屏幕高度 5 document.documentElement.clientHeight 6 7 自身高度 8 tag.offsetHeight 9 10 距离上级定位高度 11 tag.offsetTop 12 13 父定位标签 14 tag.offsetParent 15 16 滚动高度 17 tag.scrollTop 18 19 /* 20 clientHeight -> 可见区域：height + padding 21 clientTop -> border高度 22 offsetHeight -> 可见区域：height + padding + border 23 offsetTop -> 上级定位标签的高度 24 scrollHeight -> 全文高：height + padding 25 scrollTop -> 滚动高度 26 特别的： 27 document.documentElement代指文档根节点 28 */
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scrollheight</title> </head> <body style="margin: 0"> <div style="height: 20px;background-color: green;"></div> <div style="border: 5px solid pink;padding: 10px;"> <div> <div id="xo" style="height: 200px;overflow: auto;width: 400px;margin: 0 auto;border: 15px solid red;padding: 3px;" > <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> </div> </div> </div> <script> var i =document.getElementById("xo"); console.log(i.scrollTop); //红色框内滚动条离滚动条顶部的位置：... console.log(i.scrollHeight); //红色框内整个文档内部的总高度+padding(上和下) console.log(i.clientTop); //红色边框高度:15 console.log(i.clientHeight); //可见文档范围的高度：可见文本范围自身+padding(上和下) console.log(i.offsetTop); //当前标签距离顶部的高度:height: 20px+border: 5px+padding: 10px console.log(i.offsetHeight); //可见文档范围的高度：可见文本范围自身+padding(上和下)+border(上和下) </script> </body> </html>
offsetTop：距离顶部的高度，这个距离顶部的前提是当前标签的父标签没有出现position，如果当前标签父级出现position，就是当前标签距离父级标签的距离
实例：定位菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>定位菜单实例</title> 6 <style> 7 body{ 8 margin: 0; 9 background-color: #dddddd; 10 } 11 .pg-header{ 12 background-color: black; 13 color: white; 14 height: 48px; 15 } 16 .pg-body .menu{ 17 position: absolute; 18 left: 200px; 19 width: 180px; 20 background-color: white; 21 float: left; 22 } 23 .pg-body .menu .active{ 24 background-color: darkslateblue; 25 color: white; 26 } 27 .pg-body .fixed{ 28 position: fixed; 29 top: 5px; 30 } 31 .pg-body .content{ 32 position: absolute; 33 left: 385px; 34 right: 200px; 35 background-color: white; 36 float: left; 37 } 38 .pg-body .content .item{ 39 height: 900px; 40 } 41 </style> 42 43 </head> 44 <body onscroll="Hua();"> 45 <div class="pg-header"></div> 46 <div class="pg-body"> 47 <div id="menu" class="menu"> 48 <ul> 49 <li>第一章</li> 50 <li>第二章</li> 51 <li>第三章</li> 52 </ul> 53 </div> 54 <div id="content" class="content"> 55 <div class="item">床前明月光</div> 56 <div class="item">疑是地上霜</div> 57 <div class="item">我是郭德纲</div> 58 </div> 59 </div> 60 <script> 61 function Hua() { 62 var a = document.body.offsetHeight;//获取body的自身总高度 63 var b = document.getElementById("content").offsetHeight;//获取内容的总高度 64 var c = document.documentElement.clientHeight;//获取可见范围的高度（窗口高度） 65 var huaGao = document.body.scrollTop;//获取滑动的高度 66 var caiDan = document.getElementById("menu");//获取菜单并赋值 67 if(huaGao>48){//判断滑动距离大于48 68 caiDan.classList.add("fixed");//将菜单栏固定住 69 }else{//如果滑动距离小于48 70 caiDan.classList.remove("fixed");//将菜单栏固定功能去掉 71 } 72 var items = document.getElementById("content").children;//获取内容 73 for(var i=0;i<items.length;i++) {//循环获取的每个内容 74 var currentItem = items[i];//获取索引对应的值 75 var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;//获取当前标签离body顶部的距离 76 var currentItemWindowTop = currentItemBodyTop - huaGao;//距离浏览器顶部高度减去滑动距离 77 // console.log(currentItemWindowTop); 78 var currentHeight = currentItem.offsetHeight;//当前文档高度 79 var bottomHeight = currentItemBodyTop + currentHeight;//文档底部有多高(自身的高度+顶部离body的高度) 80 81 if((a+b)==(huaGao+c)){//实现第三章内容高度不够划过顶部时的效果 82 var mu = document.getElementById("menu").children[0].lastElementChild; 83 var lis = document.getElementById("menu").getElementsByTagName("li"); 84 for(var m=0;m < lis.length;m++){ 85 var current_list = lis[m]; 86 if (current_list.getAttribute("class") == 'active'){ 87 current_list.classList.remove("active"); 88 break 89 } 90 } 91 mu.classList.add("active"); 92 return 93 } 94 95 if(currentItemWindowTop<0 && huaGao<bottomHeight){//实现每一章内容划过顶部然后菜单栏出现对应的效果 96 var ziji = caiDan.getElementsByTagName("li")[i]; 97 ziji.className = "active";//将对应的菜单加上active属性 98 var lis = caiDan.getElementsByTagName("li"); 99 for(var j=0;j<lis.length;j++){ 100 if(ziji == lis[j]){ 101 102 }else { 103 lis[j].classList.remove("active") 104 } 105 } 106 break; 107 } 108 } 109 } 110 </script> 111 </body> 112 </html>
7、提交表单
document.geElementById('form').submit()
示例：
<body> <!--提交表单,可以用button替代submit，只要定义一个事件就可以。action提交到哪里，method提交方式--> <form id="f" action="http://www.sogou.com/web?" method="get"> <input name="query" type="text"> <input type="button" onclick="SubmitForm();" value="提交"> </form> <script> function SubmitForm() { document.getElementById("f").submit(); } </script>
8、其他操作
1 console.log 输出框 2 alert 弹出框 3 confirm 确认框 4 5 // URL和刷新 6 location.href 获取当前页面URL 7 location.href = "url" 重定向（跳转到制定url页面） 8 location.reload() 重新加载 9 10 // 定时器 11 setInterval 多次定时器 12 clearInterval 清除多次定时器 13 setTimeout 单次定时器（只执行一次就不执行了） 14 clearTimeout 清除单次定时器
示例：
1 <input type="button" value="confirm" onclick="Firm();"> 2 <script> 3 function Firm() {//弹框显示confirm内容 4 var r = confirm("hello");//接收返回值 5 console.log(r);//如果点击确定返回true，如果点取消返回false 6 } 7 </script>
实例：定时器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>其他操作</title> 6 </head> 7 <body> 8 9 <!--提交表单,可以用button替代submit，只要定义一个onclick事件就可以。action提交到哪里，method提交方式--> 10 <form id="f" action="http://www.sogou.com/web?" method="get"> 11 <input type="button" value="Interval" onclick="Interval();"> 12 <input type="button" value="StopInterval" onclick="StopInterval();"> 13 14 </form> 15 16 <script> 17 function Interval() { 18 s1 = setInterval(function () {//function ()匿名函数.setInterval相当于一个定时器，没隔制定时间执行匿名函数 19 console.log("s1"); 20 },1000); 21 s2 = setInterval(function () { 22 console.log("s2"); 23 },2000); 24 console.log(1); 25 } 26 function StopInterval() { 27 clearInterval(s1);//让s1定时器停止。s1是全局变量 28 } 29 </script> 30 </body> 31 </html>
定时器之删除和保留
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>定时器之删除</title> 6 </head> 7 <body> 8 <div> 9 <input type="button" value="delete" onclick="Delete();" /> 10 <input type="button" value="keep" onclick="UnDelete();" /> 11 <div id="status"></div> 12 </div> 13 <script> 14 function Delete() { 15 document.getElementById("status").innerText="已删除";//给id为status赋值内容 16 t1 = setTimeout(ClearStatus,5000);//5秒后执行一次ClearStatus函数 17 } 18 function ClearStatus() { 19 document.getElementById("status").innerText=""; 20 } 21 function UnDelete() { 22 clearTimeout(t1);//清除单次定时器 23 } 24 </script> 25 </body> 26 </html>
作用域补充（一）：
强烈推荐武大神绝世经典好博客：http://www.cnblogs.com/wupeiqi/p/5649402.html
JS里面没有块级作用域，只有函数作用域。一个函数就是一个作用域。
JS在定义时已经创建了作用域链，之后按照作用域链来执行。
示例：
1 <script> 2 function func() { 3 for(var i=0;i<3;i++){//当i等于2，自增一为3，此时i=3，再判断时已不满足条件，所以i等于3 4 setInterval(function () {//一次生成3个计时器 5 console.log(i);//一次输出3个3 6 },1000); 7 } 8 } 9 func(); 10 </script>
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>作用域</title> 6 </head> 7 <body> 8 <div id="inp"> 9 <input type="button" value="1"> 10 <input type="button" value="2"> 11 <input type="button" value="3"> 12 </div> 13 <script> 14 var btns = document.getElementById("inp").children; 15 for(var j=0;j<btns.length;j++){ 16 var current_input = btns[j];//当前input标签 17 current_input.onclick = function () { 18 alert(j);//alert:3 19 } 20 } 21 //当for循环执行完之后j=3 22 </script> 23 </body> 24 </html>
Pthon中作用域链和JS是一样的。
示例：
li = [] for i in range(10): li.append(lambda: i) # print(i) print(li) print(li[0]()) print(li[1]())
示例：
li = [lambda :x for x in range(9)] print(li) print(li[0]) print(li[0]())
示例：
li = [x for x in range(9)] print(li) #打印结果：[0, 1, 2, 3, 4, 5, 6, 7, 8]
示例：
li = [x+10 for x in range(9) if x > 5] print(li) #打印结果：[16, 17, 18]
三、事件
对于事件需要注意的要点：
- this
- event
- 事件链以及跳出
- 默认事件和自定义事件
this触发当前事件的标签；event触发当前标签的事件的内容（可监听键盘按键：keyCode）。
注册事件的方式：
方式一： <div 事件名="函数名()"></div> 方式二： docuement.get......事件名 = function()
事件绑定示例：
1 <div onmouseover="Func(this);" onmouseout="Out(this);">123</div> 2 <script> 3 function Func(self) {//self表示形参,当前绑定事件参数是this,就表示鼠标移动到当前div 4 self.style.color = "red"; 5 } 6 function Out(ths) {//鼠标移动开之后绑定该事件 7 ths.style.color = "black"; 8 } 9 </script>
默认事件和自定义事件：
注：自定义事件优先于默认事件
1 <a href="http://www.baidu.com" onclick="return Func();">走你</a> 2 <script> 3 function Func() { 4 alert("确定要跳转到百度首页吗?"); 5 return true; 6 } 7 </script>
注：如果Submitform()里面return false,默认事件就不执行；如果return true,就会执行默认事件
示例：
1 <form action="http://www.sogou.com/web?"> 2 <div id="form1"> 3 <input type="text"> 4 </div> 5 <input type="submit" value="提交" onclick="return Submitform();"> 6 <!--如果Submitform()里面return false,默认事件就不执行；如果return true,就会执行默认事件--> 7 </form> 8 9 <script> 10 function Submitform() { 11 var inputs = document.getElementById("form1").getElementsByTagName("input");//获取input标签 12 for(var i=0;i<inputs.length;i++){//循环 13 var currentInput = inputs[i];//获取循环到的input标签 14 var val = currentInput.value;//取值 15 if(val.trim().length == 0){//判断将值去除空格，并且长度等于0 16 alert("请输入内容"); 17 return false; 18 } 19 } 20 return true; 21 } 22 </script>
