JS的经常使用操做

时间 2019-12-17

标签经常使用栏目 JavaScript 繁體版

原文原文链接

1、使用 JS 完成注册表单数据校验

1.需求分析javascript

用户在进行注册的时候会输入一些内容，可是有些用户会输入一些不合法的内容，这样会致使服务器的压力过大，此时咱们须要对用户输入的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。php

2.技术分析html

2.1 javasscript 的介绍前端

Java 与 javascript 有什么区别？java

它们没有关系，雷锋和雷峰塔的关系。node

2.2 javascript 的做用？正则表达式

HTML：它是整个网站的骨架。数组

CSS：它是对整个网站骨架的内容进行美化(修饰)浏览器

Javascript：它可以让整个页面具备动态效果。缓存

2.3 javascript 的组成部分

ECMAScript:它是整个javascript 的核心，包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)

DOM：文档对象模型，包含(整个 html 页面的内容)、

BOM：浏览器对象模型,包含(整个浏览器相关内容)

2.4 javascript 语法

区分大小写

变量是弱类型的(String str=”aaa” ,var str=”123”;)

每行结尾的分号无关紧要(建议你们写上)

注释与 java、php 等语言相同。

2.5javascript 的变量

变量能够不用声明，变量是弱类型。统一使用 var 来定义！定义变量的时候不要使用关键字和保留字。

2.6 javascript 数据类型

Javascript 数据类型分为原始数据类型和引用数据类型

原始数据类型：

string、number、boolean、null、undefined

引用数据类型：

2.7 javascript 运算符

其它运算符与 java 大致一致，须要注意其等性运算符。

== 它在作比较的时候会进行自动转换。

=== 它在作比较的时候不会进行自动转换。

2.8 javascript 语句

全部语句与 java 大致一致。

2.9 获取元素内容

获取元素

document.getElementById(“id 名称”);

获取元素里面的值

document.getElementById(“id 名称”).value;

批注 [ThinkPad1]: 若是 id 是一个字符串，那么必须

加上引号，若是是一个变量那么不须要。

2.10 javascript 事件

表单提交事件：onsubmit

2.11 javascripte 的输出

警告框：alert();

向页面指定位置写入内容：innerHTML(属性)

向页面写入内容：document.write(“”);

3.步骤分析

第一步：肯定事件(onsubmit)并为其绑定一个函数

第二步：书写这个函数(获取用户输入的数据<获取数据时须要在指定位置定义一个 id>)

第三步：对用户输入的数据进行判断

第四步：数据合法(让表单提交)

第五步：数据非法(给出错误提示信息，不让表单提交)

问题：如何控制表单提交？

关于事件 onsubmit：通常用于表单提交的位置，那么须要在定义函数的时候给出一个返回值。 onsubmit = return checkForm() 4.代码实现 JS 代码：

<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>
Html 部分：
<form  action="#"  method="get"  name="regForm"
onsubmit="return checkForm()">

须要在指定位置添加 id

2、使用 JS 完成首页轮播图效果案例

1.需求分析

咱们但愿在首页完成对轮播图的效果实现：

2.技术分析

获取元素 document.getElementById(“id 名称”)

事件(onload)

定时操做：setInterval(“changeImg()”,3000);

3.步骤分析

第一步：肯定事件(onload)并为其绑定一个函数

第二步：书写绑定的这个函数

第三步：书写定时任务(setInterval)

第四步：书写定时任务里面的函数

第五步：经过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

4.代码实现 JS 代码：

<script>
function init(){
**//在循环的时候须要注意到了最后一张图片的时候要重置。**

//书写轮图片显示的定时操做
setInterval("changeImg()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/small0"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
Html：
<body onload="init()">

在指定位置定义 id。

三、使用 JS 完成页面定时弹出广告

1.需求分析

咱们但愿在首页中的顶部作一个定时弹出广告图片。其实现效果以下：

2.技术分析

获取图片的位置(document.getElementById(“”))

隐藏图片：display：none

定时操做：setInterval(“显示图片的函数”，3000);

3.步骤分析

第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)

第二步：肯定事件(onload)并为其绑定一个函数

第三步：书写这个函数(设置一个显示图片的定时操做)

第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)

