[TOC]
# **屬性知識小結**
>[info] 1、標簽屬性：
> 語法：屬性名="屬性值"
> 使用DOM對象操作：
> 獲取元素（標簽）屬性值：對象名.屬性名
> 設置元素（標簽）屬性值：對象名.屬性名="屬性值"
>
> 2、DOM對象的屬性
> 獲取DOM對象屬性值：對象名.屬性名
> 設置DOM對象屬性值：對象名.屬性名="屬性值"
>
> 3、樣式屬性：
> 語法，{屬性名：屬性值}；
> 使用DOM對象操作：
> 獲取元素（樣式）屬性值：對象名.style.屬性名
> 設置元素（樣式）屬性值：對象名.style.屬性名="屬性值"
>
> 通過DOM元素設置樣式屬性的時候，樣式屬性是行內樣式，優先級最高。在設置樣式屬性的時候，寬、高、位置樣式的值是字符串類型，要加上單位 px
# 非表單元素的屬性（掌握）
  所謂表單元素，就是可以放在form表單標簽中存儲用戶輸入的數據的標簽，如 input、select標簽，而非表單元素就是只能展示數據，不能存儲用戶輸入的數據 的標簽，如 a、img標簽。
  常用的非表單元素屬性有 href、title、id、src、className，使用DOM對象操作屬性，常用操作有 使用元素獲取屬性值，以及使用元素修改屬性值。以下以a、img標簽為例
