JS入门学习笔记
1. JS的开发步骤
2. 表格的隔行换色
3. 复选框的全选效果
4. 省市联动效果
5. 列表左右移动效果
1、JS的开发步骤
1. 确定事件
2. 事件要触发函数：定义函数
3. 函数通常要做一些交互：点击、修改图片、动态修改innerHTML属性……innerTEXT
2. 表格的隔行换色
-
获得所有的行
table.rows[]
-
修改行的颜色
rows.bgColor=“red”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格换色</title>
<script>
//表格隔行换色
function init(){
var ta = document.getElementById("tab");//获得表格
var row = ta.rows;//获得表格的行
for(var i=1;i<row.length;i++)//奇行与偶行不同颜色的实现
{
var rows = row[i];
if(i%2!=0){
rows.bgColor="lightcyan";
}else{
rows.bgColor="white";
}
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" align="center" id ="tab">
<tr align="center" bgcolor="skyblue">
<td>
全选<input type="checkbox" />
</td>
<td>id</td>
<td>名称</td>
<td>商品</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr align="center">
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>华为，苹果、魅族</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
<tr align="center">
<td>
<input type="checkbox"/>
</td>
<td>2</td>
<td>香烟酒水</td>
<td>商品</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
<tr align="center">
<td>
<input type="checkbox"/>
</td>
<td>3</td>
<td>生活用品</td>
<td>桌子、牙膏</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
<tr align="center">
<td>
<input type="checkbox"/>
</td>
<td>4</td>
<td>天猫超市</td>
<td>水果、食品</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
<tr align="center">
<td>
<input type="checkbox"/>
</td>
<td>5</td>
<td>衣装服饰</td>
<td>裙子、裤子、套装</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
</table>
</body>
</html>
3. 复选框的全选效果
check属性
获取所有的复选框：
document.getElementByName()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格换色</title>
<script>
//表格是否全选
function checkall(){
var check = document.getElementById("check1");
var check1 = check.checked;//获取第一个复选框的状态
// var all = document.getElementsByTagName("input");
var all = document.getElementsByName("checkone");//获取name为checkone的复选框
for(var i=0;i<all.length;i++)
{
var checkone = all[i];
checkone.checked=check1;//将每个的状态修改为和第一个一样
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" align="center" id ="tab">
<tr align="center" bgcolor="skyblue">
<td>
全选<input type="checkbox" onclick='checkall()' id='check1' />
</td>
<td>id</td>
<td>名称</td>
<td>商品</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" name='checkone'/>
</td>
<td>1</td>
<td>手机数码</td>
<td>华为，苹果、魅族</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" name='checkone'/>
</td>
<td>2</td>
<td>香烟酒水</td>
<td>商品</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" name='checkone'/>
</td>
<td>3</td>
<td>生活用品</td>
<td>桌子、牙膏</td>
<td>各有优点</td>
<td>
<a href="#">修改 </a>/<a href="#"> 删除</a>
</td>
</tr>
</table>
</body>
</html>
4. 省市联动效果
JS的数组：[城市]
DOM操作：
- 创建节点：document.createElement()
- 创建文本节点：document.createTextNode()
- 添加节点：appendChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script>
//准备事件，省份数组
var provinces=[
["广州市","深圳市","惠州市","湛江市"],//0
["长沙市","张家界市","岳阳市","邵阳市"],//1
["厦门市","福州市","漳州市","泉州市"]//2
];
//省份选择事件
function selectprovince(){
//获取当前省份的信息
var province = document.getElementById("province").value;
//对应省份数组的值
var city = provinces[province];
//获取当前城市信息
var cityselect = document.getElementById("city");
//每次动态获取后都清空一次
cityselect.options.length=0;
for(var i=0;i<city.length;i++){
var citytext = city[i];
//创建省份元素节点
var option1 = document.createElement("option");
//创建城市文本
var textnode = document.createTextNode(citytext);
//省份与城市进行关联
option1.appendChild(textnode);
//添加到城市文本内容
cityselect.appendChild(option1);
}
}
</script>
</head>
<body>
<select onchange="selectprovince()" id="province">//选择省份
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<select id ='city'>//选择城市
<option>--请选择--</option>
</select>
</body>
</html>
5. 列表左右移动效果
- select：下拉列表
- multiple ：允许多选
- ondblclick：双击事件
- for循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//将左边的一个一个移动到右边
function leftselectone(){
var leftone = document.getElementById("leftone");
var optionss = leftone.options;
var rightone = document.getElementById("rightone");
for(var i=0;i<optionss.length;i++)
{
var option1 = optionss[i];
//如果被选中就移动
if(option1.selected){
rightone.appendChild(option1);
}
}
}
//将左边的全部移过去右边
function leftselectall(){
var leftone = document.getElementById("leftone");
var options = leftone.options;
var rightone = document.getElementById("rightone");
for(var i=options.length-1;i>=0;i--){
//全部移动
var option1 = options[i];
rightone.appendChild(option1);
}
}
//右边的操作与左边类似，有兴趣的自己去敲敲
</script>
</head>
<body>
<table border="1px" align="center" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td> <input type="text" value="手机数码应有尽有，快来抢购吧！" /> </td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
<font color="chartreuse" size="2">已有商品</font><br />
<select multiple="multiple" id="leftone" ondblclick="leftselectone()">
<option>华为</option>
<option>苹果</option>
<option>魅族</option>
<option>三星</option>
<option>小米</option>
<option>联想</option>
</select>
<br />
<a href="#" onclick="leftselectone()">>></a><br />
<a href="#" onclick="leftselectall()">>>></a><br />
</div>
<!--右边-->
<div style="float: right;" >
<font color="red" size="2">未有商品</font><br />
<select multiple="multiple" id="rightone">
<option>vivo</option>
<option>红米</option>
<option>诺基亚</option>
<option>老人机</option>
<option>大米</option>
</select>
<br />
<a href="#"><<</a><br />
<a href="#"><<<</a><br />
</div>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" /></td>
</tr>
</table>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
