python-day54--前端之js-DOM對象
1、DOM對象css
1.什麼是HTML DOMhtml
HTML Document Object Model（文檔對象模型---標籤）node
2.功能：定義了訪問（查找）和操做HTML文檔的標準方法python
3.HTML DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹)bootstrap
DOM樹的目的：導航標籤數組
4.DOM節點app
1.DOM樹的每個節點對象（Node）就是每個標籤 2.節點主要有兩個： 1. document （整個結構html標籤） 2. element （裏面的每個標籤） 3.節點關係： 節點樹中的節點彼此擁有層級關係。 父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。 在節點樹中，頂端節點被稱爲根（root） 每一個節點都有父節點、除了根（它沒有父節點） 一個節點可擁有任意數量的子 同胞是擁有相同父節點的節點
4.節點查找
1.直接查找
document.getElementById(「idname」) #獲得標籤對象
document.getElementsByTagName(「tagname」) #獲得數組對象
document.getElementsByName(「name」) #獲得數組對象
document.getElementsByClassName(「name」) #獲得數組對象
<script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script>
注意：設計到尋找元素，注意<script>標籤的位置！ide
注意：每個標籤都是一個對象，對象就能夠調用屬性和方法函數
2.導航查找 ：經過某個標籤訂位到某些標籤this
導航節點屬性：
''' parentElement // 父節點標籤元素 children // 全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素 '''
注意，js中沒有辦法找到全部的兄弟標籤！
5.節點屬性操做
一、屬性操做
var ele=document.getElementsByClassName("c1")[0];
（1） 文本操做：
ele.innerText 取值
ele.innerText="Egon"; 賦值
ele.innerHTML； 取值
ele.innerHTML="<a href=''>click</a>"; 賦值
區別在 innerHTML能夠取值和賦值標籤，而innerText不行
（2）屬性操做
// 取屬性值（對全部的屬性均可以，除了class類）
console.log(ele.getAttribute("id"));
console.log(ele.id); --簡便
// 屬性賦值：（對全部的屬性均可以，除了class類）
ele.setAttribute("id","d2")
ele.id="d2"; --簡便
// class屬性
console.log(ele.className); 查看
ele.classList.add("hide"); 增長
ele.classList.remove("hide"); 刪除
2 、節點操做（增刪改）
1 建立節點 ： document.createElement("標籤名")
2 添加節點 ： ele_parent.appentChild(ele_child)
3 刪除節點 ： ele_parent.removeChild(ele_child)
4 替換節點 ： ele_parent.repalceChild(newnode, 某個節點)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 width: 500px; 9 height: 300px; 10 border: 1px solid red; 11 } 12 </style> 13 14 <script> 15 window.onload = function () { //監聽 加載完成以後執行 16 var ele = document.getElementsByClassName("addBtn")[0]; 17 var ele_del = document.getElementsByClassName("delBtn")[0]; 18 var eleBtn = document.getElementsByClassName("repalceBtn")[0]; 19 20 21 // 綁定的添加節點事件 22 ele.onclick = function () { 23 // 建立一個a標籤 24 var ele_a = document.createElement("a"); 25 console.log(ele_a); // <a></a> 26 ele_a.innerHTML = "點擊"; // <a>點擊</a> 27 ele_a.setAttribute("href", "http://www.baidu.com"); 28 ele_a.id = "d1"; 29 30 // 建立img標籤 31 32 var ele_img = document.createElement("img"); // <img> 33 ele_img.src = "Bootstrap_i2.png"; // <img src=""> 34 ele_img.height = 50; 35 ele_img.width = 50; 36 37 // 添加標籤 38 39 // 找到父標籤 40 ele_p = document.getElementsByClassName("c1")[0]; 41 ele_p.appendChild(ele_a) 42 // ele_p.appendChild(ele_img) 43 44 }; 45 // 綁定刪除節點事件 46 ele_del.onclick = function () { 47 var ele_p = document.getElementById("p1"); 48 var ele_parent = document.getElementsByClassName("c1")[0]; 49 50 ele_parent.removeChild(ele_p); 51 52 }; 53 // 綁定替換節點事件 54 eleBtn.onclick = function () { 55 //建立的 新節點 56 var ele_img = document.createElement("img"); // <img> 57 ele_img.src = "Bootstrap_i2.png"; // <img src=""> 58 ele_img.height = 50; 59 ele_img.width = 50; 60 61 // 被替換的節點 62 var ele_p = document.getElementById("p1"); 63 64 // 父節點 65 66 var ele_parent = document.getElementsByClassName("c1")[0] 67 68 // 作替換 69 70 ele_parent.replaceChild(ele_img, ele_p) 71 } 72 }; 73 74 </script> 75 76 77 </head> 78 <body> 79 80 <div class="c1"> 81 <p id="p1">p1</p> 82 </div> 83 <button class="addBtn">ADD</button> 84 <button class="delBtn">del</button> 85 <button class="repalceBtn">repalceBtn</button> 86 87 </body> 88 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 window.onload = function () { 8 9 // 表格操做 10 11 var eles = document.getElementsByClassName("del"); 12 for (var i = 0; i < eles.length; i++) { 13 eles[i].onclick = function () { 14 // console.log(this.parentElement.parentElement); 15 var ele_tr = this.parentElement.parentElement; 16 17 var ele_tbody = document.getElementById("t1"); 18 19 ele_tbody.removeChild(ele_tr); 20 21 } 22 } 23 24 }; 25 26 </script> 27 28 29 </head> 30 <body> 31 32 <table border="1"> 33 34 <tbody id="t1"> 35 <tr> 36 <td><input type="checkbox"></td> 37 <td><input type="text"></td> 38 <td> 39 <button class="del">del1</button> 40 </td> 41 </tr> 42 43 <tr> 44 <td><input type="checkbox"></td> 45 <td><input type="text"></td> 46 <td> 47 <button class="del">del2</button> 48 </td> 49 </tr> 50 51 <tr> 52 <td><input type="checkbox"></td> 53 <td><input type="text"></td> 54 <td> 55 <button class="del">del3</button> 56 </td> 57 </tr> 58 59 <tr> 60 <td><input type="checkbox"></td> 61 <td><input type="text"></td> 62 <td> 63 <button class="del">del3</button> 64 </td> 65 </tr> 66 67 </tbody> 68 69 </table> 70 71 72 </body> 73 </html>
5.事件
<body>
<!--事件綁定方式1-->
<div onclick="foo(this)">DIV</div>
<div class="c1">DIV2</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
// <!--事件綁定方式1--> function foo(self) { console.log(self); // var ele=document.getElementsByTagName("div")[0]; self.style.color="red"; } // 事件綁定方式2: 標籤對象.on事件=function(){} var ele=document.getElementsByClassName("c1")[0]; ele.onclick=function () { console.log(this); // this 代指： 當前觸發事件的標籤對象； this.style.fontSize="30px" }; // ul li 事件 var eles_li=document.getElementsByTagName("li"); for (var i=0;i<eles_li.length;i++){ eles_li[i].onclick=function () { console.log(this.innerText); //console.log(i); // i 爲何是4？ //console.log(eles_li[i].innerText); } } </script>
</body>
練習：左側菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左側菜單實例</title> <style> .left{ width:30%; height: 600px; background-color: sandybrown; float: left; } .right{ width: 70%; height: 600px; background-color: deepskyblue; float: left; } .item { /*下面的div不上來，由於給item設置了邊框 width: 100%; height: 200px; /*border: 1px solid red;*/ } .title{ width: 100%; height: 25px; background-color: steelblue; } .hide{ display: none; } </style> </head> <body> <div class="left"> <div class="item"> <div class="title">菜單一</div> <div class="con hide"> <ul> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul> </div> </div> <div class="item"> <div class="title">菜單二</div> <div class="con hide"> <ul> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul> </div> </div> <div class="item"> <div class="title">菜單三</div> <div class="con hide"> <ul> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul> </div> </div> </div> <div class="right"></div> <script> // 先找到要增長鼠標點擊事件的標籤 var ele_title= document.getElementsByClassName('title'); for(var i =0;i<ele_title.length;i++){ ele_title[i].onclick = function () { // 顯示點擊標籤下的兄弟標籤 // 先找到當前的標籤title // console.log(this); //this就表明當前點擊的標籤 // console.log(this.nextElementSibling) ;//下一個兄弟標籤 <div class="con hide">，而後把hide去了 // 再找到title下的兄弟標籤 this.nextElementSibling.classList.remove('hide'); //隱藏另外兩個con標籤 for (j = 0;j<ele_title.length;j++){ console.log(j); if(ele_title[j]!=this){ ele_title[j].nextElementSibling.classList.add('hide'); } } } } </script> </body> </html>
1、onload 事件： onload 屬性開發中 只給 body元素加.這個屬性的觸發 標誌着 頁面內容被加載完成.應用場景: 當有些事情咱們但願頁面加載完馬上執行,那麼可使用該事件屬性. 2、onsubmit 事件： 當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="submit">
<p>姓名<input type="text" name="user" id="user"></p>
<p>年齡<input type="text" name="age" id="age"></p>
<input type="submit" > 默認自帶一個提交事件 </form>
<script> var ele_form=document.getElementById("submit"); var ele_user=document.getElementById("user"); var ele_age=document.getElementById("age"); ele_form.onsubmit=function (event) { //給form表單添加onsubmit事件就至關於給input-submit標籤添加 var username=ele_user.value; var age=ele_age.value; alert(username); alert(age); // 兩種阻止默認事件發生的方式 // 方式1 return false // 方式2 // event.preventDefault() } </script>
</body>
</html>
Event 對象：Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.好比onkeydown,咱們想知道哪一個鍵被按下了 ，須要問下event對象的屬性，這裏就是KeyCode.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <input type="text" id="test">
10
11 <script>
12 var ele=document.getElementById("test") 13 ele.onkeydown=function (e) { 14 console.log(e.keyCode); 15
16 if (e.keyCode==13){ 17 alert(666) 18 } 19 } 20 </script>
21 </body>
22 </html>
四、事件傳播
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .c1{ 9 width: 200px; 10 height: 200px; 11 background-color: wheat; 12 } 13
14 .c2{ 15 width: 100px; 16 height: 100px; 17 background-color: royalblue; 18 } 19 </style>
20 </head>
21 <body>
22 <div class="c1">
23 <div class="c2"></div>
24 </div>
25
26 <script>
27 var ele1=document.getElementsByClassName("c1")[0]; 28 var ele2=document.getElementsByClassName("c2")[0]; 29
30 ele1.onclick=function () { 31 alert(123) 32 }; 33
34 ele2.onclick=function (event) { 35 alert(456); 36 event.stopPropagation() // 阻止事件傳播 37 } 38 </script>
39 </body>
40 </html>
五、onblur與onfocus事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="username" id="search">
<script> var ele=document.getElementById("search") ele.onfocus=function () { this.value="" }; ele.onblur=function () { if(this.value.trim()==""){ this.value="username" } } </script>
</body>
</html>
六、模態對話框練習
<!DOCTYPE html>
<html>
<!--bug : 1 添加的行不能用刪除按鈕, 2 輸入爲空時會添加行-->
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<style> .container { margin-top: 80px; } .row { margin-top: 10px; } .c1 { margin-left: 12px; margin-right: 15px; margin-top: -10px; } .c2 { margin-left: 15px; margin-right: 15px; } /*.c3 {*/
/*margin-left: 100px;*/
/*}*/ .c4 { margin-left: 50px; } .c5 { margin-top: -30px; } .c3 { width: 280px; height: 30px; } .c8 { margin-right: 50px; } .add { display: block; float: right; height: 36px; width: 72px; background-color: dodgerblue; color: white; border-radius: 5px; } .back { width: 100%; height: 2000px; border: 1px solid red; } .shade { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: darkgray; opacity: 0.5; } .model { position: fixed; top: 100px; left: 40%; width: 300px; height: 200px; background-color: white; } .hide { display: none; } #i8 {
margin-left: 61px; } .i9 { margin-left: 20px; } #i6 {
margin-top: 10px; } #btn {
background-color: dodgerblue; color: white; margin-left: 170px; border-radius: 3px; height: 28px; width: 65px; margin-top: 10px; } </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
</div>
<div class="row c1">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2"></label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="搜索">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
<input type="button" value="添加" class="add" id="ss"/>
<!--<button type="submit" class="pull-right" id="ss">添加</button>-->
</form>
</div>
<div class="row c2">
<table class="table table-striped table-bordered table-hover table-condensed">
<tbody id="i1">
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
<tr>
<th>1</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>2</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>3</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>4</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>5</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>6</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>7</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>8</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
<tr>
<th>9</th>
<td>Column heading</td>
<td>Column heading</td>
<td>Column heading</td>
<td class="c3">
<button type="submit" class="btn btn-success c4">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"> 編輯</span>
</button>
<button type="submit" class="btn btn-danger pull-right c8">
<span class="glyphicon glyphicon-remove" aria-hidden="true"> 刪除</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row c2">
<nav aria-label="Page navigation " class="pull-right c5">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="shade hide"></div>
<div class="model hide">
<form action="" id="i6">
<p id="i8">id <input type="text" id="i60"></p>
<p class="i9">Column <input type="text" id="i61"></p>
<p class="i9">Column <input type="text" id="i62"></p>
<p class="i9">Column <input type="text" id="i63"></p>
<input type="button" id="btn" value="提交">
</form>
</div>
<script> var eles = document.getElementsByClassName("c8"); for (var i = 0; i < eles.length; i++) { eles[i].onclick = function () { var ele_tr = this.parentElement.parentElement; var ele_tbody = this.parentElement.parentElement.parentElement; ele_tbody.removeChild(ele_tr); } } </script>
<script> var ele_adda = document.getElementById("ss"); var ele_mdoel = document.getElementsByClassName("model")[0]; var ele_shade = document.getElementsByClassName("shade")[0]; ele_adda.onclick = function () { ele_mdoel.classList.remove("hide"); ele_shade.classList.remove("hide") } var ele_sub = document.getElementById('btn'); ele_sub.onclick = function () { ele_mdoel.classList.add("hide"); ele_shade.classList.add("hide") var ele_a = document.createElement("tr"); var ele_1 = document.getElementById('i60'); var ele_2 = document.getElementById('i61'); var ele_3 = document.getElementById('i62'); var ele_4 = document.getElementById('i63'); var elee_1 = document.createElement("th"); elee_1.innerText = ele_1.value ele_a.appendChild(elee_1) var elee_2 = document.createElement("td"); elee_2.innerText = ele_2.value ele_a.appendChild(elee_2) var elee_3 = document.createElement("td"); elee_3.innerText = ele_3.value ele_a.appendChild(elee_3) var elee_4 = document.createElement("td"); elee_4.innerText = ele_4.value ele_a.appendChild(elee_4) var elee_5 = document.createElement("td"); elee_5.classList.add('c3'); var elee_6 = document.createElement("button"); elee_6.type = 'submit'; elee_6.classList.add('btn'); elee_6.classList.add('btn-success'); elee_6.classList.add('c4'); var elee_8 = document.createElement("span"); elee_8.classList.add('glyphicon'); elee_8.classList.add('glyphicon-pencil'); elee_8.innerHTML = ' 編輯' elee_6.appendChild(elee_8); elee_5.appendChild(elee_6); var elee_7 = document.createElement("button"); elee_7.type = 'submit'; elee_7.classList.add('btn') elee_7.classList.add('btn-danger') elee_7.classList.add('pull-right') elee_7.classList.add('c8') var elee_9 = document.createElement("span"); elee_9.classList.add('glyphicon'); elee_9.classList.add('glyphicon-remove'); elee_9.innerHTML = ' 刪除'; elee_7.appendChild(elee_9); elee_5.appendChild(elee_7); ele_a.appendChild(elee_5) var ele_tr = document.getElementById('i1'); ele_tr.appendChild(ele_a); } </script>
</body>
</html>
七、正反選實例練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="selectAll">全選</button>
<button class="reverse">反選</button>
<button class="cancel">取消</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
</table>
<script>
// 方式1 var ele_selectAll=document.getElementsByClassName("selectAll")[0]; var ele_reverse=document.getElementsByClassName("reverse")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var ele_input=document.getElementsByClassName("check"); ele_selectAll.onclick=function () { for(var i=0;i<ele_input.length;i++){ ele_input[i].checked="checked" } }; ele_cancel.onclick=function () { for(var i=0;i<ele_input.length;i++){ ele_input[i].checked="" } }; ele_reverse.onclick=function () { for(var i=0;i<ele_input.length;i++){ var ele=ele_input[i]; if(ele.checked){ ele.checked="" } else { ele.checked="checked" } } }; // 方式2 var eles_button=document.getElementsByTagName("button"); var ele_input=document.getElementsByClassName("check"); for (var i=0;i<eles_button.length;i++){ eles_button[i].onclick=function () { if(this.innerHTML=="全選"){ for(var i=0;i<ele_input.length;i++){ ele_input[i].checked="checked" } } else if (this.innerHTML=="取消"){ .... } else { .... } } } </script>
</body>
</html>
八、onchange 事件
域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<select name="pro" id="s1">
<option value="0">請輸入省份</option>
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="beijing">北京省</option>
</select>
<select name="city" id="c1">
<option value="0">請輸入城市</option>
</select>
</form>
<script> var data={"hebei":["保定","石家莊"],"henan":["鄭州","開封"],"beijing":["朝陽","昌平"]}; var select_province=document.getElementById("s1"); var select_city=document.getElementById("c1"); select_province.onchange=function () { // console.log(this.value); var province=this.value; var citys=data[province]; // console.log(citys); // 清空操做 // console.log(select_city.options); select_city.children.length=1; //保留一個 // select_city.children.length=0; //所有清空 // select_city.options.length=0; //等同上一個，所有清空 for(var i=0;i<citys.length;i++){ var ele_option=document.createElement("option"); // <option></option> ele_option.innerHTML=citys[i]; // <option>鄭州</option> ele_option.value=i+1; // <option value=1>鄭州</option> select_city.appendChild(ele_option) } } </script>
</body>
</html>
九、onmouseleave 與onmouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .title{ background-color: goldenrod; line-height: 30px; } .item{ line-height: 20px; background-color: #cccccc;
} .hide{ display: none; } </style>
</head>
<body>
<div class="box">
<div class="title">onmouseover</div>
<div class="con hide">
<div class="item"><a href="">111</a></div>
<div class="item"><a href="">222</a></div>
<div class="item"><a href="">333</a></div>
</div>
</div>
<script> var ele_title=document.getElementsByClassName("title")[0]; var ele_box=document.getElementsByClassName("box")[0]; ele_title.onmouseover=function () { this.nextElementSibling.classList.remove("hide") }; ele_box.onmouseleave=function () { ele_title.nextElementSibling.classList.add("hide") } // onmouseout 1.不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。 // onmouseleave 2.只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。 </script>
</body>
</html>
十、onselect 事件 ， 文本被選中。
十一、事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>Add</button>
<script> var eles_li=document.getElementsByTagName("li"); var ele_btn=document.getElementsByTagName("button")[0]; var ele_ul=document.getElementsByTagName("ul")[0]; // 添加li ele_btn.onclick=function () { var ele_li=document.createElement("li"); ele_li.innerHTML=444; ele_ul.appendChild(ele_li) }; // 這種方式作出來的效果-- 新添加的標籤不會alert文本 // 綁定事件 // for(var i=0;i<eles_li.length;i++){ // eles_li[i].onclick=function () { // alert(this.innerHTML) // } // } //解決方法 // 事件委派 --從變化的標籤開始往上找，直到找到不變化的標籤，看成綁定事件（addEventListener）的標籤（ele_ul） ele_ul.addEventListener("click",function (e) { console.log(e.target); // 標籤 console.log(e.target.tagName); // 標籤名稱 if(e.target.tagName=="LI"){ //篩選想操做的標籤 console.log("OK") } }) </script>
</body>
</html>
十二、ondblclick 事件 當用戶雙擊某個對象時調用的事件句柄。
1三、
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
1四、
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開
2、實例練習
1 左側菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .left{ width: 20%; height: 500px; float: left; background-color: wheat; } .right{ float: left; width: 80%; height: 500px; background-color: lightgray; } .title{ text-align: center; line-height: 40px; background-color: #0e90d2; color: white; } .item{ padding: 10px; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="left"> <div class="item"> <div class="title">菜單一</div> <ul class="con"> <li>111</li> <li>111</li> <li>111</li> </ul> </div> <div class="item"> <div class="title">菜單二</div> <ul class="con hide"> <li>222</li> <li>222</li> <li>222</li> </ul> </div> <div class="item"> <div class="title">菜單三</div> <ul class="con hide"> <li>333</li> <li>333</li> <li>333</li> </ul> </div> </div> <div class="right"></div> </div> <script> var eles_title=document.getElementsByClassName("title"); for (var i=0;i<eles_title.length;i++){ eles_title[i].onclick=function(){ this.nextElementSibling.classList.remove("hide"); for(var j=0;j<eles_title.length;j++){ if (eles_title[j]!=this){ eles_title[j].nextElementSibling.classList.add("hide") } } } } </script> </body> </html>
2 搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function Focus(){ var input=document.getElementById("ID1"); if (input.value=="請輸入用戶名"){ input.value=""; } } function Blurs(){ var ele=document.getElementById("ID1"); var val=ele.value; if(!val.trim()){ ele.value="請輸入用戶名"; } } </script> </head> <body> <input id="ID1" type="text" value="請輸入用戶名" onblur="Blurs()" onfocus="Focus()"> </body> </html>
3 模態對話框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: white; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: grey; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: wheat; } </style> </head> <body> <div class="back"> <input class="c" type="button" value="click"> </div> <div class="shade hide handles"></div> <div class="models hide handles"> <input class="c" type="button" value="cancel"> </div> <script> var eles=document.getElementsByClassName("c"); var handles=document.getElementsByClassName("handles"); for(var i=0;i<eles.length;i++){ eles[i].onclick=function(){ if(this.value=="click"){ for(var j=0;j<handles.length;j++){ handles[j].classList.remove("hide"); } } else { for(var j=0;j<handles.length;j++){ handles[j].classList.add("hide"); } } } } </script> </body> </html>
4 表格案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="select_all">全選</button> <button class="select_reverse">反選</button> <button class="cancel">取消</button> <hr> <table class="server_table" border="2px" cellspacing="2px"> <tr> <td><input type="checkbox" class="item"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>444</td> <td>444</td> <td>444</td> </tr> </table> <script> /* var ele_all=document.getElementsByClassName("select_all")[0]; var ele_reverse=document.getElementsByClassName("select_reverse")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var input_arr=document.getElementsByClassName("item"); ele_all.onclick=function(){ for(var i=0;i<input_arr.length;i++){ console.log(input_arr[i]); var input=input_arr[i]; input.checked=true; } }; ele_cancel.onclick=function(){ for(var i=0;i<input_arr.length;i++){ console.log(input_arr[i]); var input=input_arr[i]; input.checked=false; } }; ele_reverse.onclick=function(){ for(var i=0;i<input_arr.length;i++){ console.log(input_arr[i]); var input=input_arr[i]; if(input.checked){ input.checked=false; } else{ input.checked=true; } } }; */ var input_arr=document.getElementsByClassName("item"); var button_arr=document.getElementsByTagName("button"); for(var i=0;i<button_arr.length;i++){ button_arr[i].onclick=function(){ for (var j=0;j<input_arr.length;j++){ var inp=input_arr[j] if(this.innerText=="全選"){ console.log("ok"); inp.checked=true; } else if(this.innerText=="取消"){ inp.checked=false; } else { if(inp.checked){ inp.checked=false; }else { inp.checked=true; } } } } } </script> </body> </html>
5 select移動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ margin: 0 auto; background-color: darkgray; width: 80%; height: 600px;margin-top: 30px; word-spacing: -5px; } #left{ display: inline-block; width: 100px ; height: 140px; background-color: wheat; text-align: center; } #choice{ display: inline-block; height: 140px; background-color: darkolivegreen; vertical-align: top; padding:0 5px; } #choice button{ margin-top: 20px; } #right{ display: inline-block; width: 100px ; height: 140px; background-color: wheat; text-align: center; line-height: 140px; } </style> </head> <body> <div class="outer"> <select multiple="multiple" size="5" id="left"> <option>紅樓夢</option> <option>西遊記</option> <option>水滸傳</option> <option>JinPingMei</option> <option>三國演義</option> </select> <span id="choice"> <button id="choose_move"> > </button><br> <button id="all_move"> >> </button> </span> <select multiple="multiple" size="10" id="right"> <option>放風箏的人</option> </select> </div> <script> var choose_move=document.getElementById("choose_move"); var all_move=document.getElementById("all_move"); var right=document.getElementById("right"); var left=document.getElementById("left"); var options=left.options; choose_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; if(option.selected==true){ // var news=option.cloneNode(true); // console.log(news); right.appendChild(option); i--; } } }; all_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; right.appendChild(option); i--; }; }; /* var buttons=document.getElementsByTagName("button"); for(var i=0;i<buttons.length;i++) { buttons[i].onclick = function () { for (var i = 0; i < options.length; i++) { var option = options[i]; if (this.innerText == ">") { if (option.selected == true) { // var news=option.cloneNode(true); // console.log(news); right.appendChild(option); i--; } } else { right.appendChild(option); i--; } } }; } */ </script> </body> </html>
6 二級聯動
<select id="province"> <option>請選擇省:</option> </select> <select id="city"> <option>請選擇市:</option> </select> <script> data={"河北省":["廊坊","邯鄲"],"北京":["朝陽區","海淀區"]}; var p=document.getElementById("province"); var c=document.getElementById("city"); for(var i in data){ var option_pro=document.createElement("option"); option_pro.innerHTML=i; p.appendChild(option_pro); } p.onchange=function(){ pro=(this.options[this.selectedIndex]).innerHTML; citys=data[pro]; c.options.length=0; for (var i in citys){ var option_city=document.createElement("option"); option_city.innerHTML=citys[i]; c.appendChild(option_city); } } </script>
7 跑馬燈與tab切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} body{ font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif; } h3{ text-align: center; color:darkcyan; margin-top: 30px; letter-spacing: 5px; } .box{ width: 1000px; margin:50px auto 0px; } #title{ line-height: 40px; background-color: rgb(247,247,247); font-size: 16px; font-weight: bold; color: rgb(102,102,102); } #title span{ float: left; width: 166px; text-align: center; } #title span:hover{ /*color: black;*/ cursor: pointer; } #content{ margin-top: 20px; } #content li{ width: 1050px; display: none; background-color: rgb(247,247,247); } #content li div{ width: 156px; margin-right: 14px; float: left; text-align: center; } #content li div a{ font-size: 14px; color: black; line-height: 14px; /* float: left;*/ display: inline-block; margin-top: 10px; } #content li a:hover{ color: #B70606; } #content li div span{ font-size: 16px; line-height: 16px; /*float: left;*/ display: block; color: rgb(102,102,102); margin-top: 10px; } #content img{ float: left; width: 155px; height: 250px; } #title .select{ background-color: #2459a2; color: white; border-radius: 10%; } #content .show{ display: block; } .show span{ color: red!important; font-size: 30px; } </style> </head> <body> <h3 id="wel">京東商城歡迎您</h3> <!-- direction="right up down left" --> <!-- behavior：滾動方式(包括3個值：scroll、slide、alternate) --> <!-- 說明：scroll：循環滾動，默認效果；slide：只滾動一次就中止；alternate：來回交替進行滾動。 --> <!-- scrollamount="5" 滾動速度 --> <marquee behavior="scroll" direction="right">歡迎您苑昊先生</marquee> <script> function test(){ var mywel = document.getElementById("wel"); var content = mywel.innerText; var f_content = content.charAt(0); var l_content = content.substring(1,content.length); var new_content = l_content + f_content; mywel.innerText = new_content; } // setInterval("test();", 500); </script> <div class="box"> <p id="title"> <span class="select">家用電器</span> <span>傢俱</span> <span>汽車</span> <span>食品</span> <span>女鞋</span> <span>醫療保健</span> </p> <ul id="content"> <li class="show"> <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div> <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div> <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div> <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能電視"><a href="#">三星智能電視</a><span>價格:8999</span></div> <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="淨水器"><a href="#">淨水器</a><span>價格:1300</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣淨化器"><a href="#">空氣淨化器</a><span>價格:5300</span></div> </li> <li> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div> </li> <li> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div> </li> <li> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div> </li> <li> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div> </li> <li> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div> </li> </ul> </div> <script> var title=document.getElementById('title'); var content=document.getElementById('content'); var category=title.getElementsByTagName('span'); var item=content.getElementsByTagName('li'); for (var i = 0; i < category.length; i++) { category[i].index=i; category[i].onclick=function(){ for (var j = 0; j < category.length; j++) { category[j].className=''; item[j].className=''; } this.className='select'; item[this.index].className='show'; } } </script> </body> </html>
3、js的做用域
做用域是JavaScript最重要的概念之一，想要學好JavaScript就須要理解JavaScript做用域和做用域鏈的工做原理。
任何程序設計語言都有做用域的概念，簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期。在JavaScript中，變量的做用域有全局做用域和局部做用域兩種。
1. 全局做用域(Global Scope)
在代碼中任何地方都能訪問到的對象擁有全局做用域，通常來講一下幾種情形擁有全局做用域：
(1)最外層函數和在最外層函數外面定義的變量擁有全局做用域
var name="yuan"; function foo(){ var age=23; function inner(){ console.log(age); } inner(); } console.log(name); // yuan //console.log(age); // Uncaught ReferenceError: age is not defined foo(); // 23 inner(); // Uncaught ReferenceError: inner is not defined
(2)全部末定義直接賦值的變量自動聲明爲擁有全局做用域，例如：
var name="yuan"; function foo(){ age=23; var sex="male" } foo(); console.log(age); // 23 console.log(sex); // sex is not defined
變量blog擁有全局做用域，而sex在函數外部沒法訪問到。
2. 局部做用域(Local Scope)
和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部，全部在一些地方也會看到有人把這種做用域成爲函數做用域.
如示例1中的age與inner都只有局部做用域。（js中if、for沒有本身的做用域）
3.做用域鏈(Scope Chain)
在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。
1.示例演示
//-----**********************例1********************************* var s=12; function f(){ console.log(s); var s=12; // if s=12 console.log(s) } f(); //-----**********************例2********************************* var s=10; function foo(){ console.log(s); var s=5; console.log(s); function s(){console.log("ok")}// 函數的定於或聲明是在詞法分析時完成的,執行時已再也不有任何操做 console.log(s); } foo(); //-----***********************例3******************************** function bar(age) { console.log(age); var age = 99; var sex= 'male'; console.log(age); function age() { alert(123) }; console.log(age); return 100; } result=bar(5); //-----********************************************************
2.結果分析
接下來咱們就以最複雜的例3來分析整個過程。
function bar(age) { console.log(age); var age = 99; var sex="male"; console.log(age); function age(){ alert(123); } ; console.log(age); return 100; } result=bar(5); 一 詞法分析過程(涉及參數，局部變量聲明，函數聲明表達式)： 1-1 、分析參數，有一個參數，造成一個 AO.age=undefine; 1-2 、接收參數 AO.age=5; 1-3 、分析變量聲明，有一個 var age, 發現 AO 上面有一個 AO.age ，則不作任何處理 1-4 、分析變量聲明，有一個 var sex，造成一個 AO.sex=undefine; 1-5 、分析函數聲明，有一個 function age(){} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){}; 二 執行過程： 2-1 、執行第一個 console.log(age) 時，當前的 AO.age 是一個函數，因此輸出的一個函數 2-2 、這句 var age=99; 是對不 AO.age 的屬性賦值， AO.age=99 ，因此在第二個輸出的age是 99; 2-3 、同理第三個輸出的是 99, 由於中間沒有改變 age 值的語句了。 注意：執行階段： function age(){ alert(123) } ; 不進行任何操做，將執行語句複製給age這部操做是在詞法分析時，即運行前完成的。
相關文章
- 1. jsDOM對象 document
- 2. 使用 ava 和 jsdom 作前端測試
- 3. 前端開發之面向對象
- 4. 重學前端之（6）內置對象
- 5. 前端學習之JavaScript面向對象
- 6. 前端面向對象
- 7. 【前端】JavaScript內建對象
- 8. 前端建立對象？
- 9. web前端----JavaScript對象
- 10. 前端基礎進階（十）：面向對象實戰之封裝拖拽對象
- 更多相關文章...
- • ADO Parameter 對象 - ADO 教程
- • ADO Property 對象 - ADO 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jsDOM對象 document
- 2. 使用 ava 和 jsdom 作前端測試
- 3. 前端開發之面向對象
- 4. 重學前端之（6）內置對象
- 5. 前端學習之JavaScript面向對象
- 6. 前端面向對象
- 7. 【前端】JavaScript內建對象
- 8. 前端建立對象？
- 9. web前端----JavaScript對象
- 10. 前端基礎進階（十）：面向對象實戰之封裝拖拽對象