html和css代碼
```
<!-- html代碼 -->
<a id="link" href="http://www.baidu.com" title="百度鏈接">百度</a>
<img id="girl" src="images/a.jpg" alt="美女圖片" title="美女"/>
```
JavaScript代碼
```
//獲取標簽的DOM對象
var link = document.getElementById('link');
var girl = document.getElementById('girl');
//獲取DOM對象的屬性值
console.log(link.id);
console.log(link.href);
console.log(link.title);
console.log(girl.id);
console.log(girl.src);
console.log(girl.title);
//設置DOM對象的屬性值
link.href='http://www.taobao.com';
link.title='淘寶';
```
## **需求
1、**點擊按鈕，顯示或隱藏 div**
需求分析：
以下是每一個步驟的功能實現
****1、全選- 點擊父checkbox全選 (1)在父checkbox上注冊點擊事件; (2)當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
html和css代碼
~~~
?
<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>
?
<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>小米Mix2s</td>
? ? ? ? ? ? ? ?<td>3000</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>華為P30</td>
? ? ? ? ? ? ? ?<td>3800</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>iPad Air</td>
? ? ? ? ? ? ? ?<td>2000</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>小米手環</td>
? ? ? ? ? ? ? ?<td>200</td>
? ? ? ? ? ?</tr>
?
? ? ? ?</tbody>
? ?</table>
? ?<input type="button" value=" 反 選 " id="btn">
</div>
~~~
JavaScript代碼
```
// 1: 全選- 點擊父checkbox全選
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?var inputs = j_tb.getElementsByTagName('input');
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
```
2、全選- 點擊所有子checkbox全選 (1)在所有的子checkbox上注冊點擊事件; (2)當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox, 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
以下代碼是在第一步驟基礎上寫的，包括了第一部分的代碼
~~~
// ====================== 1: 全選- 點擊父checkbox全選 ======================
?
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取所有的子checkbox
? ?var inputs = j_tb.getElementsByTagName('input');
?
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
?
?
? ?// ====================== 2: 全選- 點擊所有子checkbox全選 ======================
? ?// (1) 在所有的子checkbox上注冊點擊事件;
? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ?var input = inputs[i];
? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果不是復選框,則不注冊事件
? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ?// 不是復選框
? ? ? ? ? ?continue;
? ? ? }
? ? ? ?// 在子checkbox上注冊點擊事件
? ? ? ?input.onclick = function () {
? ? ? ? ? ?// alert('測試子checkbox');
?
? ? ? ? ? ?// (2) 當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox,
? ? ? ? ? ?// ? ? 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
?
? ? ? ? ? ?// 記錄子checkbox是否都被選中的標記
? ? ? ? ? ?var isCheckedAll = true;
? ? ? ? ? ?// 遍歷所有input, 獲取所有子checkbox
? ? ? ? ? ?for (var j = 0; j < inputs.length; j++) {
? ? ? ? ? ? ? ?var input = inputs[j];
? ? ? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ? ? ?// 不是復選框
? ? ? ? ? ? ? ? ? ?continue;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?if (input.checked === false) {
? ? ? ? ? ? ? ? ? ?// 存在不選中的子checkbox,則父checkbox同步不選中;
? ? ? ? ? ? ? ? ? ?isCheckedAll = false;
? ? ? ? ? ? ? }
? ? ? ? ? }
?
? ? ? ? ? ?// 如果子checkbox全部被選中,則要去同步選中父checkbox;
? ? ? ? ? ?// 同步父checkbox
? ? ? ? ? ?j_cbAll.checked = isCheckedAll;
? ? ? }
?
? }
~~~
3、反選 (1)在反選按鈕上注冊點擊事件; (2)當點擊反選按鈕時, 將所有的子checkbox的狀態取反, 然后判斷所有的子checkbox是否都被選中, 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox;
以下代碼是在第二步驟基礎上寫的，包括了第二部分的代碼
~~~
// ======================= 1: 全選- 點擊父checkbox全選 =======================
?
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取所有的子checkbox
? ?var inputs = j_tb.getElementsByTagName('input');
? ?// 獲取反選按鈕元素
? ?var btn = document.getElementById('btn');
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
?
?
? ?// ====================== 2: 全選- 點擊所有子checkbox全選 =====================
? ?// (1) 在所有的子checkbox上注冊點擊事件;
? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ?var input = inputs[i];
? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果不是復選框,則不注冊事件
? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ?// 不是復選框
? ? ? ? ? ?continue;
? ? ? }
? ? ? ?// 在子checkbox上注冊點擊事件
? ? ? ?input.onclick = function () {
? ? ? ? ? ?// alert('測試子checkbox');
?
? ? ? ? ? ?// (2) 當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox,
? ? ? ? ? ?// ? ? 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
? ? ? ? ? ?synJcbAll();
? ? ? }
?
? }
?
? ?// 3: ============================== 反選 ==============================
? ?// (1) 在反選按鈕上注冊點擊事件
? ?btn.onclick = function () {
? ? ? ?// (2) 當點擊反選按鈕時, 將所有的子checkbox的狀態取反, 然后判斷所有的子checkbox是否都被選中,
? ? ? ?// ? ? 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox;
?
? ? ? ?// 將所有的子checkbox的狀態取反
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果是,則設置復選框的狀態取反
? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ?// 不是復選框,則跳到下一次循環
? ? ? ? ? ? ? ?continue;
? ? ? ? ? }
? ? ? ? ? ?input.checked = !input.checked;
?
? ? ? ? ? ?// 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox
? ? ? ? ? ?synJcbAll();
?
? ? ? }
? }
?
?
? ?// 抽取公共代碼帶函數中, 以便以后重復調用
? ?// 用于將子checkbox的狀態同步到父checkbox的函數
? ?function synJcbAll() {
? ? ? ?// 記錄子checkbox是否都被選中的標記
? ? ? ?var isCheckedAll = true;
? ? ? ?// 遍歷所有input, 獲取所有子checkbox
? ? ? ?for (var j = 0; j < inputs.length; j++) {
? ? ? ? ? ?var input = inputs[j];
? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ?// 不是復選框
? ? ? ? ? ? ? ?continue;
? ? ? ? ? }
? ? ? ? ? ?if (input.checked === false) {
? ? ? ? ? ? ? ?// 存在不選中的子checkbox,則父checkbox同步不選中;
? ? ? ? ? ? ? ?isCheckedAll = false;
? ? ? ? ? }
? ? ? }
?
? ? ? ?// 如果子checkbox全部被選中,則要去同步選中父checkbox;
? ? ? ?// 同步父checkbox
? ? ? ?j_cbAll.checked = isCheckedAll;
? }
~~~
**小結** 重點：全選反選效果； 難點：當選中所有 子checkbox時，選中父checkbox；**以下是每一個步驟的功能實現
1、全選- 點擊父checkbox全選 (1)在父checkbox上注冊點擊事件; (2)當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
html和css代碼
~~~
?
<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>
?
<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>小米Mix2s</td>
? ? ? ? ? ? ? ?<td>3000</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>華為P30</td>
? ? ? ? ? ? ? ?<td>3800</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>iPad Air</td>
? ? ? ? ? ? ? ?<td>2000</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>小米手環</td>
? ? ? ? ? ? ? ?<td>200</td>
? ? ? ? ? ?</tr>
?
? ? ? ?</tbody>
? ?</table>
? ?<input type="button" value=" 反 選 " id="btn">
</div>
~~~
JavaScript代碼
~~~
// 1: 全選- 點擊父checkbox全選
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?var inputs = j_tb.getElementsByTagName('input');
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
~~~
2、全選- 點擊所有子checkbox全選 (1)在所有的子checkbox上注冊點擊事件; (2)當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox, 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
以下代碼是在第一步驟基礎上寫的，包括了第一部分的代碼
~~~
// ====================== 1: 全選- 點擊父checkbox全選 ======================
?
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取所有的子checkbox
? ?var inputs = j_tb.getElementsByTagName('input');
?
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
?
?
? ?// ====================== 2: 全選- 點擊所有子checkbox全選 ======================
? ?// (1) 在所有的子checkbox上注冊點擊事件;
? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ?var input = inputs[i];
? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果不是復選框,則不注冊事件
? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ?// 不是復選框
? ? ? ? ? ?continue;
? ? ? }
? ? ? ?// 在子checkbox上注冊點擊事件
? ? ? ?input.onclick = function () {
? ? ? ? ? ?// alert('測試子checkbox');
?
? ? ? ? ? ?// (2) 當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox,
? ? ? ? ? ?// ? ? 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
?
? ? ? ? ? ?// 記錄子checkbox是否都被選中的標記
? ? ? ? ? ?var isCheckedAll = true;
? ? ? ? ? ?// 遍歷所有input, 獲取所有子checkbox
? ? ? ? ? ?for (var j = 0; j < inputs.length; j++) {
? ? ? ? ? ? ? ?var input = inputs[j];
? ? ? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ? ? ?// 不是復選框
? ? ? ? ? ? ? ? ? ?continue;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?if (input.checked === false) {
? ? ? ? ? ? ? ? ? ?// 存在不選中的子checkbox,則父checkbox同步不選中;
? ? ? ? ? ? ? ? ? ?isCheckedAll = false;
? ? ? ? ? ? ? }
? ? ? ? ? }
?
? ? ? ? ? ?// 如果子checkbox全部被選中,則要去同步選中父checkbox;
? ? ? ? ? ?// 同步父checkbox
? ? ? ? ? ?j_cbAll.checked = isCheckedAll;
? ? ? }
?
? }
~~~
3、反選 (1)在反選按鈕上注冊點擊事件; (2)當點擊反選按鈕時, 將所有的子checkbox的狀態取反, 然后判斷所有的子checkbox是否都被選中, 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox;
以下代碼是在第二步驟基礎上寫的，包括了第二部分的代碼
~~~
// ======================= 1: 全選- 點擊父checkbox全選 =======================
?
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取所有的子checkbox
? ?var inputs = j_tb.getElementsByTagName('input');
? ?// 獲取反選按鈕元素
? ?var btn = document.getElementById('btn');
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
?
?
? ?// ====================== 2: 全選- 點擊所有子checkbox全選 =====================
? ?// (1) 在所有的子checkbox上注冊點擊事件;
? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ?var input = inputs[i];
? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果不是復選框,則不注冊事件
? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ?// 不是復選框
? ? ? ? ? ?continue;
? ? ? }
? ? ? ?// 在子checkbox上注冊點擊事件
? ? ? ?input.onclick = function () {
? ? ? ? ? ?// alert('測試子checkbox');
?
? ? ? ? ? ?// (2) 當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox,
? ? ? ? ? ?// ? ? 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
? ? ? ? ? ?synJcbAll();
? ? ? }
?
? }
?
? ?// 3: ============================== 反選 ==============================
? ?// (1) 在反選按鈕上注冊點擊事件
? ?btn.onclick = function () {
? ? ? ?// (2) 當點擊反選按鈕時, 將所有的子checkbox的狀態取反, 然后判斷所有的子checkbox是否都被選中,
? ? ? ?// ? ? 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox;
?
? ? ? ?// 將所有的子checkbox的狀態取反
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果是,則設置復選框的狀態取反
? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ?// 不是復選框,則跳到下一次循環
? ? ? ? ? ? ? ?continue;
? ? ? ? ? }
? ? ? ? ? ?input.checked = !input.checked;
?
? ? ? ? ? ?// 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox
? ? ? ? ? ?synJcbAll();
?
? ? ? }
? }
?
?
? ?// 抽取公共代碼帶函數中, 以便以后重復調用
? ?// 用于將子checkbox的狀態同步到父checkbox的函數
? ?function synJcbAll() {
? ? ? ?// 記錄子checkbox是否都被選中的標記
? ? ? ?var isCheckedAll = true;
? ? ? ?// 遍歷所有input, 獲取所有子checkbox
? ? ? ?for (var j = 0; j < inputs.length; j++) {
? ? ? ? ? ?var input = inputs[j];
? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ?// 不是復選框
? ? ? ? ? ? ? ?continue;
? ? ? ? ? }
? ? ? ? ? ?if (input.checked === false) {
? ? ? ? ? ? ? ?// 存在不選中的子checkbox,則父checkbox同步不選中;
? ? ? ? ? ? ? ?isCheckedAll = false;
? ? ? ? ? }
? ? ? }
?
? ? ? ?// 如果子checkbox全部被選中,則要去同步選中父checkbox;
? ? ? ?// 同步父checkbox
? ? ? ?j_cbAll.checked = isCheckedAll;
? }
~~~
**小結** 重點：全選反選效果； 難點：當選中所有 子checkbox時，選中父checkbox；**
2. 給按鈕注冊事件；
3. 在事件處理函數中，控制div顯示、隱藏，并控制按鈕文字的切換；
  顯示和隱藏效果的控制：定義一個變量，用作控制div顯示、隱藏的標記。
