前端：DOM
文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。javascript
1、查找元素
一、直接查找
document.getElementById 根據ID獲取一個標籤
document.getElementsByName 根據name屬性獲取標籤集合
document.getElementsByClassName 根據class屬性獲取標籤集合
document.getElementsByTagName 根據標籤名獲取標籤集合
注：之後設置id，不能以數字開頭而且與其餘id不能重複，否則會找錯html
示例：java
<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>
這裏直接在終端瀏覽器上進行演示，演示效果圖：node
咱們找到的分爲兩類，一類是元素，一類是元素集合。其餘的直接查找也是經過這種方法來找，這裏就不一一演示了。ios
二、間接查找
包含文本和標籤： parentNode // 父節點 childNodes // 全部子節點 firstChild // 第一個子節點 lastChild // 最後一個子節點 nextSibling // 下一個兄弟節點 previousSibling // 上一個兄弟節點 只包含標籤： parentElement // 父節點標籤元素 children // 全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素
示例1：web
<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，就是標籤。app
示例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>
結果：
2、操做
一、內容
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>
效果演示圖：
一、文本爲空時取值：
二、文本有值時取值：
三、賦值：
獲取例子中表單裏面的值：
一、
二、
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:
二、屬性
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：
三、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：
四、標籤操做
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>
五、樣式操做
注意backgroundColor的寫法
1 var obj = document.getElementById('i1') 2 3 obj.style.fontSize = "32px"; 4 obj.style.backgroundColor = "red";
六、位置操做
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>
七、提交表單
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>
八、其餘操做
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]
3、事件
對於事件須要注意的要點：
- 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>
相關文章
- 1. 前端 -- JavaScript-DOM
- 2. 前端----DOM
- 3. 前端 JavaScript DOM
- 4. 前端--BOM和DOM
- 5. 前端——BOM與DOM
- 6. 前端BOM和DOM
- 7. 前端之BOM與DOM
- 8. 【前端】JavaScript之DOM簡介
- 9. 前端面試4：DOM
- 10. 前端DOM知識點
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端 -- JavaScript-DOM
- 2. 前端----DOM
- 3. 前端 JavaScript DOM
- 4. 前端--BOM和DOM
- 5. 前端——BOM與DOM
- 6. 前端BOM和DOM
- 7. 前端之BOM與DOM
- 8. 【前端】JavaScript之DOM簡介
- 9. 前端面試4：DOM
- 10. 前端DOM知識點