js 之 webapi 程式設計
阿新 • • 發佈：2021-07-21
1：獲取元素
1：getElementById <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>View Code</head> <body> <div id="time">2019-9-9</div> <script> // 1. 因為我們文件頁面從上往下載入，所以先得有標籤 所以我們script寫到標籤的下面 // 2. get 獲得 element 元素 by 通過 駝峰命名法 // 3. 引數 id是大小寫敏感的字串 // 4. 返回的是一個元素物件 var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); // 5. console.dir 列印我們返回的元素物件 更好的檢視裡面的屬性和方法 console.dir(timer); </script> </body> </html> 2：getElementsByTagName <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>知否知否，應是等你好久11</li> <li>知否知否，應是等你好久11</li> <li>知否知否，應是等你好久11</li> <li>知否知否，應是等你好久11</li> </ul> <ol id="ol"> <li>生僻字</li> <li>生僻字</li> <li>生僻字</li> <li>生僻字</li> </ol> <script> // 1.返回的是 獲取過來元素物件的集合 以偽陣列的形式儲存的 var lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); // 2. 我們想要依次列印裡面的元素物件我們可以採取遍歷的方式 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } // 3. 如果頁面中只有一個li 返回的還是偽陣列的形式 // 4. 如果頁面中沒有這個元素 返回的是空的偽陣列的形式 // 5. element.getElementsByTagName('標籤名'); 父元素必須是指定的單個元素 // var ol = document.getElementsByTagName('ol'); // [ol] // console.log(ol[0].getElementsByTagName('li')); var ol = document.getElementById('ol'); console.log(ol.getElementsByTagName('li')); </script> </body> </html> 3：H5 新增獲取元素的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首頁</li> <li>產品</li> </ul> </div> <script> // 1. getElementsByClassName 根據類名獲得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); // 2. querySelector 返回指定選擇器的第一個元素物件 切記 裡面的選擇器需要加符號 .box #nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定選擇器的所有元素物件集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis); </script> </body> </html>
2：事件
1：事件三要素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="btn">唐伯虎</button> <script> // 點選一個按鈕，彈出對話方塊 // 1. 事件是有三部分組成 事件源 事件型別 事件處理程式 我們也稱為事件三要素 //(1) 事件源 事件被觸發的物件 誰 按鈕 var btn = document.getElementById('btn'); //(2) 事件型別 如何觸發 什麼事件 比如滑鼠點選(onclick) 還是滑鼠經過 還是鍵盤按下 //(3) 事件處理程式 通過一個函式賦值的方式 完成 btn.onclick = function() { alert('點秋香'); } </script> </body> </html> 2：事件的三要素 <body> <div>123</div> <script> // 執行事件步驟 // 點選div 控制檯輸出 我被選中了 // 1. 獲取事件源 var div = document.querySelector('div'); // 2.繫結事件 註冊事件 // div.onclick // 3.新增事件處理程式 div.onclick = function() { console.log('我被選中了'); } </script> </body>View Code
3：操作元素
1：改變元素的內容 <body> <div>123</div> <script> // 執行事件步驟 // 點選div 控制檯輸出 我被選中了 // 1. 獲取事件源 var div = document.querySelector('div'); // 2.繫結事件 註冊事件 // div.onclick // 3.新增事件處理程式 div.onclick = function() { console.log('我被選中了'); } </script> </body> 2：innerText 和 innerHTML 的區別 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div></div> <p> 我是文字 <span>123</span> </p> <script> // innerText 和 innerHTML的區別 // 1. innerText 不識別html標籤 非標準 去除空格和換行 var div = document.querySelector('div'); // div.innerText = '<strong>今天是：</strong> 2019'; // 2. innerHTML 識別html標籤 W3C標準 保留空格和換行的 div.innerHTML = '<strong>今天是：</strong> 2019'; // 這兩個屬性是可讀寫的 可以獲取元素裡面的內容 var p = document.querySelector('p'); console.log(p.innerText); console.log(p.innerHTML); </script> </body> </html> 3：修改元素的屬性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { width: 300px; } </style> </head> <body> <button id="ldh">劉德華</button> <button id="zxy">張學友</button> <br> <img src="images/ldh.jpg" alt="" title="劉德華"> <script> // 修改元素屬性 src // 1. 獲取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img'); // 2. 註冊事件 處理程式 zxy.onclick = function() { img.src = 'images/zxy.jpg'; img.title = '張學友思密達'; } ldh.onclick = function() { img.src = 'images/ldh.jpg'; img.title = '劉德華'; } </script> </body> </html> 4：表單屬性設定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>按鈕</button> <input type="text" value="輸入內容"> <script> // 1. 獲取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); // 2. 註冊事件 處理程式 btn.onclick = function() { // input.innerHTML = '點選了'; 這個是 普通盒子 比如 div 標籤裡面的內容 // 表單裡面的值 文字內容是通過 value 來修改的 input.value = '被點選了'; // 如果想要某個表單被禁用 不能再點選 disabled 我們想要這個按鈕 button禁用 // btn.disabled = true; this.disabled = true; // this 指向的是事件函式的呼叫者 btn } </script> </body> </html> 6：改變樣式屬性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script> // 1. 獲取元素 var div = document.querySelector('div'); // 2. 註冊事件 處理程式 div.onclick = function() { // div.style裡面的屬性 採取駝峰命名法 this.style.backgroundColor = 'purple'; this.style.width = '250px'; } </script> </body> </html>View Code
4: 排他思想
1：排他思想 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <button>按鈕5</button> <script> // 1. 獲取所有按鈕元素 var btns = document.getElementsByTagName('button'); // btns得到的是偽陣列 裡面的每一個元素 btns[i] for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // (1) 我們先把所有的按鈕背景顏色去掉 幹掉所有人 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } // (2) 然後才讓當前的元素背景顏色為pink 留下我自己 this.style.backgroundColor = 'pink'; } } //2. 首先先排除其他人，然後才設定自己的樣式 這種排除其他人的思想我們成為排他思想 </script> </body> </html> 2：百度換膚效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: url(images/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style> </head> <body> <ul class="baidu"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> </ul> <script> // 1. 獲取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img'); // console.log(imgs); // 2. 迴圈註冊事件 for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { // this.src 就是我們點選圖片的路徑 images/2.jpg // console.log(this.src); // 把這個路徑 this.src 給body 就可以了 document.body.style.backgroundImage = 'url(' + this.src + ')'; } } </script> </body> </html> 3：表單隔行變色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: pink; } </style> </head> <body> <table> <thead> <tr> <th>程式碼</th> <th>名稱</th> <th>最新公佈淨值</th> <th>累計淨值</th> <th>前單位淨值</th> <th>淨值增長率</th> </tr> </thead> <tbody> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>農銀金穗3個月定期開放債券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> </tbody> </table> <script> // 1.獲取元素 獲取的是 tbody 裡面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); // 2. 利用迴圈繫結註冊事件 for (var i = 0; i < trs.length; i++) { // 3. 滑鼠經過事件 onmouseover trs[i].onmouseover = function() { // console.log(11); this.className = 'bg'; } // 4. 滑鼠離開事件 onmouseout trs[i].onmouseout = function() { this.className = ''; } } </script> </body> </html> 4：全選反選 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>商品</th> <th>價錢</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> </div> <script> // 1. 全選和取消全選做法： 讓下面所有複選框的checked屬性（選中狀態） 跟隨 全選按鈕即可 // 獲取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全選按鈕 var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的複選框 // 註冊事件 j_cbAll.onclick = function() { // this.checked 它可以得到當前複選框的選中狀態如果是true 就是選中，如果是false 就是未選中 console.log(this.checked); for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = this.checked; } } // 2. 下面複選框需要全部選中， 上面全選才能選中做法： 給下面所有複選框繫結點選事件，每次點選，都要迴圈檢視下面所有的複選框是否有沒選中的，如果有一個沒選中的， 上面全選就不選中。 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].onclick = function() { // flag 控制全選按鈕是否選中 var flag = true; // 每次點選下面的複選框都要迴圈檢查者4個小按鈕是否全被選中 for (var i = 0; i < j_tbs.length; i++) { if (!j_tbs[i].checked) { flag = false; break; // 退出for迴圈 這樣可以提高執行效率 因為只要有一個沒有選中，剩下的就無需迴圈判斷了 } } j_cbAll.checked = flag; } } </script> </body> </html>View Code
5：元素的屬相操作
1： 元素的屬性操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 獲取元素的屬性值 // (1) element.屬性 console.log(div.id); //(2) element.getAttribute('屬性') get得到獲取 attribute 屬性的意思 我們程式設計師自己新增的屬性我們稱為自定義屬性 index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); // 2. 設定元素屬性值 // (1) element.屬性= '值' div.id = 'test'; div.className = 'navs'; // (2) element.setAttribute('屬性', '值'); 主要針對於自定義屬性 div.setAttribute('index', 2); div.setAttribute('class', 'footer'); // class 特殊 這裡面寫的就是class 不是className // 3 移除屬性 removeAttribute(屬性) div.removeAttribute('index'); </script> </body> </html> 2：H5 中的自定義屬性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribute('data-time', 20); console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-list-name')); // h5新增的獲取自定義屬性的方法 它只能獲取data-開頭的 // dataset 是一個集合裡面存放了所有以data開頭的自定義屬性 console.log(div.dataset); console.log(div.dataset.index); console.log(div.dataset['index']); // 如果自定義屬性裡面有多個-連結的單詞，我們獲取的時候採取 駝峰命名法 console.log(div.dataset.listName); console.log(div.dataset['listName']); </script> </body> </html>View Code
6：節點
1：父節點 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 節點的優點 --> <div>我是div</div> <span>我是span</span> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <div class="demo"> <div class="box"> <span class="erweima">×</span> </div> </div> <script> // 1. 父節點 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就返回為 null console.log(erweima.parentNode); </script> </body> </html> 2： 子節點操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 節點的優點 --> <div>我是div</div> <span>我是span</span> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <ol> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ol> <div class="demo"> <div class="box"> <span class="erweima">×</span> </div> </div> <script> // DOM 提供的方法（API）獲取 var ul = document.querySelector('ul'); var lis = ul.querySelectorAll('li'); // 1. 子節點 childNodes 所有的子節點 包含 元素節點 文字節點等等 console.log(ul.childNodes); console.log(ul.childNodes[0].nodeType); console.log(ul.childNodes[1].nodeType); // 2. children 獲取所有的子元素節點 也是我們實際開發常用的 console.log(ul.children); </script> </body> </html> 3：第一個元素節點和最後一個元素節點 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ol> <li>我是li1</li> <li>我是li2</li> <li>我是li3</li> <li>我是li4</li> <li>我是li5</li> </ol> <script> var ol = document.querySelector('ol'); // 1. firstChild 第一個子節點 不管是文字節點還是元素節點 console.log(ol.firstChild); console.log(ol.lastChild); // 2. firstElementChild 返回第一個子元素節點 ie9才支援 console.log(ol.firstElementChild); console.log(ol.lastElementChild); // 3. 實際開發的寫法 既沒有相容性問題又返回第一個子元素 console.log(ol.children[0]); console.log(ol.children[ol.children.length - 1]); </script> </body> </html> 4： 兄弟節點 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div>我是div</div> <span>我是span</span> <script> var div = document.querySelector('div'); // 1.nextSibling 下一個兄弟節點 包含元素節點或者 文字節點等等 console.log(div.nextSibling); console.log(div.previousSibling); // 2. nextElementSibling 得到下一個兄弟元素節點 console.log(div.nextElementSibling); console.log(div.previousElementSibling); </script> </body> </html>、View Code