JavaScript 操作元素案例練習-
文章目錄
案例：顯示隱藏密碼案例
案例：迴圈精靈圖
案例：密碼框驗證資訊
案例：背景換色
案例：表格換色
案例：表單全選和反選
案例：tab欄切換
操作元素內容參考之前文章： JavaScript WebAPI、DOM、事件、操作元素
案例：顯示隱藏密碼案例
核心思路： （操作表單元素屬性）
點選眼睛按鈕，把密碼框型別改為文字框就可以看見裡面的密碼 一個按鈕兩個狀態，
點選一次，切換為文字框，繼續點選一次切換為密碼框
演算法：利用一個flag變數，來判斷flag的值，如果是1 就切換為文字框，flag 設定為0，如果是0 就切換為密碼框，flag設定為1
案例：迴圈精靈圖
核心思路： （操作元素樣式）
利用for迴圈 修改精靈圖片的 背景位置
background-position 讓迴圈裡面的 i 索引號 * 44就是每個圖片的y座標
案例：密碼框驗證資訊
核心思路：（用className修改樣式屬性）
首先判斷的事件是表單失去焦點 onblur
如果輸入正確則提示正確的資訊顏色為綠色小圖示變化
如果輸入不是6到16位，則提示錯誤資訊顏色為紅色 小圖示變化
因為裡面變化樣式較多，採取className修改樣式
案例：背景換色
核心思想：（操作元素樣式屬性）
給4個小圖片利用迴圈註冊點選事件
當點選了這個圖片，讓頁面背景改為當前的圖片
核心演算法： 把當前圖片的src 路徑取過來，給body 做為背景即可
案例：表格換色
核心思路：（排他思想）
用到新的滑鼠事件 滑鼠經過 onmouseover 滑鼠離開 onmouseout
核心思路：滑鼠經過 tr 行，當前的行變背景顏色，滑鼠離開去掉當前的背景顏色
注意： 第一行（thead裡面的行）不需要變換顏色，因此獲取的是 tbody 裡面的行
| 程式碼 | 名稱 | 最新公佈淨值 | 累計淨值 | 前單位淨值 | 淨值增長率 |
|---|---|---|---|---|---|
| 003526 | 農銀金穗3個月定期開放債券 | 1。075 | 1。079 | 1。074 | +0。047% |
| 003526 | 農銀金穗3個月定期開放債券 | 1。075 | 1。079 | 1。074 | +0。047% |
| 003526 | 農銀金穗3個月定期開放債券 | 1。075 | 1。079 | 1。074 | +0。047% |
| 003526 | 農銀金穗3個月定期開放債券 | 1。075 | 1。079 | 1。074 | +0。047% |
| 003526 | 農銀金穗3個月定期開放債券 | 1。075 | 1。079 | 1。074 | +0。047% |
| 003526 | 農銀金穗3個月定期開放債券 | 1。075 | 1。079 | 1。074 | +0。047% |
案例：表單全選和反選
核心思想：
全選和取消全選做法： 讓所有複選框的checked屬性（選中狀態） 跟隨 全選按鈕
複選框需要全部選中， 全選才能選中做法：給下面所有複選框繫結點選事件，每次點選，都要迴圈檢視下面所有的複選框是否有沒選中的，如果有一個沒選中的， 上面全選就不選中
可以設定一個變數，來控制全選是否選中
| 商品 | 價錢 | |
|---|---|---|
| iPhone8 | 8000 | |
| iPad Pro | 5000 | |
| iPad Air | 2000 | |
| Apple Watch | 2000 |
案例：tab欄切換
核心思想：（排他思想）
Tab欄切換有2個大的模組
上的模組選項卡，點選某一個，當前這一個底色會是紅色，其餘不變（排他思想） 修改類名的方式
下面的模組內容，會跟隨上面的選項卡變化。所以下面模組變化寫到點選事件裡面。 規律：下面的模組顯示內容和上面的選項卡一一對應，相匹配
核心思路： 給上面的tab_list 裡面的所有小li 新增自定義屬性，屬性值從0開始編號。
當點選tab_list 裡面的某個小li，讓tab_con 裡面對應序號的內容顯示，其餘隱藏（排他思想）
- 商品介紹
- 規格與包裝
- 售後保障
- 商品評價（50000）
- 手機社群
商品介紹模組內容
規格與包裝模組內容
售後保障模組內容
商品評價（50000）模組內容
手機社群模組內容
我組建了一個前端自學團，學習前端技術。在團裡，會嚴格監督大家每天學習打卡，給大家分享學習資料，給大家匹配學習夥伴，定期組織大家進行專案實戰。想要加入一起學習的小夥伴可以私信我或是給我留言
作者：YuLong~W
原文連結：JavaScript 操作元素案例練習