html和css代碼
```
<style>
#box {
background-color: red;
width: 200px;
height: 200px;
}
.show{
display: block;
}
.hidden{
display: none;
}
</style>
<input type="button" id="showOrHidden" value="隱藏"/>
<div id="box">我是div</div>
```
JavaScript代碼
```
//1、獲取按鈕對象
var showOrHidden = document.getElementById('showOrHidden');
var box = document.getElementById('box');
//顯示 或 隱藏 標記
var flag = true;
// 2、注冊事件
showOrHidden.onclick = function () {
// 3、點擊按鈕顯示或隱藏div
// 4、修改按鈕的文字
if (flag) {
//隱藏div
//class在JS中是關鍵字，不能作為屬性名，DOM中規定了對象中對應標簽class屬性的名稱為className
box.className = 'hidden';
// showOrHidden.value='顯示';
this.value = '顯示';
flag = false;
} else {
// 顯示div
box.className = 'show';
// showOrHidden.value='隱藏';
this.value = '隱藏';
flag = true;
}
}
```
>[info] 在DOM對象中，除了使用 對象.屬性名 的格式訪問屬性，還可以使用 this關鍵字，下面總結this關鍵字的使用。
> this在JS代碼中表示一個指針，它總是指向某個對象（引用類型），this指向誰是由函數的調用方式來決定的。函數可以作為普通函數、對象的方法、構造函數來調用，如下是this在幾種調用方式中的指向。
> 1. 普通函數調用中： this 指向 window對象
> 2. 構造函數調用中： this 指向 當前被正在被創建的對象
> 3. 對象方法調用中： this 指向 調用該方法的對象
> 4. 事件處理函數調用中： this 指向 當前事件源
<br>
**2、美女相冊**
html和css代碼
```
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
}
#imagegallery a {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery a img {
border: 0;
}
</style>
<h2>
美女相冊
</h2>
<div id="imagegallery">
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100px" alt="美女1"/>
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100px" alt="美女2"/>
</a>
<a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100px" alt="美女3"/>
</a>
<a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100px" alt="美女4"/>
</a>
</div>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px"/>
<p id="des">選擇一個圖片</p>
```
通過案例效果可以知道，我們需要先解決a標簽的默認跳轉問題，即先取消a標簽的默認跳轉行為。
```
<a id="goToGirl" href="images/1.jpg">
<img src="images/1-small.jpg" alt="美女"/>
</a>
//要在a標簽跳轉之前取消跳轉行為
var goToGirl = document.getElementById('goToGirl');
goToGirl.onclick=function () {
alert('a標簽');
// 取消a標簽的默認跳轉行為
return false;
}
```
**美女相冊實現思路：**
1. 獲取所有的a標簽對象
2. 循環給所有的a標簽對象注冊事件
3. 取消a標簽的默認跳轉行為：在事件處理函數中取消a標簽的默認跳轉行為，關鍵代碼為 return false；
4. 設置大圖片：點擊哪張小圖就將其對應的大圖路徑設置到大圖位置，此時使用this關鍵字獲取當前事件源（被點擊的標簽）。
5. 設置圖片標題：使用innerText獲取或設置p標簽中的內容（后面課程會講解innerText）
```
// (1) 獲取到所有的a標簽;
// 獲取div元素
var imagegallery = document.getElementById('imagegallery');
// 從div元素中獲取所有的a標簽元素
var links = imagegallery.getElementsByTagName('a');
// 遍歷集合,獲取到集合中所有的a標簽元素
for (var i = 0; i < links.length; i++) {
var link = links[i];
// (2) 在所有的a標簽上注冊點擊事件;
link.onclick = function () {
// alert('美女!');
// (4) 設置大圖片: 當點擊a標簽時,獲取到被點擊的a標簽的href屬性值,設置到img標簽的src屬性中;
// 獲取img標簽元素
var image = document.getElementById('image');
// image.src = link.href;
image.src = this.href;
// link 代表的是什么?
// console.log(link);
// this 指向什么對象?
// console.log(this);
// 獲取p標簽
var des = document.getElementById('des');
// console.dir(des);
// console.log(des.innerText);
des.innerText = this.title;
// (3) 取消a標簽的默認跳轉行為: 核心代碼 return false;
return false;
}
}
```
## **innerHTML和innerText**
  innerHTML和innerText的區別：
  nnerHTML中包含HTML標簽和文本內容；包含HTML頁面中的所有換行和空格。
  innerText中只包含HTML標簽中的文本內容，而過濾掉了HTML標簽；如果有換行或多個空格，都會當做一個空格處理。
```
<div id="box">
我是一個div
<span id="sp">我是 一個span</span>
</div>
```
```
var box = document.getElementById('box');
//innerHTML中包含HTML標簽和文本內容；包含HTML頁面中的所有換行和空格。
console.dir(box);
console.log(box.innerHTML);
//innerText中只包含HTML標簽中的文本內容，而過濾掉了HTML標簽；不包含換行和空格，
// 如果有換行或多個空格，都會當做一個空格處理。
console.log(box.innerText);//獲取標簽內部文本
//獲取標簽內部文本
console.log(box.textContent);
```
通過上面演示可知，瀏覽器會將我們寫的html標簽解析掉，導致我們無法在頁面原樣輸出標簽。而在實際開發中，我們有時候需要將標簽原樣輸出標簽到瀏覽器中顯示，怎么辦？這時候我們就需要用到轉義符。
HTML轉義符
>[info] " "
> ' '
> & &
> < < // less than 小于
> > > // greater than 大于
> 空格
> ? ©
轉義后的代碼
```
<div id="box">
我是一個div
<span id="sp">我是 一個span</span>
<b>"加粗"</b> 字體
<!--轉義符-->
<b>加粗</b>字體
</div>
```
>[info] 注意：DOM對象中還有一個對象跟innerText的功能相似，就是textContent，innerText 和 textContent 兩個屬性存在瀏覽器兼容性問題。
> 在舊版FF中，只支持textContent
> 在舊版IE中，只支持innerText
模擬解決 innerText和textContent在瀏覽器中的兼容性問題
我們知道，在不同的舊版瀏覽器中，要么只支持 textContent，要么只支持 innerText。如果支持則屬性返回string類型的數據，不支持則返回undefined，因此我們可寫出以下兼容性代碼。
```
//模擬解決 innerText和textContent在瀏覽器中的兼容性問題
function getInnerText(element) {
if (typeof element.innerText==='string') {
return element.innerText;
}else {
return element.textContent;
}
}
```
代碼思路: 當元素中innerText屬性值不為undefined時,則使用innerText屬性,否則使用textContent屬性.
<br>
# 表單元素屬性
* value 用于獲取和設置表單元素的內容
* type 用于獲取和設置input標簽的類型
* disabled 獲取和設置標簽狀態（true表示禁用, false表示啟用）
* checked 復選框選中屬性（true表示選中, false表示不選中）
* selected 下拉菜單選中屬性（true表示選中, false表示不選中）
## 需求
**1、點擊按鈕禁用文本框**
需求分析：禁用之后的文本框，不能在手動輸入值，但是可以使用代碼賦值。
html和css代碼
```
<input type="button" id="bnt" value="按鈕"/>
<br>
<input type="text" id="txt" value="你好！"/>
```
JavaScript代碼
```
// 需求：點擊按鈕時，禁用文本框
//獲取標簽對應的DOM對象（元素）
var bnt = document.getElementById('bnt');
//注冊事件
bnt.onclick=function () {
var txt = document.getElementById('txt');
//獲取標簽屬性值
console.log(txt.value);
console.log(txt.type);
console.log(txt.disabled);
//設置標簽屬性值
txt.disabled=true;
txt.value='hello world!'
}
```
>[info]1、disabled、checked、selected 屬性 在HTML中只有兩種可能的效果（比如選擇/不選中，可編輯/不可編輯），對應DOM中的屬性值為 true或false。
>2、在html標簽中，只要標簽中寫了disabled屬性，不管disabled的值是什么，標簽都會是禁用狀態；
**2、當頁面加載完畢, 先給每個文本框設置任意值，當點擊按鈕時, 獲取所有文本框的值，并使用 | 作為分隔符拼接文本框的值 ;**
需求分析：
（1）循環給每個文本框賦值
（2）當點擊按鈕時，獲取文本框的值并使用 | 分隔文本框的值，然后輸出
  方式一：使用字符串拼接；
  方式二：使用數組；
