前言：本文中会通过几个案例，对JavaScript中常用的API进行学习。
案例一 对用户填写的数据进行校验
一、准备工作
首先要知道我们要执行哪些步骤 ？第一步，我们要确定要提交要用到的是哪个事件。显然我们这里要用到onsubmit事件，然后为其绑定一个函数（checkForm()）；第二步：如何获取用户输入的数据。知道了事件之后，就是要获取用户填写的数据了，要想获取填写的数据，就需要先获取对应的元素，这个在上一篇文章中有谈到过；第三步：对用户输入的数据要进行哪些判断。这个就是JavaScript的方法中要执行的具体操作了；第四步：根据数据是否合法给出相应的后续操作。
二、技术点补充
分析好我们要做的操作步骤之后，这边需要补充一些知识点。大家最不清楚的就是如何获取用户输入的数据，是吧。前面谈到，我们先要通过id找到对应的元素：document.getElementById(id); 再获取对应元素的值：document.getElementById(id).value; 然后先做简单的非空判断吧，与java不同的是，JavaScript中没有equals()方法，直接使用“==”来判断；好了，了解了这些时候，我们看看具体的代码实现吧：
首先我们有一个表单：
<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
用户名 <input type="text" name="user" size="34px" id="user"/>
</tr>
<tr>
密码 <input type="password" name="password" size="34px" id="password"/>
</tr>
<tr>
确认密码 <input type="password" name="repassword" size="34px" id="repassword"></input>
</tr>
</table>
</form>大家会好奇，为什么onsubmit事件绑定的checkForm()方法前面要加一个return，这里解释一下，onsubmit 事件一般用于表单提交的位置，添加return是因为定义函数的时候需要给你一个返回值，也是为了控制表单的提交。
<script>
function checkForm(){
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空!");
return false;
}
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空!");
return false;
}
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致!");
return false;
}
}
</script>案例二 利用图片切换来实现图片轮播
一、准备工作
一样的，我们先要分析好，要执行哪些步骤？第一步：要在什么事件中实现这个功能呢。前面是因为有用户输入，然后点击按钮提交表单数据时候才触发，而图片轮播一般是在页面加载完成的时候就要开始执行，所以这里需要用到的事件是onload()，然后为其绑定一个函数（changeImg());第二步：书写绑定的函数。
二、知识点补充
显然，图片的自动切换需要一个定时任务，这里补充讲解一下JavaScript中的定时任务 setInterval(function,time);这个方法的意思是定期（time）执行某种操作（function）
首先，我们有一个html页面：
<body οnlοad="init()">
<!--轮播图部分-->
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
<script>
function init()
{
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
}
//书写函数
var i=0
function changeImg()
{
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3)
{
i=0;
}
}
</script>html页面代码片段：
<body οnlοad="init()">
<img src="../img/1.jpg" width="100%" style="display: none" id="img"/>
</body>
<script type="text/javascript">
function init()
{
//1.设置显示图片的定时操作
time = setInterval("show()",3000);
}
//2.书写显示图片的函数
function show()
{
//3.获取广告图片的位置
var adEle = document.getElementById("img");
//4.修改图片元素里面的属性让其显示，block代表显示
adEle.style.display = "block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time = setInterval("hid()",3000);
}
//7.书写隐藏图片的函数
function hid()
{
//8.获取图片并设置其style属性的display值为none
document.getElementById("img").style.display= "none";
//9.清除隐藏图片的定时操作
clearInterval(time);
}
</script>案例三 实现表格隔行换色和鼠标经过的高亮显示
步骤分析这边就省略了，我们先要了解一下，在JavaScript中只有数组，没有java中的集合那些的数据结构。我们的思路就是，拿到表格中的所有行，遍历每一行，对单数行设置颜色一，对偶数行设置颜色二，直接贴上代码吧：
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tableid");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>html中的代码如下：
<table border="1" width="500" height="50" align="center">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr οnmοuseοver="changeColor('tr1','over')" id="tr1" οnmοuseοut="changeColor('tr1','out')">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr οnmοuseοver="changeColor('tr2','over')" id="tr2" οnmοuseοut="changeColor('tr2','out')">
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
</tbody>
</table>然后在JavaScript中具体实现的代码如下：
<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>案例四 实现复选框全选或者全不选
大家应该有这样的使用经历，就是在一个表格中有好多选项，要大家勾选，有时候我们很想全部够勾选，或者发现勾错了，又想初始成全都不选，然后表格中顶部标题行有一个复选框，用来让大家选择是否全部勾选，下面选框的状态会全部和这个的状态一致，这里我们来模仿实现这么一个功能。
先复习一下，复选框就是input的type设置为checkbox，其有一个属性checked代表该复选框的选中状态，然后就是还有一点，我们平时属性放在变量名接等号的后面，表示获取这个属性值，如果属性名放在等号前面，等号后面接 一个值表示给这个属性赋值；那么了解了这些之后，我们就可以实现这个功能了：
先看看html的布局：
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<th><input type="checkbox" οnclick="checkAll()" id="checkAll"/></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
</tbody>
</table>
<script>
function checkAll(){
//1.获取编号前面的复选框
var checkAllEle = document.getElementById("checkAll");
//2.对编号前面复选框的状态进行判断
if(checkAllEle.checked==true){
//3.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//4.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//5.拿到每一个复选框，并将其状态置为选中
checkOnes[i].checked=true;
}
}else{
//6.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//7.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//8.拿到每一个复选框，并将其状态置为未选中
checkOnes[i].checked=false;
}
}
}
</script>案例五 动态添加信息
动态添加信息，就是在原有的数据基础上，添加新的数据，比如在一个班级已有的学生中添加新的学生，这个功能需要一些新的知识点补充：前面提到，整个html文件都称作Document；所有的标签都称作元素（Element）,标签内部的设置称作属性（Attribute），标签的开始结尾之间放置的内容称作这个标签的Text;所有的Document、Element、Attribute、Text统称为（节点）Node；然后我们学习一下element对象的一些方法：
element.appendChild(); 添加一个子节点
element.firstChild(); 当前元素下面的第一个子节点
element.getAttribute(); 获取属性值
element.innerHTML(后面加等号就是设置，后面不加等号就是获取);
element.insertBefore(); 给当前元素前面追加兄弟元素
element.lastChild(); 获取当前元素下的最后一个子节点
element.setAttribute();给元素设置属性
还有两个很重要的：
创建文本节点： document.createTextNode();
创建元素节点： document.createElement();
<body>
<input type="button" value="添加新学生" id="btn"/>
<ul id="ul1">
<li>小红</li>
<li>小海</li>
<li>小明</li>
</ul>
</body>
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.获取ul元素节点
var ulEle = document.getElementById("ul1");
//2.创建学生文本节点
var textNode = document.createTextNode("小东");//这时候结果是： 小东
//3.创建li元素节点
var liEle = document.createElement("li");//这时候的结果是： <li></li>
//4.将学生文本节点添加到li元素节点中去
liEle.appendChild(textNode);//这时候的结果是： <li>小东</li>
//5.将li添加到ul中去
ulEle.appendChild(liEle);//这时候在列表的最后一项添加了 小东
}
}
</script>
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
