首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS的常用操作

JS的常用操作

作者头像
用户5927264
发布2019-07-31 18:32:29
8K0
发布2019-07-31 18:32:29
举报
文章被收录于专栏:OSChinaOSChina

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

1.需求分析

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

2.技术分析

2.1 javasscript 的介绍

Java 与 javascript 有什么区别?

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

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

二、使用 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.kk="http://www.itcast.cn";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">跳转到首页</a>
</body>
</html>

** History 对象**

输入图片说明
输入图片说明

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

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

History 页面代码:

<input type="button" value=" 返 回 上 一 个 页 面 " onclick="javascript:history.back()"/>

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>

六、使用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:当用户改变内容的时候使用这个事件(二级联动)

七、使用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>

八、使用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>
``
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 二、使用 JS 完成首页轮播图效果案例
  • 三 、使用 JS 完成页面定时弹出广告
  • 四.基础总结
  • 五 、使用 JS 完成注册页面表单校验
  • 六、使用JS完成表格的一个隔行换色
  • 七、使用JS完成全选和选不选操作
  • 八、使用JS完成省市二级联动
  • 九 .DOM总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档