emmmmmm，昨天下午那會兒，出現了一點小插曲，電腦進水了。。。。。。。。
還好最後沒事，不讓我就要報廢了，今天夜裏把昨天沒有完成的知識點來完成一下。
上篇文章介紹了其他的元素操作，今天再對錶單元素進行補充說明一下。
表單元素的屬性操作
src屬性的應用
今天又找一個案例做做：點擊圖片，背景就變成點擊的那個圖片
其實也可以看成是換頭像，原理是一樣的
這個案例對src的應用我感覺是比較典型的，其中是把src的屬性動態的運用了。
下面紅字部分是最重要的
body.style.backgroundImage = 'url(' + this.src + ')'
主要技術點：循環註冊事件、鼠標點擊事件
上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url('./img/1.jpg') repeat-x;
}
div {
width: 400px;
margin: 100px auto;
}
ul {
background-color: pink;
list-style: none;
padding: 0;
}
li {
float: left;
overflow: hidden;
width: 80px;
height: 50px;
margin: 1px;
}
img {
width: 80px;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="./img/lyf.jpg" alt=""></li>
<li><img src="./img/xzq.jpg" alt=""></li>
<li><img src="./img/lyf.jpg" alt=""></li>
<li><img src="./img/xzq.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
</ul>
</div>
<script>
// 點擊圖片，背景圖片變爲被點擊的圖片
// 主要思路：點擊時，body的背景爲img的src
// 1.獲取事件源——圖片、body
var img = document.querySelectorAll('img');
var body = document.body;
// 2.註冊事件 程序處理
for (var i = 0; i < img.length; i++) {
img[i].onclick = function () {
body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
效果圖：
顯示密碼——type屬性的運用
在登陸時，輸入的密碼是不可見的，但是點擊右邊那個閉眼的按鈕又是可以看見密碼的；
主要技術點：鼠標點擊事件、表單type屬性的變換、點擊時換圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.jd {
position: relative;
width: 400px;
margin: 100px auto;
border-bottom: 1px solid #ccc;
}
.jd input {
width: 300px;
height: 30px;
outline: none;
box-sizing: border-box;
border: none;
padding-left: 10px;
}
.jd img {
position: absolute;
top: 8;
right: 0;
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<div class="jd">
<label for="pwd">
<img src="images/close.png" id="eye">
</label>
<input type="password" id="pwd">
</div>
<script>
// 點擊眼睛顯示密碼，同時圖標也變成眼睛圖片
// 再點擊時，變回密文形式，圖標變回來
// 1. 獲取事件源
var pwd = document.getElementById('pwd');
var eye = document.getElementById('eye');
// 一個按鈕點擊兩個狀態，需要一個變量來檢測狀態
// 0爲閉眼狀態，點擊變爲眼睛，然後flag==1
// 1爲眼睛狀態，點擊變爲閉眼狀態，然後flag == 0
var flag = 0;
// 2. 註冊事件， 進行事件處理程序
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>
點擊效果：
密碼框格式化提示信息
在註冊時，密碼的格式輸入不對，是會出現提示信息的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
div input {
width: 300px;
height: 30px;
outline: none;
box-sizing: border-box;
padding-left: 10px;
margin-right: 5px;
}
.message {
font-size: 16px;
color: gray;
padding-left: 20px;
background: url('./images/mess.png') no-repeat left center;
}
.w {
color: red;
background-image: url('./images/wrong.png');
}
.r {
color: green;
background-image: url('./images/right.png');
}
</style>
</head>
<body>
<div>
設置密碼：<input type="password" id="pwd">
<span class="message">請輸入6-16位的密碼</span>
</div>
<script>
// 輸入密碼的位數不對：提示位數不對
// 獲取元素
var pwd = document.getElementById('pwd');
var meanage = document.querySelector('span');
// 註冊事件 程序處理
pwd.onblur = function () {
// 判斷表單值的長度
if (this.value.length >= 6 && this.value.length <= 16) {
meanage.innerHTML = '您輸入正確';
meanage.className = 'message r';
} else {
meanage.innerHTML = '您輸入的密碼位數不對';
meanage.className = 'message w';
}
}
</script>
</body>
</html>
效果圖：
默認顯示
輸入錯誤
輸入正確
顯示隱藏文本框內容——value的運用
在搜索框中一般都有默認的文字，但是鼠標點擊或用戶輸入後，鼠標再移開搜索框，該搜索框裏面的文字是會變的。
搜索框中的默認文字其實是與頁面的主題是對應的。
舉個具體的例子：我進入到一個手機商城的頁面，那搜索框的默認文字肯定與手機有關；我進入護膚品的頁面，搜索框的默認文字是與護膚品相關的名詞。
主要技術點：判斷用戶輸入的信息與默認是否相等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
margin: 100px auto;
}
input {
color: #999;
outline: none;
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="默認文字">
</div>
<!-- 需求：
1.當表單獲得焦點時，用戶沒有輸入信息，隱藏表單中默認文本信息
失去焦點默認文本顯示
2.獲焦時，用戶輸入與默認文本信息不同得信息，表單值爲用戶輸入的信息(字體顏色稍微深一點)
失去焦點時，顯示的仍然是用戶輸入的信息(字體顏色變淺) -->
<script>
// 獲取事件源
var input = document.querySelector('input');
// 註冊事件 事件處理程序
input.onfocus = function () {
// 只要用戶輸入的信息與默認文字不同，就返回爲空
if (this.value === '默認文字') {
input.value = '';
}
// 獲焦時，更改字體顏色深一點
this.style.color = '#333';
}
// 失去焦點
input.onblur = function () {
// 用戶沒有輸入信息
if (this.value === '默認文字') {
input.value = '默認文字';
}
// 失去焦點時字體顏色變淺一點
input.style.color = '#999';
}
</script>
</body>
</html>
效果圖：
默認顯示
輸入顯示
巧用循環設置精靈圖
很多網頁都有類似這樣圖的板塊，在之前都是用純CSS代碼設置背景圖片的位置來實現的，比較麻煩的是要找到每個元素進行添加設置背景圖的位置。現在學習了JS的循環，可以用循環設置精靈圖的背景圖的位置了。但是有一個要求，就是這個精靈圖必須比較整齊，就是精靈圖裏面的圖片放的有規律可言，不然循環也是麻煩的。
主要技術點：循環、利用規律計算精靈圖位置(數學問題)
代碼代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sprite {
width: 350px;
margin: 200px auto;
;
}
li {
float: left;
list-style: none;
width: 24px;
height: 24px;
margin: 20px;
background-color: pink;
background: url('./images/sprite.png') no-repeat;
}
</style>
</head>
<body>
<div class="sprite">
<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>
// 讓每個li的背景爲精靈圖中的背景
// 這就使用到循環，遍歷ul中所有的li，改變li中的background-position
var lis = document.querySelector('.sprite').getElementsByTagName('li');
// console.log(lis.length); li的個數，進行遍歷，更改背景圖片的屬性
// 記錄y座標的值
var index = 0;
for (var i = 0; i < lis.length; i++) {
// 每一個當前的li
// x座標： 0
// y座標： 每一個li之間相差 44 px；
lis[i].style.backgroundPosition = '0 -' + index + 'px';
index += 44;
}
</script>
</body>
</html>
效果圖：
表格隔行換色
表格中隔行換色也是比較常見的，就是鼠標經過表格的行，行的背景顏色變化，鼠標移開變回原樣。
主要技術點：循環註冊事件、鼠標經過和移開事件
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格隔行換色</title>
<style>
table {
width: 800px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
thead tr {
line-height: 33px;
font-size: 16px;
background-color: skyblue;
}
tbody tr {
border-bottom: 1px solid gray;
font-size: 13px;
line-height: 33px;
color: blue;
}
.bg {
background-color: pink;
color: white;
cursor: default;
}
</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中的所有tr————————是一組事件集合，需要循環綁定註冊事件
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2.利用循環註冊綁定事件
for (var i = 0; i < trs.length; i++) {
// 鼠標經過， 背景顏色和字體顏色改變
trs[i].onmousemove = function () {
this.className = 'bg';
}
// 鼠標離開 變回原樣
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
</html>
效果圖：
排他思想——實現點擊按鈕事件
排他思想：當一組元素實現事件變化時，某一個元素對象點擊時，只能當前元素對象擁有變換。
最簡單的實例：有一組按鈕，點擊按鈕，按鈕背景變色。點擊另一個時，當前有變化，其餘按鈕沒有變化。
主要技術點：排他思想、循環註冊事件
用我的大白話總結一下：
排他思想
1. 先把一組元素對象遍歷一遍，去除你要添加的變化。(案例中，去除所有按鈕的背景色)
2. 再把當前元素對象的變換加上。(案例中爲當前循環中的按鈕添加背景色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
float: left;
width: 30px;
height: 30px;
border: 1px dotted rgb(179, 179, 179);
background: none;
box-shadow: 2px 3px 10px rgb(179, 179, 179);
margin: 100px 30px;
border-radius: 50%;
outline: none;
}
</style>
</head>
<body>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<script>
// 點擊按鈕時，按鈕背景顏色變pink
// 1.獲取事件源 所有的按鈕
var btn = document.getElementsByTagName('button');
for (var i = 0; i < btn.length; i++) {
// 2.註冊事件 程序處理
// 每一個按鈕被點擊的時候都觸發事件
btn[i].onclick = function () {
// 點擊當前任何一個按鈕，應該先循環所有的按鈕把樣式去掉
// 再設置當前按鈕的樣式
// 1.先遍歷所有按鈕，去掉樣式
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
// 2.設置當前按鈕的樣式
this.style.backgroundColor = ' rgb(216, 216, 216)';
}
}
</script>
</body>
</html>
效果圖：
用排他思想
沒有使用排他思想
今天的所有案例都結束了！！！
要記得回頭複習學過的知識，溫故而知新！！！！