第五步：清除显示图片的定时操做()

第六步：书写隐藏图片的定时操做

第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)

第八步：清除隐藏图片的定时操做()

4.代码实现

<script>
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>
Html 代码：
<body onload="init()">
<!--定时弹出广告图片位置-->
<img  src="../img/f001a62f-a49d-4a4d-b56f-
2b6908a0002c_g.jpg" width="100%" style="display: none"
id="img2"/>

四.基础总结

5.1 javascript 的引入方式

内部引入方式

直接将 javascript 代码写到

<script type=”text/javascript”></script>

外部引入方式

须要建立一个.js文件，在里面书写javascript代码，而后在html文件中经过script

标签的 src 属性引入该外部的 js 文件

5.2 BOM 对象

BOM 对象：浏览器对象模型(操做与浏览器相关的内容)

** Window 对象**

Window 对象表示浏览器中打开的窗口。

setInterval():它有一个返回值，主要是提供给 clearInterval 使用。

setTimeout():它有一个返回值，主要是提供给 clearTimeout 使用。

clearInterval():该方法只能清除由 setInterval 设置的定时操做

clearTimeout():该方法只能清除由 setTimeout 设置的定时操做

弹出框的几个方法：

<script>
//警告框
//alert("aaa");
//确认按钮
//confirm("您确认删除吗？");
//提示输入框
prompt("请输入价格：");
</script>
</head>

** Location 对象**

Location 对象包含有关当前 URL 的信息。

href:该属性能够完成经过 JS 代码控制页面的跳转。

<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script>
function tiao(){
window.location.href="http://www.itcast.cn";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">跳转到首页</a>
</body>
</html>

** History 对象**

History 对象包含用户（在浏览器窗口中）访问过的 URL。

历史页面：使用 location 页面(把 href 属性值改成当前的 history)

History 页面代码：

go(参数)

参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历史记录页面。

让按钮点击失效：onclick=”javascript:volid(0)”

** Navigator 对象**

Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么经常使用)

** Screen 对象**

Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么经常使用)

五、使用 JS 完成注册页面表单校验

JS的事件

1.需求分析

以前咱们已经使用弹出框的方式实现了表单校验的功能，可是此种方式用户体验效果极差！

咱们但愿作成以下这种效果：

2.技术分析

3.步骤分析

第一步：肯定事件(onfocus 聚焦事件)并为其绑定一个函数

第二步：书写绑定函数(在输入框的后面给出提示信息)

第三步：肯定事件(onblur 离焦事件)并为其绑定一个函数

第四步：书写函数(对数据进行校验，分别给出提示)

4.代码实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册校验</title>
<script type="text/javascript">
	//聚焦事件
	function checkfocus(id,message){
		document.getElementById(id).innerHTML="<font color='gray'>"+message+"</font>";
	}
	
	 //失焦事件
	function chekBlur(id,message){
		var uValue=document.getElementById(id).value;
		if(uValue==""){
			document.getElementById(id+"span").innerHTML="<font color='red'>"+message+"</font>";
		}else{
			document.getElementById(id+"span").innerHTML="";
		} 
	}
</script>
</head>
<body>
	<form action="#" method="post">
		用户名：<input type="text" name="username" id="user" onfocus="checkfocus('userspan','用户名必填')" onblur="chekBlur('user','用户名不能为空')"/><span id="userspan"></span><br>
		密码:<input type="password" name="pwd" /><br>
		确认密码：<input type="password" name="pwd2" /><br>
		邮箱：<input type="text" name="emial"/><br>
		<input type="submit" value="注册"/>
	</form>
	<a href="${pageContext.request.contextPath }/hello.jsp">跳转到你好页面</a>
	<input type="button" value="下一个页面" onclick="lestPage()">
	<script type="text/javascript">
		function lestPage(){
			//window.history.forward();
			window.history.go(1);
		}
	</script>
