當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript学习笔记（3）

發布時間：2025/3/20 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript学习笔记（3）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- Web APIs
- 什么是DOM？
- DOM樹
- 如何獲取網頁頁面元素？
- - 根據id獲取元素 getElementById
  - 根據標簽名獲取元素 getElementsByTagName
  - 根據類名獲取某些元素集合 getElementsByClassName 通用選擇器querySelector querySelectorAll（既能選擇id，也能選擇類和通用標簽）（加#表示選擇id，加.表示選擇類）
- 獲取特殊元素body（document.body）html（document.documentElement）
- 事件概述（事件三要素：事件源事件類型事件處理程序）
- 執行事件的步驟常見鼠標事件
- 操作元素
- - 改變元素內容 innerText和innerHtml
  - innerText和innerHtml的區別（innerHtml顯示時支持html語法，讀取元素內容時能保留html代碼）（所以以后一般只用innerHtml就好了）
- 通過注冊事件來改變元素屬性（劉德華與張學友圖片切換）
- 案例：根據系統不同時間段顯示不同問候語和圖片
- 表單元素的屬性操作（表單操作比較特殊，跟普通元素不同）type value checked selected disabled（this）
- 案例：仿京東顯示密碼
- 修改元素樣式屬性
- - 行內樣式與內嵌樣式（行內樣式比內嵌樣式權重高，所以行內樣式會覆蓋掉內嵌樣式）
  - 行內樣式操作 element.style
- 浮動二維碼點擊叉號?隱藏案例 style.display
- 案例：通過操作位置屬性來實現循環精靈圖（在字符串中引用變量的操作方法：lis[i].style.backgroundPosition = '0 -' + index + 'px';）
- 案例：文本框得到光標和失去光標的不同顯示（onfocus、onblur）（input、value）
- 通過類名樣式批量修改樣式操作來簡化代碼 element.className
- - 如果要增加或者刪除類，可以用 this.className += ' change';嗎？
- 案例：仿新浪注冊密碼輸入框（onfocus/onblur結合類名樣式判斷密碼是否合規）
- 操作元素總結
- 案例：頁面開關燈
- 案例：利用for循環實現多按鈕中點擊某個按鈕的變色（排他思想，先清除其他元素樣式，再設置自己的）
- 案例：實現頁面換膚（換背景）效果（利用循環注冊點擊事件）（querySelector鏈式獲取元素）
- 案例：新浪財經鼠標經過某行實現變色效果（表格隔行變色效果）（onmouseover、onmouseout）
- 復選框的全選按鈕和取消全選
- 獲取元素自有屬性和自定義屬性（getAttribute）
- 通用修改元素屬性值方式setAttribute（以后就用這個修改，主要用來設置自定義屬性，元素自帶屬性還是用老方法設置）移除屬性值removeAttribute

Web APIs

https://developer.mozilla.org/zh-CN/docs/Web/API

什么是DOM？

DOM樹

如何獲取網頁頁面元素？

根據id獲取元素 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> </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>

根據標簽名獲取元素 getElementsByTagName

獲取父元素中的子元素，可以給父元素指定id，用getElementById獲取父元素，再用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>知否知否，應是等你好久12</li><li>知否知否，應是等你好久13</li><li>知否知否，應是等你好久14</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>

根據類名獲取某些元素集合 getElementsByClassName 通用選擇器querySelector querySelectorAll（既能選擇id，也能選擇類和通用標簽）（加#表示選擇id，加.表示選擇類）

<!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 #navvar 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>

獲取特殊元素body（document.body）html（document.documentElement）

事件概述（事件三要素：事件源事件類型事件處理程序）

<!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>

執行事件的步驟常見鼠標事件

<!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>123</div><script>// 執行事件步驟// 點擊div 控制臺輸出我被選中了// 1. 獲取事件源var div = document.querySelector('div');// 2.綁定事件注冊事件// div.onclick // 3.添加事件處理程序 div.onclick = function() {console.log('我被選中了');}</script> </body></html>

操作元素

改變元素內容 innerText和innerHtml

點擊按鈕顯示時間

innerText和innerHtml的區別（innerHtml顯示時支持html語法，讀取元素內容時能保留html代碼）（所以以后一般只用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>

通過注冊事件來改變元素屬性（劉德華與張學友圖片切換）

<!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 = '張學友思密達';img.alt = '張學友因為太帥導致無法顯示'}ldh.onclick = function () {img.src = 'images/ldh.jpg';img.title = '劉德華';img.alt = '劉德華因為太帥導致無法顯示'}</script> </body></html>

案例：根據系統不同時間段顯示不同問候語和圖片

<!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><img src="images/s.gif" alt=""><div>上午好</div><script>// 根據系統不同時間來判斷，所以需要用到日期內置對象// 利用多分支語句來設置不同的圖片// 需要一個圖片，并且根據時間修改圖片，就需要用到操作元素src屬性// 需要一個div元素，顯示不同問候語，修改元素內容即可// 1.獲取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2. 得到當前的小時數var date = new Date();var h = date.getHours();// 3. 判斷小時數改變圖片和文字信息if (h < 12) {img.src = 'images/s.gif';img.alt = '上午好圖片掛了！'div.innerHTML = '親，上午好，好好寫代碼';} else if (h < 18) {img.src = 'images/x.gif';img.alt = '下午好圖片掛了！'div.innerHTML = '親，下午好，好好寫代碼';} else {img.src = 'images/w.gif';img.alt = '晚上好圖片掛了！'div.innerHTML = '親，晚上好，好好寫代碼';}</script> </body></html>

