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>
