目录
一. JavaScript 概述
二. 基本语法
三. 案例及相关知识
一. JavaScript 概述
1.1 JavaScript简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。是一种轻量级的编程语言。可插入 HTML 页面的编程代码。插入 HTML 页面后,可由所有的现代浏览器执行。它是一种解释型语言,代码执行时不进行预编译。
JavaScript的组成:
ECMAScript核心,描述了该语言的语法、变量、关键字、保留字、数据类型、语句、函数、和基本对象等等
DOM 浏览器对象模型,描述了处理网页内容的方法和接口,包含整个HTML页面的内容
BOM 文档对象模型,操作文档中的元素和内容,描述了与浏览器进行交互的方法和接口,包含整个浏览器的内容。
1.2. JavaScript作用
使用JavaScript添加页面动态效果,提供用户操作体验。主要应用有:嵌入动态文本于HTML页面、对浏览器事件作出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
HTML ,它是整个网站的骨架,好比一个素颜女人。
CSS ,对整个网站骨架中的内容进行修饰,好比一个化了妆打扮得漂漂亮亮的美女。
JavaScript,它能够使整个网站页面具有动态效果,好比一个化了妆打扮得漂漂亮亮的美女在翩翩起舞。注意,JS是使页面显示的内容有了动态效果,但它不属于动态页面的概念。动态页面,是指能够实时地从后台获取数据并展现在浏览器前端的页面。
Javascript与Java的关系:两者没有联系,好比雷锋和雷锋塔
1.3 JavaScript的引入
日常开发中JavaScript的编辑工具,建议使用 HBuilder
在HTML文件中引入JS的方式有两种:内嵌式和外联式
内嵌式:在HTML文档中,通过<script></script>标签,直接嵌入javascript脚本。代码如下:
<script type="text/javascript">
//此处为JavaScript代码
</script>
外联式:在HTML文档中,通过<script src="">标签,链接外部javascript脚本。代码如下:
<script src="1.js" type="text/javascript" charset="utf-8">
//上面的1.js为JavaScript文件
</script>
小案例,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
</html>
二. 基本语法
2.1 变量
区分大小写。是弱类型,如果没有给变量赋值,这个变量是不属于任何类型的,默认为undefined。如果一个变量前面没有加var则它是一个全局变量,如果加了var则它是一个局部变量。
2.2 数据类型
Undefined表示变量没有定义,而null表示变量根本不存在。
2.3 运算符
== 会尝试着将字符串类型转换成数字类型,而=== 不具备此功能。在JS中没有Java中有的equal()方法。
2.4 基本操作
三. 案例及相关知识
下面结合各个不同的具体例子来进一步了解JavaScript的相关知识
3.1 使用JS完成简单的数据检验
案例一,使用JS完成简单的数据检验,注册表的的校验。用户进行注册的时候,会输入一些内容,如果有些内容的输入不合法,会增加服务器的压力,我们需要对用户输入的信息进行校验(校验包括前端校验和后台校验,其中前端的校验防君子不防小人)。在本例中只对用户名、密码、确认密码、邮件 4个项进行了校验,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据。如果Id是个字符串必须加引号,如果是个变量而不必加引号。
var uValue = document.getElementById("user").value;
//alert(uValue);
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;
}
/*校验邮箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
3.1.1 案例分析:
实现此功能,JavaScript的常规操作步骤为:
这里绑定函数的位置应该在表单处<form>标签里面,而不是在注册按钮处
获取元素:document.getElementById("user"); 返回为一个object类型的数据。并在所要获取内容的元素处加上id属性。
获取元素里面的值:document.getElementById("user").value; 返回的是与这个内容一致的数据
onsubmit 事件,有返回值。
判断内容为空使用的是 ==“”,双引号里面的内容什么也没有。而不能使用== null。
3.1.2 相关的知识:
JS中正则匹配的方式有两种:使用String对象中的match()方法,使用正则对象中的test()方法。
JS中的函数编写方式为:
JS的输出:
警告框: alert( )
向页面指定位置写入内容: innerHTML(属性)
向页面写入内容: document.write("");
3.2 使用JS完成图片轮播效果
案例二,使用JS完成图片轮播效果:
1.)当点击按钮的时候页面中就显示出下一张图片。
2.)不做操作的时候,每隔2 秒,页面自动显示下一张图片。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
div{
border: 1px solid white;
width:500px ;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
//点击按钮,触发事件,调用方法,显示下一张图片
var i=1;
function changeImg(){
i++;
document.getElementById("img1").src="../../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//每个3秒,触发事件,调用方法,自动显示下一张图片
function init(){
window.setInterval("changeImg2()",2000);
}
var m=1;
function changeImg2(){
m++;
document.getElementById("img1").src="../../img/"+m+".jpg";
if(m==3){
m=0;
}
}
</script>
</head>
<body onload="init()">
<div>
<input type="button" value="下一张" onclick="changeImg()"/>
<img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>
3.2.1 案例分析:
实现此功能,JavaScript的常规操作步骤为:
onload事件在一个HTML文档中只能出现一次。在实现此案例的效果时,要在<body>里面通过onload事件来绑定init()方法。开启计时器,每隔2000毫秒重新设置图片的src 属性。
在实现轮播图效果的时候,所引用的图片的名字必须包含一定顺序的数字。使用的循环方式,是通过触发事件的形式来实现的。触发一次事件调用一次方法,执行一次循环。当到了最后一张图片的时候需要进行重置。
3.2.2 相关的知识:
定时器 setInterval(多次反复执行)
在《w3school离线手册》中,点击 JavaScript ==> JS简介 ==> JavaScript实现 ==> JS参考手册下的JavaScript对象 ==> Window ==> setInterval
3.3 使用JS完成页面定时弹出广告
案例三,使用JS完成页面定时弹出广告。
我们平时浏览网页的时候会自动弹出一个广告,过了一小会广告又自动消失了。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 0px solid red;
width: 1300px;
height: 2170px;
margin: auto;
}
</style>
<script type="text/javascript">
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
//1.设置显示广告图片的定时操作
time = setInterval("showAd()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle = document.getElementById("img2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display = "block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display= "none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>
</head>
<body onload="init()">
<div id="father">
<!--定时弹出广告图片位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
<!--正常显示的logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px"/>
</div>
<div class="top">
<img src="../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
</div>
</body>
</html>
3.3.1 案例分析:
实现此功能,JavaScript的常规操作步骤为:
3.3.2 相关的知识:
定时器的回调函数并不是相当于在时间到了就执行,而是有一个主JS执行进程,这个进程是页面刚加载的时候页面按照加载顺序执行的JS代码,此外还有一个需要在进程空闲的时候执行的代码队列,而我们所说的定时器的回调就是相当于在**ms之后把定时器回调放入到空闲队列中(注意,空闲队列有可能还有其它的代码,比如点击事件,因此定时器回调放入的位置不一定是空闲队列的开始位置!)。简单的可以理解位定时器和JS其他程序是并行执行的。setInterval有个很烦的地方就是当JS主程序空闲时候,执行代码队列里面的代码的时候,如果此时候我们有一个问题,定时器是等到回调执行完,才开始计时进行下次循环呢?还是只要一次计时完毕,插入回调之后不管回调执不执行就开始计时呢?答案显然是后者,当我们插入回调的
settimeout和setinterval的区别:
1) setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。
2) setTimeout方法不会每隔**秒钟就执行一次showTime函数,它是在每次调用setTimeout后过**秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要1秒钟执行完,那么整个函数则要每(**+1)秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。
JavaScript获得或修改样式
3.4 使用JS完成表单校验
案例四,案例一中当点击注册的时候如果输入不符合就马上弹出框,用户体验不好,需要完善。
代码如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<!--<script> 这部分是之前案例一中没有完善的代码
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
//alert(uValue);
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;
}
/*校验邮箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
</script>-->
<script>
/*function showTips(){ 这部分是完善过的,但是没有实现方法的重复利用
document.getElementById("userspan").innerHTML="<font color='gray'>用户名必填!</font>";
}
function checkUser(){
//1.获取用户输入的用户名数据
var uValue = document.getElementById("user").value;
//2.进行校验
if(uValue==""){
document.getElementById("userspan").innerHTML="<font color='red'>用户名不能为空!</font>";
}else{
document.getElementById("userspan").innerHTML="";
}
}*/
/*这部分进行了完善,且方法实现了代码的重复利用*/
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
//1.获取用户输入的用户名数据
var uValue = document.getElementById(id).value;
//2.进行校验
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--页面中其它内容部分-->
<tr>
<td>
</td>
</tr>
<!-- 注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填!')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
3.4.1 案例分析
实现此功能,JavaScript的常规操作步骤为:
3.4.2 相关的知识
3.5 对表格数据进行隔行操作
开发中,需要使用表格陈列数据,数据过多时不易查看,通常使用隔行换色进行表示
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//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>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
3.5.1 案例分析
实现此功能,JavaScript的常规操作步骤为:
3.5.2 相关的知识
如下表格,当鼠标移动到所对应的行时,行变为红色,移开是恢复白色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<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>
</head>
<body>
<table border="1" width="500" height="50" align="center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
3.6 对表中的各行进行全选和全不选操作
在开发中,经常需要对数据进行“批量处理”,这种情况下要快速地对列表项进行操作。当选中第二行中前面的复选框时,下面所有的复选框都被选中;当不选中第二行中的复选框时,后面所有的复选框都处于未选中状态。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选</title>
<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>
</head>
<body>
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" onclick="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>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
3.6.1 案例分析
实现此功能,JavaScript的常规操作步骤为:
3.6.2 相关的知识
Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute:标签里面的属性
Text:标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node
Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
后面两个方法获取之后需要遍历!
以下两个方法很重要,但是在手册中查不到!
创建文本节点:document.createTextNode()
创建元素节点:document.createElement()
Element对象
我们所认知的html页面中所有的标签都是element元素
Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<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>
</head>
<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
3.7 省市二级联动
我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市。
代码如如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面重新布局</title>
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//7.获取第二个下拉列表
var cityEle = document.getElementById("city");
//9.清空第二个下拉列表的option内容
cityEle.options.length=0;
//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意,比较的是角标
if(val==i){
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素节点
var opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
</head>
<body>
<div>
<!--注册表单部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位!')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
</div>
</body>
</html>
3.7.1 案例分析
实现此功能,JavaScript的常规操作步骤为:
第一步:确定事件(onchange)并为其绑定一个函数
第二步:创建一个二维数组用于存储省份和城市
第三步:获取用户选择的省份
第四步:遍历二维数组中的省份
第五步:将遍历的省份与用户选择的省份比较
第六步:如果相同,遍历该省份下所有的城市
第七步:创建城市文本节点
第八步:创建option元素节点
第九步:将城市文本节点添加到option元素节点中去
第十步:获取第二个下拉列表,并将option元素节点添加进去
第十一步:每次操作前清空第二个下拉列表的option内容。
事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建?)
获取用户选择的省份(使用方法传参的方式:this.value)
遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()
3.7.2 相关的知识
<script>
var str = "张三";
//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
//alert(decodeURI(encodeURI(str)));//张三
//alert(decodeURIComponent(encodeURIComponent(str)));//张三
var str1 = "http://www.itheima.cn";
//alert(encodeURI(str1));//http://www.itheima.cn
//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
var str2 = "alert('abc')";
//alert(str2);
eval(str2);
</script>
----------------------------------------------------------- 我是低调的分隔线 -----------------------------------------------------------
吾欲之南海,一瓶一钵足矣...