本文详细介绍了JavaScript的基础知识，包括数据类型、字符串、数组、对象和严格检查模式。此外，还深入探讨了JavaScript的进阶应用，如表单验证、定时器、事件处理和DOM操作。通过实例代码展示了如何实现轮播图、广告弹窗和表单校验等功能，以及如何处理页面元素内容和实现复选框全选。最后，讲解了省市二级联动的实现原理，并对比了BOM和DOM的区别。
文章目录
一、JavaScript 入门
1.1、JavaScript概述
1.1.1、JavaScript是什么？有什么作用？
JavaScript是WEB上强大的脚本语言。
Java语言
标记语言（HTML ，xml）
Sql语言
脚本语言
脚本语言：
无法独立执行。必须嵌入到其他语言中，结合使用。（嵌入到HTML一起使用）
直接被浏览器解析执行，无需编译（浏览器内置有解析引擎）
扩展：JavaScript无法用来实现 厉害的木马或者病毒。
本质：是因为js无法单独执行或者操作我们的系统
作用：实现页面的动态效果， 校验验证信息
阿里巴巴：Ant Design
一个合格的后端开发人员，必须要精通JavaScript
1.2、快速入门
案例结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写Javascript代码-->
<!--<script>
alert("Hello")
</script>-->
<!--外部引入-->
<!--注意：script标签必须成对出现-->
<script src="js/javaScript.js">
</script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
<!--
<script>
alert('alert')
</script>-->
alert('你是个好人，被别人冤枉了')
运行显示为：
1.3 基本语法入门
先将IDEA中设置为ES6,如下所示：
浏览器必备调试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--javascript严格区分大小写-->
<script>
/*1.定义变量 变量类型 变量名 = 变量值*/
var score= 71;
/*2.条件控制*/
if(score >= 90 && score <= 100){
alert('优秀');
}else if(score >= 70 && score < 90 ){
alert('良好');
}else if(score >= 60){
alert('及格');
}else {
alert('other');
}
//console.log(score)在浏览器控制台打印变量！
</script>
</head>
<body>
</body>
</html>
运行结果显示为：
（1）变量
var 王者荣耀 = “倔强青铜”
（2）number
js不区分小数和整数，Number
- 123 //整数123
- 123.1 //浮点数123.1
- 1.123e3 //科学计数法
- -99 //负数
- NaN // not a number
- Infinity //表示无限大
（3）字符串
‘abc’ “abc”
（4）布尔值
true false
（5）逻辑运算符
&& 两个都为真，结果才为真
|| 一个为真，结果为为真
！ 真则假，假则真
（6）比较运算符
= 赋值
== 类型不一样，值一样，则为true
=== 类型一样，值一样，则为true
这是JS的一个缺陷，坚持不要使用==作比较
（7）NaN
NaN===NaN,这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN
避免使用浮点数进行运算，因为存在精度问题
（8）null 和 undefined
null 空
undefined未定义
（9）数组
Java的数值必须是相同类型的对象，JS中不需要这样！
// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,"Hello",null,true];
new Array(1,12,3,4,4,5,'Hello');
取数组下标，如果越界了，就会
undefined
（10）对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
//new Person(1,2,3,4,5);
var Person = {
name:"Daniel",
age:18,
tages :["java","python","c++"]
}
取对象的值
1.4 严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:IDEA 需要设置支持ES6语法
‘use strict’;严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用let 去定义
-->
<script>
'use strict'
let i = 1;
</script>
</head>
<body>
</body>
</html>
1.5 数据类型
1.5.1 字符串
（1）模板字符串
//tab 上面 esc键下面
let name = "Daniel";
let age = 3;
let msg = '你好呀，${name}'
（2）字符串长度
str.length
（3)大小写转换
//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()
（4)substring
1.5.2 数组
Array可以包含任意的数据类型
数组：存储数据（如何存，如何取，方法都可以自己实现！）
var arr = [1,2,3,4,5,7]
1.长度
arr.length
注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
2.indexOf，通过元素获得下标索引
arr.indexOf(2)
1
字符串的“1”和数字1是不同的
2.push(),pop()尾部
push:压入到尾部
pop:弹出尾部的一个元素
3.unshift(),shift()头部
unshift:压入到头部
shift:弹出头部的一个元素
4.排序sort()
(3)[“B”，“C”,“A”]
arr.sort()
(3)[“A”,“B”,“C”]
1.5.3 对象
若干个键值对
var 对象名 = {
属性名： 属性值，
属性名：属性值，
属性名：属性值
}
var Person ={
name:"Daniel",
age:3,
score:0
}
JS中对象，{……}表示要给对象，键值对描述属性xxxx:xxxx，多个属性之间使用都好隔开，最后一个属性不加逗号！
1.对象属性值
Person.name
'Daniel'
Person.age
3
Person.age
3
Person.score
0
Person.name= "Wendra"
'Wendra'
Person.age=00
0
2.使用一个不存在的对象属性，不会报错！undefined
Person.hahhah
undefined
3.动态的删减属性，通过delete删除对象的属性
Person
{name: 'Wendra', age: 0, score: 0}
delete Person.name
true
Person
{age: 0, score: 0}
4.动态的添加
Person
{age: 0, score: 0}
Person.name
undefined
Person.name = "Daniel"
'Daniel'
Person
{age: 0, score: 0, name: 'Daniel'}
二、JS 进阶
2.1 根据id选中某个元素
2.2 获取某个元素的value值
2.3 表单验证案例
2.3.1 素材：
（1）案例所需图片（自己随便放个或点我免费下载）：
（2）页面素材：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height:500px;
}
#divFormId{
border: 5px solid #999;
width: 550px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
#divbg{
background: url(/day07/img/regist_bg.jpg);
height:100%;
padding-top: 80px;
}
td{
padding-top: 10px;
}
</style>
<script>
</script>
</head>
<body>
<div id="divbg">
<div id="divFormId">
<form action="#" method="get">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" id="birthday" name="birthday" size="50"/> </td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td>
<td><img src="/day07/img/verifyCode.jpg" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="/day07/img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
（3）需求说明
用户在提交注册表单时，需要对用户的填写的数据进行校验。
如何校验:
1.校验用户名 密码 确认密码不能为空
2.校验密码与确认密码保持一致
如果校验成功,表单数据可以提交
如果检验失败,阻止表达提交 (onsubmit)
源码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height:500px;
}
#divFormId{
border: 5px solid #999;
width: 550px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
#divbg{
background: url(img/regist_bg_20190806_115335.jpg);
height:100%;
padding-top: 80px;
}
td{
padding-top: 10px;
}
</style>
<script>
function checkForm() {
var f1 = checkIsNot("username","用户名");
var f2 = checkIsNot("pwd","密码");
var f3 = checkIsNot("repwd","确认密码");
if(f2 & f3){
var f22 = document.getElementById("pwd").value;
var f33 = document.getElementById("repwd").value;
if(f22 != f33){
alert("两次密码不一致")
return false;
}
}
return f1 & f2 & f3;
}
var reg = /^\s*$/;
function checkIsNot(id,name) {
var ele = document.getElementById(id)
var st = ele.value;
if(reg.test(st)){
alert(name+"不能为空");
return false;
}
return true;
}
</script>
</head>
<body>
<div id="divbg">
<div id="divFormId">
<form action="#" method="get" onsubmit="return checkForm()">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" id="birthday" name="birthday" size="50"/> </td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td>
<td><img src="img/verifyCode.jpg" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
（4）变动：
案例结构：
- 首先添加form表单提交事件：
οnsubmit="return checkForm()"
2.编写验证的js代码
function checkForm() {
var f1 = checkIsNot("username","用户名");
var f2 = checkIsNot("pwd","密码");
var f3 = checkIsNot("repwd","确认密码");
if(f2 & f3){
var f22 = document.getElementById("pwd").value;
var f33 = document.getElementById("repwd").value;
if(f22 != f33){
alert("两次密码不一致")
return false;
}
}
return f1 & f2 & f3;
}
var reg = /^\s*$/;
function checkIsNot(id,name) {
var ele = document.getElementById(id)
var st = ele.value;
if(reg.test(st)){
alert(name+"不能为空");
return false;
}
return true;
}
（4）最终结果显示：
2.4 定时器
循环定时器的设置和取消
启动循环定时器-setInterval()
写法格式：setInterval(要执行的方法, 毫秒值) 1秒=1000毫秒;
循环定时器，调用一次就会创建并循环执行一个定时器。
停止循环定时器-clearInterval()
setInterval方法在创建一个定时器的同时，还会返回一个的定时器的ID，该ID就代表这个定时器。
此定时器ID在当前页面是不重复的。
我们可以通过clearInterval方法，指定某个循环定时器 停止
clearInterval(id);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var id;
function run2() {
id = setInterval("run1()",2000);
}
var count = 0;
function run1() {
alert("count"+count);
//当定时器等于6时，停止定时器
if(count == 6){
//清除定时器
clearInterval(id)
}
count++;
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="run2()">
</body>
</html>
显示效果：
2.4.1 一次性定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run2() {
setTimeout("run1()",2000);
}
var count = 0;
function run1() {
alert("count"+count);
//当定时器等于6时，停止定时器
/*if(count == 6){
//清除定时器
clearInterval(id)
}*/
count++;
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="run2()">
</body>
</html>
2.4.2 js事件-onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//方式一
function run() {
alert("页面加载完执行的事件1")
}
//方式二：常用
window.onload = function () {
alert("页面加载完执行的事件2")
}
</script>
</head>
<body onload="run()"> <!--当执行方式二的时候不需要onload="run()"-->
</body>
</html>
运行结果显示为：
2.4.3 轮播图的实现
（1）案例结构
（2）案例所需图片（自己随便放个或有需要的私信我，因为我这边是可以免费下载的）：
（3）先创建图片的id；
（4）编写js代码：
<script>
window.onload = function () {
setInterval("changeImg()",3000);
}
var count = 1;
function changeImg() {
var ele = document.getElementById("lbt");
ele.src = "img/"+(++count)+".jpg";
if ( count == 3){
count = 0;
}
}
</script>
（5）全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
setInterval("changeImg()",3000);
}
var count = 1;
function changeImg() {
var ele = document.getElementById("lbt");
ele.src = "img/"+(++count)+".jpg";
if ( count == 3){
count = 0;
}
}
</script>
</head>
<body>
<table width="100%">
<!-- 网站头部 图片 -->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="img/logo.png" />
</td>
<td>
<img src="img/header.png" />
</td>
<td>
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 网站黑色导航 -->
<tr>
<td>
<table width="100%" bgcolor="black">
<tr>
<td>
<a href=""><font color="white" size="5">首页</font></a>
<a href=""><font color="white" size="5">手机数码</font></a>
<a href=""><font color="white" size="5">电脑办公</font></a>
<a href=""><font color="white" size="5">家具家居</font></a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 网站大轮播图 -->
<tr>
<td>
<img src="img/1.jpg" width="100%" id="lbt"/>
</td>
</tr>
</table>
</body>
</html>
2.4.4 定时弹广告实现
（1）案例结构
（2）素材图片和上面一样
（3）编写js代码：
<script>
window.onload = function () {
setTimeout("showImg()",2000)
}
function showImg() {
var ele = document.getElementById("ad");
ele.className = "showImg";
setTimeout("hiddenImg()",2000);
}
function hiddenImg() {
var eles = document.getElementById("ad");
eles.className = "hiddenImg";
}
</script>
（4）全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hiddenImg{
display: none;
}
.showImg{
display: block;
}
</style>
<script>
window.onload = function () {
setTimeout("showImg()",2000)
}
function showImg() {
var ele = document.getElementById("ad");
ele.className = "showImg";
setTimeout("hiddenImg()",2000);
}
function hiddenImg() {
var eles = document.getElementById("ad");
eles.className = "hiddenImg";
}
</script>
</head>
<body>
<table width="100%">
<!-- 网站顶部广告-->
<tr>
<td>
<img id="ad" src="img/f001.jpg" width="100%" class="hiddenImg">
</td>
</tr>
<!-- 网站头部 图片 -->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="img/logo.png" />
</td>
<td>
<img src="img/header.png" />
</td>
<td>
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 网站黑色导航 -->
<tr>
<td>
<table width="100%" bgcolor="black">
<tr>
<td>
<a href=""><font color="white" size="5">首页</font></a>
<a href=""><font color="white" size="5">手机数码</font></a>
<a href=""><font color="white" size="5">电脑办公</font></a>
<a href=""><font color="white" size="5">家具家居</font></a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 网站大轮播图 -->
<tr>
<td>
<img src="img/1.jpg" width="100%"/>
</td>
</tr>
</table>
</body>
</html>
弹出广告显示：
2.5 完善注册表单校验
2.5.1 操作元素内容体-innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1() {
var ele = document.getElementById("aa");
alert(ele.innerHTML);
}
function run2() {
var els = document.getElementById("aa");
els.innerHTML = " <font color='#8a2be2'>暴强</font>";
}
</script>
</head>
<body>
<span id="aa">
<font color="red">暴强</font>
<input type="button" value="红色" onclick="run1()"><br />
<input type="button" value="蓝色" onclick="run2()"><br />
</span>
</body>
</html>
显示1：
显示二：
2.5.2 案例
（1）页面结构
（2）导入素材（代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height:500px;
}
#divFormId{
border: 5px solid #999;
width: 550px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
#divbg{
background: url(/day07/img/regist_bg.jpg);
height:100%;
padding-top: 80px;
}
td{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="divbg">
<div id="divFormId">
<form action="#" method="get" onsubmit="return checkForm()">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2">
<input type="text" id="username" name="username" size="50"/>
<span id="usernameMsg" class="errorMsg">必须填写</span>
</td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2">
<input type="password" id="pwd" name="pwd" size="50"/>
<span id="pwdMsg" class="errorMsg">必须填写</span>
</td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2">
<input type="password" id="repwd" name="repwd" size="50"/>
<span id="repwdMsg" class="errorMsg">必须填写</span>
</td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" id="birthday" name="birthday" size="50"/> </td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td>
<td><img src="/day29/img/verifyCode.jpg" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="/day29/img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
（3）编写js代码
<script>
function checkForm() {
document.getElementById("usernameMsg").innerHTML="";
document.getElementById("pwdMsg").innerHTML="";
document.getElementById("repwdMsg").innerHTML="";
var f1 = checkIsNot("username","用户名");
var f2 = checkIsNot("pwd","密码");
var f3 = checkIsNot("repwd","确认密码");
if(f2 && f3){
var f22 = document.getElementById("pwd").value;
var f33 = document.getElementById("repwd").value;
if(f22 != f33){
/*alert("两次密码不一致");*/
var repwdMsg = document.getElementById("repwdMsg");
repwdMsg.innerHTML = "<font color='red'>两次密码不一致</font>";
return false;
}
}
return f1 && f2 && f3;
}
var reg = /^\s*$/;
function checkIsNot(id,name) {
var ele = document.getElementById(id).value;
if(reg.test(ele)){
/*alert(name+"不能为空");*/
var use = document.getElementById(id+"Msg");
use.innerHTML = "<font color='red'>"+name+"必须填写</font>";
return false;
}
return true;
}
</script>
（4）完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height:500px;
}
#divFormId{
border: 5px solid #999;
width: 550px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
#divbg{
background: url(img/regist_bg_20190806_115335.jpg);
height:100%;
padding-top: 80px;
}
td{
padding-top: 10px;
}
</style>
<script>
function checkForm() {
document.getElementById("usernameMsg").innerHTML="";
document.getElementById("pwdMsg").innerHTML="";
document.getElementById("repwdMsg").innerHTML="";
var f1 = checkIsNot("username","用户名");
var f2 = checkIsNot("pwd","密码");
var f3 = checkIsNot("repwd","确认密码");
if(f2 && f3){
var f22 = document.getElementById("pwd").value;
var f33 = document.getElementById("repwd").value;
if(f22 != f33){
/*alert("两次密码不一致");*/
var repwdMsg = document.getElementById("repwdMsg");
repwdMsg.innerHTML = "<font color='red'>两次密码不一致</font>";
return false;
}
}
return f1 && f2 && f3;
}
var reg = /^\s*$/;
function checkIsNot(id,name) {
var ele = document.getElementById(id).value;
if(reg.test(ele)){
/*alert(name+"不能为空");*/
var use = document.getElementById(id+"Msg");
use.innerHTML = "<font color='red'>"+name+"必须填写</font>";
return false;
}
return true;
}
</script>
</head>
<body>
<div id="divbg">
<div id="divFormId">
<form action="#" method="get" onsubmit="return checkForm()">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2">
<input type="text" id="username" name="username" size="33"/>
<span id="usernameMsg" class="errorMsg"></span>
</td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2">
<input type="password" id="pwd" name="pwd" size="33"/>
<span id="pwdMsg" class="errorMsg"></span>
</td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2">
<input type="password" id="repwd" name="repwd" size="33"/>
<span id="repwdMsg" class="errorMsg"></span>
</td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="33"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="33"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" id="birthday" name="birthday" size="33"/> </td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td>
<td><img src="img/verifyCode.jpg" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
显示：
2.6 隔行换色案例
2.6.1 数组遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*第一种方式*/
/*var arr = [112,'a',"abcdd",12.12];
alert(arr.length)*/
/*第二种方式*/
/* var arr = new Array();
alert(arr.length)*/
/*第三种方式*/
/*var arr = new Array(4);
for (var i = 0; i < arr.length;i++) {
alert(arr[i]);
}
*/
var arr = new Array("abc",232,233,23,'a');
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
2.6.2 获取元素内容体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
<!--点击展示span内容体-->
/*function run1() {
//id获取内容体
/!*var run1 = document.getElementById("s1").innerHTML;
alert(run1);*!/
//标签获取内容体
var run2 = document.getElementsByTagName("span");
for (var i = 0; i < run2.length; i++) {
alert(run2[i]);
}
}*/
/*点击展示两个单选框的value*/
/*function run2() {
var run2 = document.getElementsByName("sex");
for (var i = 0; i < run2.length; i++) {
alert(run2[i].value);
}
}*/
/*点击展示三个div的内容体*/
/*function run3() {
var run3 = document.getElementsByTagName("div");
for (var i = 0; i < run3.length ; i++) {
alert(run3[i].innerHTML)
}
}*/
/*点击展示三个font的内容体*/
function run4() {
var run4 = document.getElementsByClassName("redF");
for (var i = 0; i < run4.length; i++) {
alert(run4[i].innerHTML)
}
}
</script>
</head>
<body>
<span id="s1">span1111</span>
<hr />
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
<hr />
<div>div1111</div>
<div>div2222</div>
<div>div3333</div>
<hr />
<font class="redF">红色字体1</font>
<font class="redF">红色字体2</font>
<font class="redF">红色字体3</font>
<br />
<input type="button" value="点击展示span内容体" onclick="run1()" />
<input type="button" value="点击展示两个单选框的value" onclick="run2()" />
<input type="button" value="点击展示三个div的内容体" onclick="run3()" />
<input type="button" value="点击展示三个font的内容体" onclick="run4()" />
</body>
</html>
显示
2.6.3 案例
（1）导入素材
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.blue{
background-color: lightskyblue;
}
</style>
<script>
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th></th>
<th>序号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
（2）编写js代码
<script>
window.onload = function () {
changeColor();
}
function changeColor() {
var arr = document.getElementsByTagName("tr");
for (var i = 1; i < arr.length; i++) {
if(i % 2 == 0){
arr[i].className = "blue";
}
}
}
</script>
（3）完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.blue{
background-color: #f57ffa;
}
</style>
<script>
window.onload = function () {
changeColor();
}
function changeColor() {
var arr = document.getElementsByTagName("tr");
for (var i = 1; i < arr.length; i++) {
if(i % 2 == 0){
arr[i].className = "blue";
}
}
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th></th>
<th>序号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
效果显示
2.7 复选框全选-全不选
（1）导入素材
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th>
<input type="button" value="全选" onclick=""/>
<input type="button" value="全不选" onclick=""/>
</th>
<th>序号</th>
<th>商品名称</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>1</td>
<td>手机数码</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>2</td>
<td>电脑办公</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>3</td>
<td>鞋靴箱包</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>4</td>
<td>家居饰品</td>
</tr>
</table>
</body>
</html>
（2）编写方法
（3）编写js代码
<script>
function quan() {
var quan = document.getElementsByClassName("itemSelect");
for (var i = 0; i < quan.length; i++) {
quan[i].checked = true;
}
}
function bu() {
var quan = document.getElementsByClassName("itemSelect");
for (var i = 0; i < quan.length; i++) {
quan[i].checked = false;
}
}
function fan() {
var quan = document.getElementsByClassName("itemSelect");
for (var i = 0; i < quan.length; i++) {
/* if( quan[i].checked){
quan[i].checked = false;
}else{
quan[i].checked = true;
}*/
quan[i].checked = !quan[i].checked;
}
}
</script>
（4）完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function quan() {
var quan = document.getElementsByClassName("itemSelect");
for (var i = 0; i < quan.length; i++) {
quan[i].checked = true;
}
}
function bu() {
var quan = document.getElementsByClassName("itemSelect");
for (var i = 0; i < quan.length; i++) {
quan[i].checked = false;
}
}
function fan() {
var quan = document.getElementsByClassName("itemSelect");
for (var i = 0; i < quan.length; i++) {
/* if( quan[i].checked){
quan[i].checked = false;
}else{
quan[i].checked = true;
}*/
quan[i].checked = !quan[i].checked;
}
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th>
<input type="button" value="全选" onclick="quan()"/>
<input type="button" value="全不选" onclick="bu()"/>
<input type="button" value="反选" onclick="fan()"/>
</th>
<th>序号</th>
<th>商品名称</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>1</td>
<td>手机数码</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>2</td>
<td>电脑办公</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>3</td>
<td>鞋靴箱包</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>4</td>
<td>家居饰品</td>
</tr>
</table>
</body>
</html>
显示效果：
2.8 省市二级联动
（1）导入案例素材
（2）需求分析
Onchange: 当值发生改变时触发这个事件
This:代表选中的元素对象
This.value: 代表选中的元素对象的值
（3）编写onchange方法
onchange="changeCity(this.value)"
（4）编写js代码
<script>
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀区","房山区","朝阳区");
cities[1] = new Array("长春市","吉林市","松原市","延边市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
function changeCity(obj) {
/*获得元素下标对应的市*/
var arr = cities[obj];
//alert(arr);
/*通过城市id来获得遍历城市*/
var city = document.getElementById("city");
city.innerHTML="<option value=''>----请-选-择-市----</option>";
for (var i = 0; i < arr.length; i++) {
//alert(arr[i]);
var temp ="<option value=''>"+arr[i]+"</option>";
city.innerHTML+=temp;
}
}
</script>
（5）完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀区","房山区","朝阳区");
cities[1] = new Array("长春市","吉林市","松原市","延边市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
function changeCity(obj) {
/*获得元素下标对应的市*/
var arr = cities[obj];
//alert(arr);
/*通过城市id来获得遍历城市*/
var city = document.getElementById("city");
city.innerHTML="<option value=''>----请-选-择-市----</option>";
for (var i = 0; i < arr.length; i++) {
//alert(arr[i]);
var temp ="<option value=''>"+arr[i]+"</option>";
city.innerHTML+=temp;
}
}
</script>
<body>
<select id="province" style="width:150px" onchange="changeCity(this.value)">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</body>
</html>
效果显示
2.9 BOM和DOM的区别
BOM包含DOM对象
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
