JS案例(Demo)
1:全選全不選
需求分析:
當點擊"全選/全不選"選框時,讓其他的複選框狀態和"全選/全不選"複選框的狀態保持一致.
技術分析:
點擊事件
操作複選框的checked屬性
步驟分析:
1:確定事件
給"全選/全不選"複選框添加點擊事件
2:編寫函數
a.獲取"全選/全不選"複選框的狀態(checked)
b.獲取其他複選框.並設置裝態(checked)
寫法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//設置全選/全不選
function selectAll() {
//1:獲取全選全不選標籤對象
var allObj= document.getElementById("all");
//2:獲取checked屬性
var checkObj=allObj.checked;
//3:獲取商品價格對象列表對象數組
var arrObj= document.getElementsByName("item");
//4:遍歷數組
for(var i=0;i<arrObj.length;i++){
//5:把全選全不選的值賦值到每個商品標籤上
arrObj[i].checked = checkObj;
}
}
//設置反選
function reverseSelect() {
//1:獲取商品價格對象列表對象數組
var arrObj= document.getElementsByName("item");
//2:遍歷數組
for(var i=0;i<arrObj.length;i++){
//5:把全選全不選的值取反賦值到每個商品標籤上
arrObj[i].checked = !arrObj[i].checked;
}
}
</script>
</head>
<body>
<h3>商品價格列表</h3>
<input type="checkbox" name="item" value="1500" /> 山地自行車1500<br />
<input type="checkbox" name="item" value="200" /> 時尚女裝200<br />
<input type="checkbox" name="item" value="3000" /> 筆記本電腦3000元<br />
<input type="checkbox" name="item" value="800" /> 情侶手錶800<br />
<input type="checkbox" name="item" value="2000" /> 桑塔納2000<br />
<hr/>
<input type="checkbox" id="all" onclick="selectAll()" />全選/全不選
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 選 "/>
</body>
</html>
寫法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//設置全選/全不選
function selectAll(obj) {
//3:獲取商品價格對象列表對象數組
var arrObj= document.getElementsByName("item");
//4:遍歷數組
for(var i=0;i<arrObj.length;i++){
//5:把全選全不選的值賦值到每個商品標籤上
arrObj[i].checked = obj;
}
}
//設置反選
function reverseSelect() {
//1:獲取商品價格對象列表對象數組
var arrObj= document.getElementsByName("item");
//2:遍歷數組
for(var i=0;i<arrObj.length;i++){
//5:把全選全不選的值取反賦值到每個商品標籤上
arrObj[i].checked = !arrObj[i].checked;
}
}
</script>
</head>
<body>
<h3>商品價格列表</h3>
<input type="checkbox" name="item" value="1500" /> 山地自行車1500<br />
<input type="checkbox" name="item" value="200" /> 時尚女裝200<br />
<input type="checkbox" name="item" value="3000" /> 筆記本電腦3000元<br />
<input type="checkbox" name="item" value="800" /> 情侶手錶800<br />
<input type="checkbox" name="item" value="2000" /> 桑塔納2000<br />
<hr/>
<!--this關鍵字代表當前標籤對象(寫在哪個標籤上代表哪個標籤對象)-->
<input type="checkbox" id="all" onclick="selectAll(this.checked)" />全選/全不選
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 選 "/>
</body>
</html>
2:省市二級聯動
需求分析
當省份的下拉選改變時,獲取選中的省份,查詢該省份所對應的是數 組,遍歷市數組拼成option插入到市的下拉選中
技術分析
改變事件:onchange
innertHtml
步驟分析
1:確定事件
給省份的下拉選添加onchange事件
2:編輯函數
function changePro(){
二維數組
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定義二維數組:
var arr = new Array(4);
arr[0] = new Array("哈爾濱","齊齊哈爾","大慶","佳木斯");
arr[1] = new Array("長春市","吉林市","四平市","通化市");
arr[2] = new Array("瀋陽市","錦州市","大連市","鐵嶺市");
arr[3] = new Array("鄭州市","洛陽市","安陽市","南陽市");
</script>
<script>
function changePro(val) {
//遍歷市數組
var optionStr = "<option>==請選擇==</option>";
for(var i=0;i<arr[val].length;i++){
//把每一個市拼接到option中
optionStr += "<option>" + arr[val][i] + "</option>";
}
//把option插入到市下拉選中
document.getElementById("city").innerHTML = optionStr;
}
</script>
</head>
<body>
<form action="#" method="get">
籍貫:
<select name="pro" onchange="changePro(this.value)">
<option>請選擇</option>
<option value="0">黑龍江</option>
<option value="1">吉林</option>
<option value="2">遼寧</option>
<option value="3">河南</option>
</select>
<select id="city">
<option >-請選擇-</option>
</select>
</form>
</body>
</html>
3:隔行換色
需求分析
頁面加載成功後,給表格的奇數行和偶數行添加不同的背景顏色
技術分析
onload
js操作css
步驟分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//表頭除外奇數行爲紅色,偶數行爲綠色
onload=function (ev) {
var trArrObj=document.getElementsByTagName("tr");
for(var i=1;i<trArrObj.length;i++) {
if(i%2==0){
//偶數行
trArrObj[i].style.backgroundColor = "green";
}else{
//奇數行
trArrObj[i].style.backgroundColor = "red";
}
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr style="background-color: #999999;">
<th>分類ID</th>
<th>分類名稱</th>
<th>分類描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手機數碼</td>
<td>手機數碼類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>2</td>
<td>電腦辦公</td>
<td>電腦辦公類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
</table>
</body>
</html>