html和css代碼
```
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="button" id="btn" value="獲取文本框的值"/><br>
```
JavaScript代碼
方式一：使用字符串拼接
```
// 1、給文本框賦值
//獲取所有input元素
var inputs = document.getElementsByTagName('input');
//遍歷input元素
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//判斷，如果類型為text，則設置值
if (input.type === 'text') {
input.value = i;
}
}
// 2、點擊按鈕獲取文本框的值并按指定格式（| 分割）輸出
var bnt = document.getElementById('btn');
var str = '';
bnt.onclick=function () {
for (var i = 0; i < inputs.length; i++) {
//字符串拼接
var input = inputs[i];
if (input.type === 'text') {
str += input.value + '|';
}
}
//使用substr截取掉最后一個 |
str = str.substr(0,str.length-1);
console.log(str);
}
```
方式二：使用數組的join方法
我們可以使用數組的方式代替字符串拼接，這樣避免了大量的字符串拼接，代碼執行效率更高。使用join方法指定分割符為 “ | ” 即可。
```
//使用數組的方式（效率較高，推薦使用）
var bnt = document.getElementById('btn');
var array = [];
bnt.onclick=function () {
for (var i = 0; i < inputs.length; i++) {
//字符串拼接
var input = inputs[i];
if (input.type === 'text') {
array.push(input.value);
}
}
var str = array.join('|');
console.log(str);
}
```
**3、檢測用戶名和密碼是否合法**
需求描述：檢測用戶名是否是3-8位，密碼是否是6-12位，如果不滿足則高亮顯示文本框
需求分析：
1. 獲取表單元素; ? \
2. 判斷表單元素中的值是否合法;
3. 如果用戶名和密碼都合法,則執行登錄,否則不能執行登錄;
html和css代碼
```
c<style>
.cls {
background-color: lightyellow;
}
</style>
用戶名：<input id="userName" type="text"/><br><br>
密碼：<input id="password" type="password"/><br>
<input id="login" type="button" value=" 登 錄 "/>
```
JavaScript代碼
// (1) 獲取事件源,注冊事件;
```
var login = document.getElementById('login');
login.onclick = function () {
// (2) 判斷用戶名和密碼是否合法, 如果不合法,則高亮顯示文本框;
var userName = document.getElementById('userName');
if (userName.value.length < 3 || userName.value.length > 8) {
// 不合法
userName.className = 'cls';
// 終止方法的執行
return;
}else {
// 合法, 清除文本框高亮
userName.className = '';
}
var password = document.getElementById('password');
if (password.value.length < 6 || password.value.length > 12) {
// 不合法
password.className = 'cls';
// 終止方法的執行
return;
}else {
// 合法,清除文本框高亮
password.className = '';
}
// (3) 如果用戶名和密碼都合法, 則執行登錄操作, 否則不執行登錄操作;
console.log('執行登錄...');
}
```
**2、點擊按鈕時，隨機選中下拉框中的的某一項**
需求分析：
1. 給按鈕注冊點擊事件 ?
2. 獲取下拉框所有的option ?
3. 隨機生成\[1,5\]之間的一個整數，作為option的隨機索引
4. 根據隨機索引獲取option，并設置該option為選中狀態 ?
獲取option的長度：**option.length **
設置選中：**option.selected = true;**
html和css代碼
```
<input type="button" id="btnSet" value="選中"/>
```
JavaScript
```
// 1、注冊點擊事件
var btnSet = document.getElementById('btnSet');
btnSet.onclick=function () {
// 2、獲取所有的option元素
var selectCity = document.getElementById('selectCity');
var options = selectCity.getElementsByTagName('option');
console.log(selectCity);
console.log(options);
// 3、生成option個數之內的隨機數 [0, 5)
// Math.random() [0, 1)
// Math.random() * 5 [0, 5)
// Math.random() * options.length [0, options.length)
var index = parseInt(Math.random() * options.length);
// 4、根據隨機數（下標）選中option
var option = options[index];
option.selected = true;
}
```
**3、實現搜索文本框**
需求分析：
當文本框獲得焦點時，如果文本框中的內容是 "請輸入關鍵字"，則清空文本框，并將文本框字體顏色設置成黑色。
當文本框失去焦點時，如果文本框中的內容為空，則設置文本框的內容為 "請輸入關鍵字"，并將文本框字體顏色設置成灰色。如果文本框中內容為 "請輸入關鍵字"，則將文字設置成灰色即可。
html和css代碼
```
c<style>
.cls {
background-color: lightyellow;
}
</style>
用戶名：<input id="userName" type="text"/><br><br>
密碼：<input id="password" type="password"/><br>
<input id="login" type="button" value=" 登 錄 "/>
```
JavaScript代碼
```
// (1) 獲取事件源,注冊事件;
var login = document.getElementById('login');
login.onclick = function () {
// (2) 判斷用戶名和密碼是否合法, 如果不合法,則高亮顯示文本框;
var userName = document.getElementById('userName');
if (userName.value.length < 3 || userName.value.length > 8) {
// 不合法
userName.className = 'cls';
// 終止方法的執行
return;
}else {
// 合法, 清除文本框高亮
userName.className = '';
}
var password = document.getElementById('password');
if (password.value.length < 6 || password.value.length > 12) {
// 不合法
password.className = 'cls';
// 終止方法的執行
return;
}else {
// 合法,清除文本框高亮
password.className = '';
}
// (3) 如果用戶名和密碼都合法, 則執行登錄操作, 否則不執行登錄操作;
console.log('執行登錄...');
}
```
**2、點擊按鈕時，隨機選中下拉框中的的某一項**
需求分析：
1. 給按鈕注冊點擊事件 ?
2. 獲取下拉框所有的option ?
3. 隨機生成\[1,5\]之間的一個整數，作為option的隨機索引
4. 根據隨機索引獲取option，并設置該option為選中狀態 ?
獲取option的長度：option.length
設置選中：option.selected = true;
html和css代碼
```
<input type="button" id="btnSet" value="選中"/>
<select id="selectCity">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">廣州</option>
<option value="5">貴港</option>
</select>
```
JavaScript代碼
```
// 1、注冊點擊事件
var btnSet = document.getElementById('btnSet');
btnSet.onclick=function () {
// 2、獲取所有的option元素
var selectCity = document.getElementById('selectCity');
var options = selectCity.getElementsByTagName('option');
console.log(selectCity);
console.log(options);
// 3、生成option個數之內的隨機數 [0, 5)
// Math.random() [0, 1)
// Math.random() * 5 [0, 5)
// Math.random() * options.length [0, options.length)
var index = parseInt(Math.random() * options.length);
// 4、根據隨機數（下標）選中option
var option = options[index];
option.selected = true;
}
```
**3、實現搜索文本框**
需求分析：
當文本框獲得焦點時，如果文本框中的內容是 "請輸入關鍵字"，則清空文本框，并將文本框字體顏色設置成黑色。
當文本框失去焦點時，如果文本框中的內容為空，則設置文本框的內容為 "請輸入關鍵字"，并將文本框字體顏色設置成灰色。如果文本框中內容為 "請輸入關鍵字"，則將文字設置成灰色即可。
html和css代碼
```
<style>
? ?.gray {
? ? ? ?color: gray;
? }
?
? ?.black {
? ? ? ?color: black;
? }
</style>
<input type="text" class="gray" id="txtSearch" value="請輸入關鍵字"/>
<input type="button" value=" 搜 索 "/>
```
JavaScript代碼
```
var txtSearch = document.getElementById('txtSearch');
?
? // （1）當文本框獲得焦點時，如果文本框中的內容是 "請輸入關鍵字"，則清空文本框，并將文本框字體顏色設置成黑色。
? ?//注冊事件
? ?txtSearch.onfocus = function () {
? ? ? ?// alert('666')
? ? ? ?if (this.value == '請輸入關鍵字') {
? ? ? ? ? ?//清空文本框
? ? ? ? ? ?this.value='';
? ? ? ? ? ?// this.value.length = 0;
? ? ? }
? ? ? ?//將文本框字體顏色設置成黑色
? ? ? ?this.className='black';
? }
// （2）當文本框失去焦點時，如果文本框中的內容為空，則設置文本框的內容為 "請輸入關鍵字"，并將文本框字體顏色設置成灰色。如果文本框中內容為 "請輸入關鍵字"，則將文字設置成灰色即可。
? ?//注冊事件
? ?txtSearch.onblur=function () {
? ? ? ?//txtSearch.value === ''
? ? ? ?if (this.value.length===0 || this.value==='請輸入關鍵字'){
? ? ? ? ? ?this.value='請輸入關鍵字';
? ? ? }
? ? ? ?this.className='gray';
? }
```
**4、全選反選（重點）**
```
border-collapse:collapse;/*設置表格為緊縮型表格,即細線表格。*/
```
全選和反選功能，在開發中應用得非常多，以下通過需求分析，學習如何使用JS實現全選反選功能。
該功能可分為如下三大步驟：
>[info]需求: 全選和反選
需求分析:
1、全選- 點擊父checkbox全選
(1)在父checkbox上注冊點擊事件;
(2)當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
2、全選- 點擊所有子checkbox全選
(1)在所有的子checkbox上注冊點擊事件;
(2)當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選 中父checkbox, 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
3、反選
(1)在反選按鈕上注冊點擊事件;
(2)當點擊反選按鈕時, 將所有的子checkbox的狀態取反, 然后判斷所有的子checkbox是否都被選中,
如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox;
以下是每一個步驟的功能實現
1、全選- 點擊父checkbox全選 (1)在父checkbox上注冊點擊事件; (2)當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
html和css代碼
~~~
?
<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>
?
<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>小米Mix2s</td>
? ? ? ? ? ? ? ?<td>3000</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>華為P30</td>
? ? ? ? ? ? ? ?<td>3800</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>iPad Air</td>
? ? ? ? ? ? ? ?<td>2000</td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ?<input type="checkbox"/>
? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ?<td>小米手環</td>
? ? ? ? ? ? ? ?<td>200</td>
? ? ? ? ? ?</tr>
?
? ? ? ?</tbody>
? ?</table>
? ?<input type="button" value=" 反 選 " id="btn">
</div>
~~~
JavaScript代碼
~~~
// 1: 全選- 點擊父checkbox全選
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?var inputs = j_tb.getElementsByTagName('input');
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
~~~
2、全選- 點擊所有子checkbox全選 (1)在所有的子checkbox上注冊點擊事件; (2)當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox, 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
以下代碼是在第一步驟基礎上寫的，包括了第一部分的代碼
~~~
// ====================== 1: 全選- 點擊父checkbox全選 ======================
?
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取所有的子checkbox
? ?var inputs = j_tb.getElementsByTagName('input');
?
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
?
?
? ?// ====================== 2: 全選- 點擊所有子checkbox全選 ======================
? ?// (1) 在所有的子checkbox上注冊點擊事件;
? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ?var input = inputs[i];
? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果不是復選框,則不注冊事件
? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ?// 不是復選框
? ? ? ? ? ?continue;
? ? ? }
? ? ? ?// 在子checkbox上注冊點擊事件
? ? ? ?input.onclick = function () {
? ? ? ? ? ?// alert('測試子checkbox');
?
? ? ? ? ? ?// (2) 當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox,
? ? ? ? ? ?// ? ? 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
?
? ? ? ? ? ?// 記錄子checkbox是否都被選中的標記
? ? ? ? ? ?var isCheckedAll = true;
? ? ? ? ? ?// 遍歷所有input, 獲取所有子checkbox
? ? ? ? ? ?for (var j = 0; j < inputs.length; j++) {
? ? ? ? ? ? ? ?var input = inputs[j];
? ? ? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ? ? ?// 不是復選框
? ? ? ? ? ? ? ? ? ?continue;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?if (input.checked === false) {
? ? ? ? ? ? ? ? ? ?// 存在不選中的子checkbox,則父checkbox同步不選中;
? ? ? ? ? ? ? ? ? ?isCheckedAll = false;
? ? ? ? ? ? ? }
? ? ? ? ? }
?
? ? ? ? ? ?// 如果子checkbox全部被選中,則要去同步選中父checkbox;
? ? ? ? ? ?// 同步父checkbox
? ? ? ? ? ?j_cbAll.checked = isCheckedAll;
? ? ? }
?
? }
~~~
3、反選 (1)在反選按鈕上注冊點擊事件; (2)當點擊反選按鈕時, 將所有的子checkbox的狀態取反, 然后判斷所有的子checkbox是否都被選中, 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox;
以下代碼是在第二步驟基礎上寫的，包括了第二部分的代碼
~~~
// ======================= 1: 全選- 點擊父checkbox全選 =======================
?
? ?// 獲取tbody元素
? ?var j_tb = document.getElementById('j_tb');
? ?// 獲取所有的子checkbox
? ?var inputs = j_tb.getElementsByTagName('input');
? ?// 獲取反選按鈕元素
? ?var btn = document.getElementById('btn');
? ?// 獲取事件源
? ?var j_cbAll = document.getElementById('j_cbAll');
? ?// (1) 在父checkbox上注冊點擊事件
? ?j_cbAll.onclick = function () {
? ? ? ?// (2) 當點擊父checkbox時, 讓所有子checkbox的狀態始終跟父checkbox的狀態保持一致;
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?if (input.type === 'checkbox') {
? ? ? ? ? ? ? ?// 所有子checkbox的狀態始終跟父checkbox的狀態保持一致
? ? ? ? ? ? ? ?input.checked = j_cbAll.checked;
? ? ? ? ? }
? ? ? }
? }
?
?
? ?// ====================== 2: 全選- 點擊所有子checkbox全選 =====================
? ?// (1) 在所有的子checkbox上注冊點擊事件;
? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ?var input = inputs[i];
? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果不是復選框,則不注冊事件
? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ?// 不是復選框
? ? ? ? ? ?continue;
? ? ? }
? ? ? ?// 在子checkbox上注冊點擊事件
? ? ? ?input.onclick = function () {
? ? ? ? ? ?// alert('測試子checkbox');
?
? ? ? ? ? ?// (2) 當每次點擊子checkbox時, 判斷所有子checkbox是否全部被選中,如果全部被選中,則要去同步選中父checkbox,
? ? ? ? ? ?// ? ? 如果有一個子checkbox沒有被選中,則父checkbox不要選中;
? ? ? ? ? ?synJcbAll();
? ? ? }
?
? }
?
? ?// 3: ============================== 反選 ==============================
? ?// (1) 在反選按鈕上注冊點擊事件
? ?btn.onclick = function () {
? ? ? ?// (2) 當點擊反選按鈕時, 將所有的子checkbox的狀態取反, 然后判斷所有的子checkbox是否都被選中,
? ? ? ?// ? ? 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox;
?
? ? ? ?// 將所有的子checkbox的狀態取反
? ? ? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ? ? ?var input = inputs[i];
? ? ? ? ? ?// 判斷當前遍歷到的input是否是復選框,如果是,則設置復選框的狀態取反
? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ?// 不是復選框,則跳到下一次循環
? ? ? ? ? ? ? ?continue;
? ? ? ? ? }
? ? ? ? ? ?input.checked = !input.checked;
?
? ? ? ? ? ?// 如果所有的子checkbox都已經被選中,則要選中父checkbox,否則不選中父checkbox
? ? ? ? ? ?synJcbAll();
?
? ? ? }
? }
?
?
? ?// 抽取公共代碼帶函數中, 以便以后重復調用
? ?// 用于將子checkbox的狀態同步到父checkbox的函數
? ?function synJcbAll() {
? ? ? ?// 記錄子checkbox是否都被選中的標記
? ? ? ?var isCheckedAll = true;
? ? ? ?// 遍歷所有input, 獲取所有子checkbox
? ? ? ?for (var j = 0; j < inputs.length; j++) {
? ? ? ? ? ?var input = inputs[j];
? ? ? ? ? ?if (input.type !== 'checkbox') {
? ? ? ? ? ? ? ?// 不是復選框
? ? ? ? ? ? ? ?continue;
? ? ? ? ? }
? ? ? ? ? ?if (input.checked === false) {
? ? ? ? ? ? ? ?// 存在不選中的子checkbox,則父checkbox同步不選中;
? ? ? ? ? ? ? ?isCheckedAll = false;
? ? ? ? ? }
? ? ? }
?
? ? ? ?// 如果子checkbox全部被選中,則要去同步選中父checkbox;
? ? ? ?// 同步父checkbox
? ? ? ?j_cbAll.checked = isCheckedAll;
? }
~~~
**小結** 重點：全選反選效果； 難點：當選中所有 子checkbox時，選中父checkbox；
<br>
<br>
# 定義屬性操作
常用的自定義屬性相關的方法有 `getAttribute()`、`setAttribute()`、`removeAttribute()` ，這三個方法操作的是標簽的行內屬性，不存在瀏覽器兼容性問題，稱為標準方法。
* `getAttribute()` 獲取標簽行內屬
* `setAttribute() `設置標簽行內屬性
* `removeAttribute()` 移除標簽行內屬性
html和css代碼
<div id="box" class="black" age="18" parentId="1"></div>
JavaScript代碼
```
// 1: 以前的操作: 獲取和設置box元素屬性
var box = document.getElementById('box');
console.log(box.id);
console.log(box.className);
box.className='divClass';
console.log(box.className);
// 2: 現在的操作: 自定義屬性
// (1) 從DOM元素中獲取手動添加到標簽中的屬性age, parentId
console.log(box.age); // undefined
console.log(box.parentId); // undefined
// (2) 使用標準方法從DOM中獲取手動添加到標簽中的屬性(行內屬性)
// get 獲取, Attribute 屬性; 獲取屬性值
console.log(box.getAttribute('age'));
console.log(box.getAttribute('parentId'));
// 設置標簽的行內屬性
// 參數一: 屬性名,相當于 鍵;
// 參數二: 屬性值,相當于 值;
box.setAttribute('sex', true);
console.log(box.getAttribute('sex'));
box.setAttribute('age', 20);// 已存在age屬性,則原來的屬性值被覆蓋
console.log(box.getAttribute('age'));
// 刪除行內屬性
box.removeAttribute('age');
console.log(box.getAttribute('age')); // null, 表示沒有age元素(已經被刪除了)
```
<br>
<br>
# 樣式屬性操作
CSS中的樣式屬性： 語法，屬性名：屬性值； 使用DOM對象操作標簽中的樣式： 獲取樣式屬性值：對象名.style.屬性名 設置元素樣式屬性值：對象名.style.屬性名 = 屬性值 + 'px'
通過DOM元素設置樣式屬性的時候，樣式屬性是行內樣式，優先級最高。在設置樣式屬性的時候，寬、高、位置樣式的值是字符串類型，要加上單位 px
html代碼
```
<div id="box" class="boxClass" style="background-color: #0099cc;width: 200px; height: 200px">我是一個div</div>
```
JavaScript代碼
```
// 獲取box元素
var box = document.getElementById('box');
// 對象類型: CSSStyleDeclaration?
console.dir(box);
console.log(box.style);
// 獲取樣式屬性
console.log(box.style.backgroundColor);
console.log(box.style.width);// 200px
console.log(box.style.height);// 200px
// 設置樣式屬性
box.style.backgroundColor = 'red';
box.style.width = 500 + 'px';
console.log(box.style.width); // 500px
```
<br>
# 元素屬性className和style的區別（掌握）
  標簽的class屬性對應著DOM對象中的className屬性，所以修改DOM的className屬性相當于修改標簽的class屬性值。
  注意, 在通過DOM元素設置標簽的樣式屬性的時，我們可以className屬性和style屬性來設置, 但style屬性操作的是標簽的行內樣式，所以優先級最高。我們可以通過以下代碼演示他們的優先級.
  在開發中，怎么選擇class屬性和style屬性的使用？ 如果樣式屬性比較多，則使用class進行引用; 如果樣式屬性比較少，則使用style屬性，更靈活;