</body>
</html>

6、使用JS完成表格的一个隔行换色

1.需求分析咱们但愿在后台页面中实现一个隔行换色的效果显示全部的用户信息，显示效果以下：

2.技术分析新标签的学习

<thead>
		<tr>
			<th></th>
</tr>
</thead>
	<tbody>
		<tr>
			<td></td>
</tr>
</tbody>

肯定事件(页面加载事件onload)

获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

Tbody里面的行数(rows.length)

JS的遍历(for循环)

获取奇数行和偶数行(对遍历中角标对2取余)

设置背景颜色(.style.backgroundColor)

3.步骤分析

第一步：肯定事件(onload)并为其绑定一个函数

第二步：书写函数(获取表格)

第三步：获取tbody里面的行数

第四步：对tbody里面的行进行遍历

第五步：获取奇数行和偶数行(角标对2取余)

第六步：分别对奇数行和偶数行设置背景颜色

4.代码实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格隔行换色</title>
<script type="text/javascript">
	window.onload=function(){
		//1 先获取表格
		var tabEle=document.getElementById("tbl");
		//2 获取表格里面table里面的行数（长度）tBodies[0]表示一个tbody
		var tbodylen=tabEle.tBodies[0].rows.length;
		//对table里面的行进行遍历
		for(var i=0;i<tbodylen;i++){
			if(i%2==0){
				tabEle.tBodies[0].rows[i].style.backgroundColor="pink";
			}else{
				tabEle.tBodies[0].rows[i].style.backgroundColor="gold";
			}
		}
	}
</script>
</head>
<body>
	<table width="500px" align="center" border="1px" id="tbl">
		<thead>
			<tr>
				<td>编号</td>
				<td>用户名</td>
				<td>密码</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>123456</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>123456</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>123456</td>
			</tr>
			<tr>
				<td>4</td>
				<td>小6</td>
				<td>123456</td>
			</tr>
			<tr>
				<td>5</td>
				<td>田七</td>
				<td>123456</td>
			</tr>
			<tr>
				<td>6</td>
				<td>王二麻子</td>
				<td>123456</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

HTML代码：

给table里面添加一个id=“tbl”,在table里面添加新标签<thead></thead>和<tbody></tbody>、

5.实现一个表格的高亮显示

为了增强对事件的学习，添加此案例：

分析：

第一步：肯定事件(onmouseover和onmouseout)并分别为其绑定一个函数

第二步：获取鼠标移上去的那行，对其设置背景颜色

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格高亮显示</title>
<script type="text/javascript">
	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 width="500px" align="center" border="1px" >
		<thead>
			<tr>
				<td>编号</td>
				<td>用户名</td>
				<td>密码</td>
			</tr>
		</thead>
		<tbody>
			<tr onmousemove="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
				<td>1</td>
				<td>张三</td>
				<td>123456</td>
			</tr>
			<tr onmousemove="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
				<td>2</td>
				<td>李四</td>
				<td>123456</td>
			</tr>
			<tr onmousemove="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
				<td>3</td>
				<td>王五</td>
				<td>123456</td>
			</tr>
			<tr onmousemove="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
				<td>4</td>
				<td>小6</td>
				<td>123456</td>
			</tr>
			<tr onmousemove="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
				<td>5</td>
				<td>田七</td>
				<td>123456</td>
			</tr>
			<tr onmousemove="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
				<td>6</td>
				<td>王二麻子</td>
				<td>123456</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

6.总结：

