JavaScript的應(yīng)用
一岖食、使用JS完成注冊(cè)頁面表單校驗(yàn)
1.需求分析
之前我們已經(jīng)使用彈出框的方式實(shí)現(xiàn)了表單校驗(yàn)的功能莹妒，但是此種方式用戶體驗(yàn)效果極差名船！
我們希望做成如下這種效果：
表單校驗(yàn).PNG
2.步驟分析
- 第一步：確定事件(onfocus 聚焦事件)并為其綁定一個(gè)函數(shù)
- 第二步： 書寫綁定函數(shù)(在輸入框的后面給出提示信息)
- 第三步： 確定事件(onblur 離焦事件)并為其綁定一個(gè)函數(shù)
- 第四步： 書寫函數(shù)(對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)， 分別給出提示)
3.代碼實(shí)現(xiàn)
Html 代碼：
<input type="text" name="user" size="34px" id="user"
onfocus="showTips('user',' 用戶名必填旨怠！')"
onblur="check('user',' 用戶名不能為空渠驼！')"/><span
id="userspan"></span>
JS 代碼：
<script>
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
//1.獲取用戶輸入的用戶名數(shù)據(jù)
var uValue = document.getElementById(id).value;
//2.進(jìn)行校驗(yàn)
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
二、使用JS完成表格的一個(gè)隔行換色
1.需求分析
我們希望在后臺(tái)頁面中實(shí)現(xiàn)一個(gè)隔行換色的效果顯示所有的用戶信息鉴腻，顯示效果如下：
隔行變色.png
2.技術(shù)分析
新標(biāo)簽的學(xué)習(xí)
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
確定事件(頁面加載事件onload)
獲取元素：獲取表格(document.getElementById()),最終是為了獲取表格中tbody里面的行數(shù)(長(zhǎng)度)迷扇。
Tbody里面的行數(shù)(rows.length)
JS的遍歷(for循環(huán))
獲取奇數(shù)行和偶數(shù)行(對(duì)遍歷中角標(biāo)對(duì)2取余)
設(shè)置背景顏色(.style.backgroundColor)
3.步驟分析
- 第一步：確定事件(onload)并為其綁定一個(gè)函數(shù)
- 第二步：書寫函數(shù)(獲取表格)
- 第三步：獲取tbody里面的行數(shù)
- 第四步：對(duì)tbody里面的行進(jìn)行遍歷
- 第五步：獲取奇數(shù)行和偶數(shù)行(角標(biāo)對(duì)2取余)
- 第六步：分別對(duì)奇數(shù)行和偶數(shù)行設(shè)置背景顏色
4.代碼實(shí)現(xiàn)
JS代碼：
<script>
window.onload = function(){
//1.獲取表格
var tblEle = document.getElementById("tbl");
//2.獲取表格中tbody里面的行數(shù)(長(zhǎng)度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.對(duì)tbody里面的行進(jìn)行遍歷
for(var i=0;i<len;i++){
if(i%2==0){
//4.對(duì)偶數(shù)行設(shè)置背景顏色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.對(duì)奇數(shù)行設(shè)置背景顏色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
html代碼：
給table里面添加一個(gè)id=“tbl”,在table里面添加新標(biāo)簽
<thead></thead>和<tbody></tbody>
三、使用JS完成表格的高亮顯示
分析：
- 第一步：確定事件(onmouseover和onmouseout)并分別為其綁定一個(gè) 函數(shù)
- 第二步：獲取鼠標(biāo)移上去的那行爽哎，對(duì)其設(shè)置背景顏色
JS代碼：
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor="red";
}else if(flag=="out"){
document.getElementById(id).style.backgroundColor="white";
}
}
</script>
html代碼：
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
<td>1</td>
<td>張三</td>
<td>22</td>
</tr>
四蜓席、使用JS完成全選和全不選操作
1、需求分析
我們希望在后臺(tái)系統(tǒng)實(shí)現(xiàn)一個(gè)批量刪除的操作(全選所有的復(fù)選框)课锌，顯示效果如下：
全選全不全.png
2厨内、技術(shù)分析
確定事件(鼠標(biāo)單擊事件onclick)，事件綁定到編號(hào)前面的復(fù)選框里面
獲取編號(hào)前面的復(fù)選框的狀態(tài)(是否選中)
獲取復(fù)選框：var checkAllEle = document.getElementById(“id”)
獲取復(fù)選框的狀態(tài)：checkAllEle.checked?
獲取下面所有的復(fù)選框：
document.getElementsByName(“name”);
3产镐、步驟分析
- 第一步：確定事件(onclick)并為其綁定一個(gè)函數(shù)
- 第二步：書寫函數(shù)(獲取編號(hào)前面的復(fù)選框隘庄，獲取其狀態(tài))
- 第三步：判斷編號(hào)前面復(fù)選框的狀態(tài)(如果為選中，獲取下面所有的復(fù)選框癣亚，并將其狀態(tài)置為選中)
- 第四步：判斷編號(hào)前面復(fù)選框的狀態(tài)(如果為未選中丑掺，獲取下面所有的復(fù)選框，并將其狀態(tài)置為未選中)
4述雾、代碼實(shí)現(xiàn)
JS代碼：
<script>
function checkAll(){
//1.獲取編號(hào)前面的復(fù)選框
var checkAllEle = document.getElementById("checkAll");
//2.對(duì)編號(hào)前面復(fù)選框的狀態(tài)進(jìn)行判斷
if(checkAllEle.checked==true){
//3.獲取下面所有的復(fù)選框
var checkOnes = document.getElementsByName("checkOne");
//4.對(duì)獲取的所有復(fù)選框進(jìn)行遍歷
for(var i=0;i<checkOnes.length;i++){
//5.拿到每一個(gè)復(fù)選框街州，并將其狀態(tài)置為選中
checkOnes[i].checked=true;
}
}else{
//6.獲取下面所有的復(fù)選框
var checkOnes = document.getElementsByName("checkOne");
//7.對(duì)獲取的所有復(fù)選框進(jìn)行遍歷
for(var i=0;i<checkOnes.length;i++){
//8.拿到每一個(gè)復(fù)選框兼丰，并將其狀態(tài)置為未選中
checkOnes[i].checked=false;
}
}
}
</script>
HTMl代碼：
復(fù)選框前面的：
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
下面所有的復(fù)選框：
<td><input type="checkbox" name="checkOne"/></td>
五、使用JS完成省市二級(jí)聯(lián)動(dòng)
1唆缴、需求分析
我們希望在注冊(cè)頁面中添加一個(gè)字段(籍貫)鳍征，當(dāng)用戶選擇一個(gè)具體的省份，在后面的下拉列表中動(dòng)態(tài)加載該省份下所有的城市面徽。顯示的效果如下：
省市聯(lián)動(dòng).png
2艳丛、技術(shù)分析
事件(onchange)
使用一個(gè)二維數(shù)組來存儲(chǔ)省份和城市(二維數(shù)組的創(chuàng)建)
獲取用戶選擇的省份(使用方法傳參的方式：this.value)
遍歷數(shù)組(獲取省份與用戶選擇的省份比較，如果相同了趟紊，繼續(xù)遍歷該省份下所有的城市)
創(chuàng)建文本節(jié)點(diǎn)和元素節(jié)點(diǎn)并進(jìn)行添加操作
createTextNode()
createElement()
appendChild()
3氮双、步驟分析
- 第一步：確定事件(onchange)并為其綁定一個(gè)函數(shù)
- 第二步：創(chuàng)建一個(gè)二維數(shù)組用于存儲(chǔ)省份和城市
- 第三步：獲取用戶選擇的省份
- 第四步：遍歷二維數(shù)組中的省份
- 第五步：將遍歷的省份與用戶選擇的省份比較
- 第六步：如果相同，遍歷該省份下所有的城市
- 第七步：創(chuàng)建城市文本節(jié)點(diǎn)
- 第八步：創(chuàng)建option元素節(jié)點(diǎn)
- 第九步：將城市文本節(jié)點(diǎn)添加到option元素節(jié)點(diǎn)中去
- 第十步：獲取第二個(gè)下拉列表霎匈，并將option元素節(jié)點(diǎn)添加進(jìn)去
- 第十一步：每次操作前清空第二個(gè)下拉列表的option內(nèi)容戴差。
4、代碼實(shí)現(xiàn)
JS代碼：
<script>
//1.創(chuàng)建一個(gè)二維數(shù)組用于存儲(chǔ)省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
cities[1] = new Array("長(zhǎng)沙市","郴州市","株洲市","岳陽市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
function changeCity(val){
//7.獲取第二個(gè)下拉列表
var cityEle = document.getElementById("city");
//9.清空第二個(gè)下拉列表的option內(nèi)容
cityEle.options.length=0;
//2.遍歷二維數(shù)組中的省份
for(var i=0;i<cities.length;i++){
//注意铛嘱，比較的是角標(biāo)
if(val==i){
//3.遍歷用戶選擇的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.創(chuàng)建城市的文本節(jié)點(diǎn)
var textNode = document.createTextNode(cities[i][j]);
//5.創(chuàng)建option元素節(jié)點(diǎn)
var opEle = document.createElement("option");
//6.將城市的文本節(jié)點(diǎn)添加到option元素節(jié)點(diǎn)
opEle.appendChild(textNode);
//8.將option元素節(jié)點(diǎn)添加到第二個(gè)下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
Html代碼：
<select onchange="changeCity(this.value)">
<option>--請(qǐng)選擇--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>