html和css代碼
```
<style>
```
JavaScript代碼
```
// 獲取box元素
var box = document.getElementById('box');
// 引用定義好的樣式: 操作的是嵌入式的樣式
box.className = 'boxClass';
// 獲取行內樣式
console.log(box.style.backgroundColor);
// 設置行內樣式
box.style.backgroundColor = 'red';
// 小結: className屬性操作的是嵌入樣式, style屬性操作的是行內樣式, 相對于嵌入式和外聯式, 行內樣式的優先級最高
```
# 需求
**1、開關燈**
目的: 練習style屬性的使用;
需求分析：
（1）當點擊"關 燈"按鈕時，將body背景顏色設置成黑色，同時將 "關 燈" 設置成 "開 燈"；
（2）當點擊"開 燈"按鈕時，將body背景顏色設置成白色，同時將 "開 燈" 設置成 "關 燈"； 通過效果演示可以看出，"開關燈" 效果其實是操作body的樣式，使瀏覽器界面呈現黑白切換。
html和css代碼
```
<input id="btn" type="button" value="關 燈"/>
```
JavaScript代碼
```
// 定義一個變量,用于記錄開關燈狀態
? ?var isOpen = true;
? ?// 獲取按鈕元素
? ?var btn = my$('btn');
? ?btn.onclick = function () {
?
? ? ? ?// if (isOpen === true) {
? ? ? ?if (isOpen) {
? ? ? ? ? //（1）當點擊"關 燈"按鈕時，將body背景顏色設置成黑色，同時將 "關 燈" 設置成 "開 燈"；
? ? ? ? ? ?document.body.style.backgroundColor = 'black';
? ? ? ? ? ?btn.value = '開 燈';
? ? ? ? ? ?isOpen = false;
? ? ? } else {
? ? ? ? ? //（2）當點擊"開 燈"按鈕時，將body背景顏色設置成白色，同時將 "開 燈" 設置成 "關 燈"；
? ? ? ? ? ?document.body.style.backgroundColor = 'white';
? ? ? ? ? ?btn.value = '關 燈';
? ? ? ? ? ?isOpen = true;
? ? ? }
? }
? ?
? ?// 抽取常用的代碼: 根據id獲取標簽元素
? ?function my$(id) {
? ? ? ?return document.getElementById(id);
? }
```
**2、點擊按鈕變色**
目的: 練習style屬性的使用;
需求描述：點擊按鈕，隨機變換body的背景顏色
需求分析：
（1）當點擊按鈕時，隨機生成\[0, 255\]區間的整數作為rgb的顏色值，拼接成rgb(color1, color2, color3)；
（2）當點擊按鈕時，將顏色值設置為body的背景；
html和css代碼
```
<script src="common.js"></script>
<input type="button" id="btn" value="變換顏色"/>
```
JavaScript代碼
```
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
?var color1 = getRandomNum();
?var color2 = getRandomNum();
?var color3 = getRandomNum();
?document.body.style.background = 'rgb('+color1+','+color2+','+color3+')';
}
?
function getRandomNum(){
?return Math.floor(Math.random()*255)
}
```
**3、切換二維碼**
目的: 練習className屬性,鼠標移入移出事件;
需求分析： （1）當鼠標移入div時，顯示二維碼圖片； （2）當鼠標移出div時，隱藏二維碼圖片；
html和css代碼
~~~
<style>
? ?.nodeSmall {
? ? ? ?width: 50px;
? ? ? ?height: 50px;
? ? ? ?background: url(images/bgs.png) no-repeat -159px -51px;
? ? ? ?position: fixed;
? ? ? ?right: 10px;
? ? ? ?top: 40%;
? }
? ?.erweima {
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: -150px;
? }
? ?.nodeSmall a {
? ? ? ?display: block;
? ? ? ?width: 50px;
? ? ? ?height: 50px;
? }
? ?.hide {
? ? ? ?display: none;
? }
? ?.show {
? ? ? ?display: block;
? }
</style>
<script src="common.js"></script>
<div class="nodeSmall" id="node_small">
? ?<div class="erweima hide" id="er">
? ? ? ?<img src="images/456.png" alt=""/>
? ?</div>
</div>
~~~
JavaScript代碼
~~~
var nodeSmall = my$('node_small');
// 當鼠標移入 onmouseover
// 當鼠標移出 onmouseout
nodeSmall.onmouseover=function () {
? ?//顯示二維碼
? ?// my$('er').className='erweima show';
? ?my$('er').className = my$('er').className.replace('hide', 'show');
? ?// console.log(my$('er').className);
}
?
nodeSmall.onmouseout=function () {
? ?//隱藏二維碼
? ?my$('er').className = my$('er').className.replace('show', 'hide');
? ?// my$('er').className='erweima hide';
}
~~~
**4、高亮顯示正在編輯的文本框**
目的:練習使用當前事件源(this)的style屬性 需求描述：設置正在編輯的文本框為高亮狀態，表示用戶正在操作（編輯），在開發中也是經常要做的功能。 需求分析： （1）獲取所有文本框； （2）給所有文本框注冊獲得焦點事件； （3）當事件發生時，先清空所有文本框的高亮效果, 再設置當前文本框背景為高亮；
html和css代碼
~~~
<script src="common.js"></script>
<style>
? ?/*body{*/
? ?/*background-color: lightyellow;*/
? ?/*}*/
</style>
?
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="button" value=" 提交 ">
?
~~~
JavaScript代碼
~~~
// （1）獲取所有文本框元素；
? ?var inputs = document.getElementsByTagName('input');
? ?// （2）給所有文本框注冊獲得焦點事件；
? ?for (var i = 0; i < inputs.length; i++) {
? ? ? ?var input = inputs[i];
? ? ? ?// 判斷當前遍歷到的input元素是否是文本框元素
? ? ? ?if (input.type !== 'text') {
? ? ? ? ? ?continue;
? ? ? }
? ? ? ?input.onfocus = function () {
? ? ? ? ? ?// （3）當事件發生時，先清空所有文本框的高亮效果, 再設置當前文本框背景為高亮；
?
? ? ? ? ? ?// 先清空所有文本框的高亮效果
? ? ? ? ? ?for (var j = 0; j < inputs.length; j++) {
? ? ? ? ? ? ? ?var input = inputs[j];
? ? ? ? ? ? ? ?if (input.type !== 'text') {
? ? ? ? ? ? ? ? ? ?continue;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?input.style.backgroundColor = '';
? ? ? ? ? }
? ? ? ? ? ?// 設置當前文本框背景為高亮
? ? ? ? ? ?this.style.backgroundColor = 'lightblue';
? ? ? }
? }
~~~
**5、點擊按鈕改變div的大小和位置**
目的:練習style中的width,height,top,left,position等屬性的使用;
需求分析：
（1）給按鈕注冊點擊事件 ;
（2）當點擊按鈕時，改變div的大小和位置。使用DOM操作div的樣式，可使用className或style屬性 注意：在DOM的樣式控制中，ID選擇器的優先級高于類選擇器 ;
html和css代碼
~~~
<style>
? ?/*
? #box{
? ? ? width: 200px;
? ? ? height: 100px;
? ? ? background-color: red;
? }
? */
? ?.cls {
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?background-color: pink;
? }
? ?.cls1 {
? ? ? ?width: 200px;
? ? ? ?height: 200px;
? ? ? ?position: absolute;
? ? ? ?top: 100px;
? ? ? ?left: 100px;
? ? ? ?background-color: pink;
? }
</style>
<script src="common.js"></script>
<input type="button" value=" 點我 " id="btn"><br>
<br>
<div id="box" class="cls"></div>
~~~
JavaScript代碼
~~~
? ?// （1）給按鈕注冊點擊事件 ;
? ?var btn = my$('btn');
? ?btn.onclick = function () {
? ? ? ?// （2）當點擊按鈕時，改變div的大小和位置。使用DOM操作div的樣式，可使用className或style屬性
? ? ? ?// 改變div樣式的兩種方式: className, style
? ? ? ?// 方式一: 注意, ID選擇器設置樣式時,優先級高于其他選擇器;
? ? ? ?my$('box').className = 'cls1';
?
? ? ? ?// 方式二: style是函內樣式, 比className引用的嵌入樣式優先級高;
? ? ? ?my$('box').style.width = 200 + 'px';
? ? ? ?my$('box').style.height = 200 + 'px';
? ? ? ?my$('box').style.backgroundColor = 'red';
? ? ? ?my$('box').style.position = 'absolute';
? ? ? ?my$('box').style.top = 100 + 'px';
? ? ? ?my$('box').style.left = 100 + 'px';
? }
~~~
**6、列表隔行變色、高亮顯示**
目的: 練習style在鼠標移入移出事件中的應用 需求分析：
（1）遍歷每個li元素，設置樣式使其各行變色，利用奇偶性；
（2）遍歷每個li的時候，注冊鼠標移入、移出事件；
（3）當鼠標移入時，將原來的顏色變成淺藍色，鼠標移出時，恢復原來的顏色；
html和css代碼
~~~
<style>
? ?/*body{*/
? ?/*background-color: azure;*/
? ?/*background-color: antiquewhite;*/
? ?/*background-color: lightskyblue;*/
? ?/*}*/
</style>
<script src="common.js"></script>
?
<ul id="tb">
? ?<li>西施</li>
? ?<li>貂蟬</li>
? ?<li>王昭君</li>
? ?<li>楊玉環</li>
? ?<li>芙蓉姐姐</li>
</ul>
~~~
JavaScript代碼
~~~
// （1）遍歷每個li元素，設置樣式使其各行變色，利用奇偶性；
? ?// 獲取所有的li元素
? ?var list = my$('tb').getElementsByTagName('li')
? ?for (var i = 0; i < list.length; i++) {
? ? ? ?var li = list[i];
? ? ? ?if (i % 2 === 0) {
? ? ? ? ? ?// 奇數行
? ? ? ? ? ?li.style.backgroundColor = 'azure';
? ? ? } else {
? ? ? ? ? ?// 偶數行
? ? ? ? ? ?li.style.backgroundColor = 'antiquewhite';
? ? ? }
?
? ? ? ?var bg = '';
? ? ? ?// （2）遍歷每個li的時候，注冊鼠標移入、移出事件；
? ? ? ?li.onmouseover = function () {
? ? ? ? ? ?// console.log('鼠標移入了');
? ? ? ? ? ?// 獲取原來的顏色
? ? ? ? ? ?bg = this.style.backgroundColor;
? ? ? ? ? ?// （3）當鼠標移入時，將原來的顏色變成淺藍色；
? ? ? ? ? ?this.style.backgroundColor = 'lightskyblue';
? ? ? }
? ? ? ?li.onmouseout = function () {
? ? ? ? ? ?// console.log('鼠標移出了');
? ? ? ? ? ?// 鼠標移出時，恢復原來的顏色;
? ? ? ? ? ?this.style.backgroundColor = bg;
? ? ? }
? }
?
~~~
**7、 tab選項卡切換**
目的: 自定義屬性操作, 樣式操作的綜合應用 需求分析：
（1）給每個span注冊鼠標經過事件，當鼠標移入span標簽時（tab欄）； a、先取消所有span的高亮顯示； b、再設置當前span高亮顯示；
（2）先隱藏所有的div模塊, 再設置當前span（tab欄）對應的div模塊； 注意, 所有的span標簽和所有的div呈對應關系，我們可以利用元素集合的有序性，在span標簽中自定義屬性index，然后利用index定位到對應的div
html和css代碼
~~~
<style>
? * {margin:0; padding: 0;}
? ?ul {
? ? ? ?list-style-type: none;
? }
? ?.box {
? ? ? ?width: 400px;
? ? ? ?height: 300px;
? ? ? ?border: 1px solid #ccc;
? ? ? ?margin: 100px auto;
? ? ? ?overflow: hidden;
? }
? ?.headDiv {
? ? ? ?height: 45px;
? }
? ?.headDiv span {
? ? ? ?display:inline-block;
? ? ? ?width: 90px;
? ? ? ?background-color: pink;
? ? ? ?line-height: 45px;
? ? ? ?text-align: center;
? ? ? ?cursor: pointer;
? }
? ?.headDiv span.current {
? ? ? ?background-color: purple;
? }
? ?.bodyDiv div {
? ? ? ?height: 255px;
? ? ? ?background-color: purple;
? ? ? ?display: none;
? }
? ?.bodyDiv div.current {
? ? ? ?display: block;
? }
</style>
?
<div class="box">
? ?<div class="headDiv" id="headDiv">
? ? ? ?<span class="current">體育</span>
? ? ? ?<span>娛樂</span>
? ? ? ?<span>新聞</span>
? ? ? ?<span>綜合</span>
? ?</div>
? ?<div class="bodyDiv" id="bodyDiv">
? ? ? ?<div class="current">我是體育模塊</div>
? ? ? ?<div>我是娛樂模塊</div>
? ? ? ?<div>我是新聞模塊</div>
? ? ? ?<div>我是綜合模塊</div>
? ?</div>
</div>
<script src="common.js"></script>
?
~~~
JavaScript代碼
~~~
// 1、鼠標放到tab欄時，高亮顯示，其他欄取消高亮
//獲取元素
var headDiv = my$('headDiv');
var spans = headDiv.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
? ?var span = spans[i];
? ?//給所有的span標簽設置一個標記屬性
? ?span.setAttribute('index', i);
? ?// 2、注冊鼠標經過事件
? ?span.onmouseover = fn;
}
?
//事件處理函數
function fn() {
? ?// （1）取消所有span的高亮顯示
? ?for (var i = 0; i < spans.length; i++) {
? ? ? ?var span = spans[i];
? ? ? ?//清空樣式
? ? ? ?span.className = '';
? }
? ?// （2）設置當前span高亮顯示
? ?this.className = 'current';
?
? ?// 3、tab欄對應的div顯示，其他div隱藏
? ?var bodyDiv = my$('bodyDiv');
? ?var divs = bodyDiv.getElementsByTagName('div');
? ?for (var i = 0; i < divs.length; i++) {
? ? ? ?var div = divs[i];
? ? ? ?div.className = '';
? }
? ?// 使用span的自定義屬性index，定位到對應的div
? ?var index = this.getAttribute('index');
? ?divs[index].className = 'current';
}
~~~