表單元素的屬性操作（表單操作比較特殊，跟普通元素不同）type value checked selected disabled（this）

<!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>

案例：仿京東顯示密碼

<!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>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style> </head><body><div class="box"><label for=""><img src="images/close.png" alt="圖片掛了" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 1. 獲取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2. 注冊事件處理程序var flag = 0;eye.onclick = function () {// 點擊一次之后， flag 一定要變化if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1; // 賦值操作} else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</script> </body></html>

修改元素樣式屬性

行內樣式與內嵌樣式（行內樣式比內嵌樣式權重高，所以行內樣式會覆蓋掉內嵌樣式）

行內樣式操作 element.style

浮動二維碼點擊叉號?隱藏案例 style.display

<!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>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;/* display: block; */}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style> </head><body><div class="box">淘寶二維碼<img src="QQ圖片20210224092303.png" alt="圖片太帥無法顯示"><i class="close-btn">×</i></div><script>// 1. 獲取元素 var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注冊事件程序處理btn.onclick = function () {box.style.display = 'none';}</script> </body></html>

案例：通過操作位置屬性來實現循環精靈圖（在字符串中引用變量的操作方法：lis[i].style.backgroundPosition = ‘0 -’ + index + ‘px’;）

<!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;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;/* background: url(images/sprite.png) no-repeat; */background: url(蜥蜴女仆.gif) no-repeat;}</style> </head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>// 1. 獲取元素所有的小li var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {// 讓索引號乘以 44 就是每個li 的背景y坐標 index就是我們的y坐標var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script> </body></html>

案例：文本框得到光標和失去光標的不同顯示（onfocus、onblur）（input、value）

<!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>input {color: #999;}</style> </head><body><input type="text" value="手機"><script>// 1.獲取元素var text = document.querySelector('input');// 2.注冊事件獲得焦點事件 onfocus text.onfocus = function () {// console.log('得到了焦點');if (this.value === '手機') {this.value = '';}// 獲得焦點需要把文本框里面的文字顏色變黑this.style.color = '#333';}// 3. 注冊事件失去焦點事件 onblurtext.onblur = function () {// console.log('失去了焦點');if (this.value === '') {this.value = '手機';}// 失去焦點需要把文本框里面的文字顏色變淺色this.style.color = '#999';}</script></body></html>

通過類名樣式批量修改樣式操作來簡化代碼 element.className

如果要增加或者刪除類，可以用 this.className += ’ change’;嗎？

不行的，這樣會導致連續點擊后，change類越來越多

想刪掉類名，用 this.className -= ’ change’;也不行，因為字符串沒有-=這種語法

案例：仿新浪注冊密碼輸入框（onfocus/onblur結合類名樣式判斷密碼是否合規）

<!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: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images/mess.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images/wrong.png);}.right {color: green;background-image: url(images/right.png);}</style> </head><body><div class="register"><input type="password" class="ipt"><p class="message">請輸入6~16位密碼</p></div><script>// 首先判斷的事件是表單失去焦點 onblur// 如果輸入正確則提示正確的信息顏色為綠色小圖標變化// 如果輸入不是6到16位，則提示錯誤信息顏色為紅色小圖標變化// 因為里面變化樣式較多，我們采取className修改樣式// 1.獲取元素var ipt = document.querySelector('.ipt');var message = document.querySelector('.message');//2. 注冊事件失去焦點ipt.onblur = function () {if (this.value.length === 0) {message.className = 'message';message.innerHTML = '請輸入6~16位密碼';} else if ((this.value.length > 0 && this.value.length < 6) || this.value.length > 16) {// 根據表單里面值的長度 ipt.value.length// console.log('錯誤');message.className = 'message wrong';message.innerHTML = '您輸入的位數不對要求6~16位';} else {message.className = 'message right';message.innerHTML = '您輸入的正確';}}</script> </body></html>

操作元素總結

案例：頁面開關燈

<!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>var btn = document.getElementById('btn');var flag = 0;btn.onclick = function () {if (flag == 0) {document.body.style.backgroundColor = 'black';flag = 1;} else {document.body.style.backgroundColor = '#fff';flag = 0;}}</script> </body></html>

案例：利用for循環實現多按鈕中點擊某個按鈕的變色（排他思想，先清除其他元素樣式，再設置自己的）

<!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>

案例：實現頁面換膚（換背景）效果（利用循環注冊點擊事件）（querySelector鏈式獲取元素）

<!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" alt="第一張圖片"></li><li><img src="images/2.jpg" alt="第二張圖片"></li><li><img src="images/3.jpg" alt="第三張圖片"></li><li><img src="images/4.jpg" alt="第四張圖片"></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>

案例：新浪財經鼠標經過某行實現變色效果（表格隔行變色效果）（onmouseover、onmouseout）

<!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. 鼠標經過事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠標離開事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script> </body></html>

復選框的全選按鈕和取消全選

<!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>

獲取元素自有屬性和自定義屬性（getAttribute）

<!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 屬性的意思我們程序員自己添加的屬性我們稱為自定義屬性 indexconsole.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>

通用修改元素屬性值方式setAttribute（以后就用這個修改，主要用來設置自定義屬性，元素自帶屬性還是用老方法設置）移除屬性值removeAttribute

代碼見上

總結

以上是生活随笔為你收集整理的JavaScript学习笔记（3）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JavaScript学习笔记（2）
下一篇： gradle idea java ssm