回顾以前已经使用过的事件(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。

onclick/ondblclick:鼠标单击和双击事件

onkeydown/onkeypress：搜索引擎使用较多

onload：页面加载事件，全部的其它操做(匿名方式)均可以放到这个绑定的函数里面去。若是是有名称，那么在html页面中只能写一个。

onmouseover/onmouseout/onmousemove：购物网站商品详情页。

onsubmit：表单提交事件，有返回值，控制表单是否提交。

onchange:当用户改变内容的时候使用这个事件(二级联动)

7、使用JS完成全选和选不选操做

1.需求分析

咱们但愿在后台系统实现一个批量删除的操做(全选全部的复选框)

2.技术分析

肯定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面

获取编号前面的复选框的状态(是否选中)

获取复选框：var checkAllEle = document.getElementById(“id”)

获取复选框的状态：checkAllEle.checked?

获取下面全部的复选框：

document.getElementsByName(“name”);

3.步骤分析

第一步：肯定事件(onclick)并为其绑定一个函数

第二步：书写函数(获取编号前面的复选框，获取其状态)

第三步：判断编号前面复选框的状态(若是为选中，获取下面全部的复选框，并将其状态置为选中)

第四步：判断编号前面复选框的状态(若是为未选中，获取下面全部的复选框，并将其状态置为未选中)

4.代码实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>复选框的使用</title>
<script type="text/javascript">
	function checkAll(){
		//1 先获取checkAll该元素
		var checkAllEle = document.getElementById("checkAll");
		//2 判断复选框的状态
		if(checkAllEle.checked==true){
			//3 获取全部复选框的名字
			var checkEles=document.getElementsByName("checkOne");
			//4 遍历复选框 设置复选框的状态为选中
			for(var i=0;i<checkEles.length;i++){
				checkEles[i].checked=true;
			}
		}else{
			//5 获取全部选中的全部复选框的名字
			var checkEles=document.getElementsByName("checkOne");
			//6 遍历复选框，设置复选框的状态为选中
			for(var i=0;i<checkEles.length;i++){
				checkEles[i].checked=false;
			}
		}
	}
</script>
</head>
<body>
	<table width="500px" align="center" border="1px" >
		<thead>
			<tr>
				<td><input type="checkbox"  onclick="checkAll()" id="checkAll"/></td>
				<td>编号</td>
				<td>用户名</td>
				<td>密码</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td> <input type="checkbox" name="checkOne" ></td>
				<td>1</td>
				<td>张三</td>
				<td>123456</td>
			</tr>
			<tr >
				<td> <input type="checkbox" name="checkOne" ></td>
				<td>2</td>
				<td>李四</td>
				<td>123456</td>
			</tr>
			<tr >
				<td> <input type="checkbox" name="checkOne" ></td>
				<td>3</td>
				<td>王五</td>
				<td>123456</td>
			</tr>
			<tr >
				<td> <input type="checkbox" name="checkOne" ></td>
				<td>4</td>
				<td>小6</td>
				<td>123456</td>
			</tr>
			<tr >
				<td> <input type="checkbox" name="checkOne" ></td>
				<td>5</td>
				<td>田七</td>
				<td>123456</td>
			</tr>
			<tr >
				<td> <input type="checkbox" name="checkOne" ></td>
				<td>6</td>
				<td>王二麻子</td>
				<td>123456</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

5.总结 5.1 javascript的DOM操做

Document:整个html文件都成为一个document文档

Element:全部的标签都是Element元素

Attribute：标签里面的属性

Text：标签中间夹着的内容为text文本

Node:document、element、attribute、text统称为节点node.

Document对象

每一个载入浏览器的 HTML 文档都会成为 Document 对象。

后面两个方法获取以后须要遍历！

如下两个方法很重要，可是在手册中查不到！

建立文本节点：document.createTextNode()

建立元素节点：document.createElement()

Element对象

咱们所认知的html页面中全部的标签都是element元素

element.appendChild() 向元素添加新的子节点，做为最后一个子节点。

element.firstChild 返回元素的首个子节点。

element.getAttribute() 返回元素节点的指定属性值。

element.innerHTML 设置或返回元素的内容。

element.insertBefore() 在指定的已有的子节点以前插入新节点。

element.lastChild 返回元素的最后一个子元素。

element.setAttribute() 把指定属性设置或更改成指定值。

element.removeChild() 从元素中移除子节点。

element.replaceChild() 替换元素中的子节点。

Attribute对象

咱们所认知的html页面中全部标签里面的属性都是attribute

5.2 DOM练习

在页面中使用列表显示一些城市

text

咱们但愿点击一个按钮实现动态添加城市。

分析：事件(onclick)

获取ul元素节点

建立一个城市的文本节点

建立一个li元素节点

将文本节点添加到li元素节点中去。

使用element里面的方法appendChild()来添加子节点

代码： JS代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function addEle(){
		//1 先获取ul元素节点
		var ulEle=document.getElementById("ul1");
		//2 建立文本节点
		var text=window.prompt("请输出城市名称");//动态但愿用户能够输入城市名称
		var textNode=document.createTextNode(text);//深圳
		//3 建立属性节点
		var elementNode=document.createElement("li");//<li></li>
		
		//4 吧文本节点添加到元素节点中去
		 elementNode.appendChild(textNode);
		
		//5 吧元素节点添加到ul中去
		ulEle.appendChild(elementNode);
	}
</script>
</head>
<body>
	<input type="button"  value="添加节点" id="buttonEle" onclick="addEle()">
	<ul id="ul1">
		<li>上海</li>
		<li>北京</li>
		<li>合肥</li>
	</ul>
</body>
</html>

8、使用JS完成省市二级联动

1.需求分析

咱们但愿在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下全部的城市。显示的效果以下：

2.技术分析

事件(onchange)

使用一个二维数组来存储省份和城市(二维数组的建立？)

获取用户选择的省份(使用方法传参的方式：this.value)

遍历数组(获取省份与用户选择的省份比较，若是相同了，继续遍历该省份下全部的城市)

建立文本节点和元素节点并进行添加操做

createTextNode()

createElement()

appendChild()

3.步骤分析

第一步：肯定事件(onchange)并为其绑定一个函数

第二步：建立一个二维数组用于存储省份和城市

第三步：获取用户选择的省份

第四步：遍历二维数组中的省份

第五步：将遍历的省份与用户选择的省份比较

第六步：若是相同，遍历该省份下全部的城市

第七步：建立城市文本节点

第八步：建立option元素节点

第九步：将城市文本节点添加到option元素节点中去

第十步：获取第二个下拉列表，并将option元素节点添加进去

第十一步：每次操做前清空第二个下拉列表的option内容。

4.代码实现 JS代码：

<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>

Html代码：
<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>

九 .DOM总结

5.1 javascript内置对象

Array对象

数组的建立：

数组的特色：长度可变！ 数组的长度=最大角标+1

Boolean对象 对象建立：

若是value 不写，那么默认建立的结果为false

Date对象

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

_解决浏览器缓存问题

Math和number对象

与java里面的基本一致。

String对象

match() 找到一个或多个正则表达式的匹配。

substr() 从起始索引号提取字符串中指定数目的字符。

substring() 提取字符串中两个指定的索引号之间的字符。

例子：

<script>
	var str = "-a-b-c-d-e-f-";
	var str1 = str.substr(2,4);//-b-c
	//alert(str1);
	
	var str2 = str.substring(2,4);//-b
	alert(str2);
</script>

RegExp对象

正则表达式对象

test 检索字符串中指定的值。返回 true 或 false。

5.2 全局函数

全局属性和函数可用于全部内建的 JavaScript 对象

关于编码和解码的一组方法：

<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>
``

JS的经常使用操做

1、使用 JS 完成注册表单数据校验

2、使用 JS 完成首页轮播图效果案例

三 、使用 JS 完成页面定时弹出广告

四.基础总结

五 、使用 JS 完成注册页面表单校验

6、使用JS完成表格的一个隔行换色

7、使用JS完成全选和选不选操做

8、使用JS完成省市二级联动

九 .DOM总结

三、使用 JS 完成页面定时弹出广告

五、使用 JS 完成注册页面表单校验