Javascript高级+小案例

最新推荐文章于 2023-02-19 22:12:05 发布

acacac.

最新推荐文章于 2023-02-19 22:12:05 发布

阅读量2.9k

点赞数 2

分类专栏：笔记文章标签： javascript html5 css

本文链接：https://blog.csdn.net/qq_45638271/article/details/124099161

版权

笔记专栏收录该内容

32 篇文章 3 订阅

订阅专栏

BOM：Windows对象

目标

掌握Windows对象的基本使用

路径

BOM介绍
Window对象

BOM介绍

BOM是Browser Object Model的缩写，简称浏览器对象模型，是将使用的浏览器抽象成对象模型。

简单理解：把整个浏览器当做一个对象来处理。

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

Screen对象， Screen 对象中存放着有关显示浏览器屏幕的信息。
Navigator对象，包含的属性描述了正在使用的浏览器(当前浏览器的相关信息)。
Window对象（重点），Window对象表示一个浏览器窗口或一个框架。
History对象（了解），其实就是来保存浏览器历史记录信息。
Location对象（重点），Location 对象是 Window 对象的一个部分。

我们重点学习3个对象：Window 、History、 Location

Window对象：表示浏览器整个窗口。就是上述空白的地方，不包括工具栏和地址栏。
History对象：表示浏览器中的向后和向前的左右箭头。
Location对象：表示浏览器中的地址栏。

补充说明：

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。简单来讲就是都可以使用window对象来调用。
例如：上述history和location对象都可以使用window对象来调用。
     window.history   
     window.location

Window对象

BOM的核心对象是window，它表示浏览器的一个实例(正在运行的浏览器程序)。

Window对象此处学习它的三个作用：

弹框的方法
定时器方法
全局方法

弹框的方法

生活场景：

当我们在进行付款的时候，支付窗口通常都会弹出一个框，询问我们是否确认付款。这样一个弹窗非常有必要，这样可以防止用户的误操作。
在删除某个数据的时候，为了防止误删的时候，都会弹出一个提示框，询问是否确认删除该数据。

window对象的弹框方法	作用
alert(“提示信息”)	弹出一个带有确认按钮的信息框
String prompt(“提示信息”,“默认值”)	弹出一个输入信息框，返回输入框中的内容(字符串类型)
boolean confirm(“提示信息”)	弹出一个信息框，有确定和取消按钮。如果点确定，返回true，点取消返回false

注：只要是window的方法和属性，window对象名都可以省略

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 * 确认框：confirm(提示信息)
			 * 返回值：
			 * true：点击了确认按钮
			 * false：点击了取消按钮
			 */
			/*var result = window.confirm("确认要删除这条数据吗？");
			if(result)
			{
                // window.alert('确认删除');可以省略window
				alert('确认删除');
			}else{
				alert('取消删除');
			}*/
			/*
			 * 输入框：prompt("提示信息","默认值");
			 * 点击确定：返回值是输入框中输入的内容
			 * 点击取消：返回值是null
			 */
			var result2 = window.prompt("请输入姓名","张三");
			console.log(result2);
		</script>
	</body>
</html>

定时器方法

window对象的定时器：

window对象的定时器方法	作用
setTimeout(函数名 ,间隔毫秒数)	在指定的时间后调用1次函数，只执行1次，单位是毫秒。返回值：返回一个整数类型的计时器。函数调用有两种写法： 1) setTimeout(“函数名(参数)”, 1000); //推荐此方式 2) setTimeout(函数名,1000, 参数); //注意方式二：没有引号，没有括号
setInterval(函数名 , 间隔毫秒数)	每过指定的时间调用1次函数，不停的调用函数，单位是毫秒。返回值：返回一个整数类型的计时器
clearInterval(计时器)	清除setInterval()方法创建的计时器
clearTimeout(计时器)	清除setTimeout创建的计时器

setTimeout(js代码/函数 , 毫秒值);    //执行一次的定时器
参数:
    函数：定义一个有名函数,传递函数名字;或者使用匿名函数
    毫秒值：设置定时器的时间,在指定的时间结束之后,会执行传递的函数
返回值:
    返回的是定时器的id值（定时器对象）, 可以用于取消定时器使用
示例：
    var 定时器的id值(定时器对象) = window.setTimeout( function(){} , 2000 )


clearTimeout(定时器的id值); 取消执行一次的定时器

全局函数

转换函数	作用
parseInt()	将一个字符串转成整数，如果一个字符串包含非数字字符，那么parseInt函数会从首字母开始取数字字符，一旦发现非数字字符，马上停止获取内容。
parseFloat()	将一个字符串转成小数，转换原理同上。
isNaN()	转换前判断被转换的字符串是否是一个数字，非数字返回true

参考代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内置函数：转换函数</title>
    </head>
    <body>
        <script>
            var a = "123abc123"; //字符串类型
            var i = parseInt(a);
            document.write(i + "<br/>");//结果：123

            var b = "3.14abc123";
            i = parseFloat(b);
            document.write(i+ "<br/>");

            //判断字符串是否为纯数字字符组成
            var age = "1012";
            document.write(isNaN(age)); //不是一个数字字符， 返回true.
        </script>
    </body>
</html>

BOM：Location对象

目标

了解Location对象的基本使用

路径

Location对象的介绍
案例：使用Location跳转页面

Location对象

Location：代表浏览器的地址栏对象

Location常用的属性

属性	作用
href	1、获得当前地址栏访问的地址 2、用于页面的跳转，跳转到一个新的页面

location常用的方法

location的方法	描述
reload()	重新加载当前的页面，相当于浏览器上的刷新按钮

案例：使用Location对象跳转页面

参考代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>location对象</title>
    </head>
    <body>
        <input type="button" value="跳转到传智" onclick="test()" />
        <script type="text/javascript">
            //获得属性
            //document.write("获得href属性：" + location.href + "<br/>");
            //设置属性
            function test () {
                location.href = "http://www.itcast.cn";
            }
        </script>
    </body>
</html>

BOM：History对象

目标

了解History对象

路径

history对象的介绍

history对象

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

History对象常用方法：

方法	说明	参数说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面	go(-1)：访问上一个页面 go(1)：访问下一个页面

说明：

对于go()函数既可以后退又可以前进。但是必须给参数。

举例：

go(1) 前进一步 go(2) 前进2步。。。。。

go(-1) 后退一步 go(-2) 后退2步。。。。

DOM：概述

目标

了解DOM对象模型

路径

DOM对象模型

DOM对象模型

DOM（Document Object Model）即文档对象模型。定义访问和操作结构化文档(HTML)的方式

文档： html
对象： document对象

document对象：当网页被加载时，浏览器会创建页面的文档对象模型

document对象中包含了整个页面中所有的元素，包括：HTML 、注释、 js等

document对象的作用：访问和操作html文档中的元素

HTML DOM 将整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员

小结
每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树，我们通过编写JS代码就可以访问这棵树上任何一个节点，并且对节点进行操作。通过 DOM模型，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。新创建的元素对象，要挂到DOM树上才可以在网页上显示出来。

DOM：操作标签属性

目标

掌握使用document操作标签属性的方式

路径

操作标签属性的方法介绍
新增元素对象
删除元素对象

操作标签属性的方法

标签属性的操作：

属性名	描述
element.getAttribute(属性的名称);	根据标签的属性的名字来获取属性的值
element.setAttribute(属性的名称, 值);	给标签设置一个属性
element.removeAttribute(属性的名称);	根据标签的属性的名字来删除属性
element.children;	获取当前元素（标签）的子元素注意：获取的子级（一层），不管嵌套(不包括孙子，只包括儿子)
element.nodeName/tagName;	获取标签名注意：获取的是大写的字符串的标签名
element.innerHTML;	获取当前元素（标签）的文本内容哈哈

说明：

1）上述element表示具体的元素或者标签。例如：div、p标签等。

2）我们也会将标签叫做节点。

练习一：

<input type="text" name="username" id="txt" value="java" />

需求1：获取属性 name的值
需求2: 给文本框设置一个属性 hello, 值是world
需求3：删除属性 value

代码实现：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		练习一：
		<input type="text" name="username" id="txt" value="java" />
		<!--
			需求1：获取属性 name的值
			需求2: 给文本框设置一个属性 hello, 值是world
			需求3：删除属性 value
		 -->
		 <script type="text/javascript">
		 	//需求1：获取属性 name的值
		 	//获取input标签
		 	var oName=document.getElementById('txt');
		 	var username=oName.getAttribute('name');
		 	console.log(username);//username
			// 需求2: 给文本框设置一个属性 hello, 值是world
			oName.setAttribute('hello','world');
			//获取设置的属性hello的值
			console.log(oName.getAttribute('hello'));//world
			// 需求3：删除属性 value
			oName.removeAttribute('value');
		 </script>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CfIssQ3U-1649659933047)(imgs/3-1575514945509.bmp)]

练习二：

<div id="div">我是div</div>

需求一：获取标签体的内容
需求二：设置标签体的内容

<b>我是加粗的</b>

代码示例(标签体的内容)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div">我是div</div>
		<!--
			需求一：获取标签体的内容
			需求二：设置标签体的内容：<b>我是加粗的</b>
		-->
		<script type="text/javascript">
			// 获取div标签
			var oDiv = document.getElementById('div');
			// 需求一：获取标签体的内容 
			// innerHTML 区分字母大小写
//			console.log(oDiv.innerHTML);
			// 需求二：设置标签体的内容：<b>我是加粗的</b>
			//说明innerHTML既可以获取文本内容也可以修改文本内容
//			oDiv.innerHTML='div的内容被修改了';
//			console.log(oDiv.innerHTML);
			// 设置标签体的内容：<b>我是加粗的</b>
			oDiv.innerHTML='<b>我是加粗的</b>';
			console.log(oDiv.innerHTML);
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9n2jIUx-1649659933050)(imgs/4-1575514945510.bmp)]

练习三：

<ul id="ul1">
	<li>aaa
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
	</li>
	<li>bbb</li>
</ul>

需求一：获取ID为ul1的所有的子级
需求二：获取ID为ul1下面第一个li的标签名和内容

代码示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul id="ul1">
			<li>aaa
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</li>
			<li>bbb</li>
		</ul>
		<!--
			需求一：获取ul的所有的子级
			需求二：获取ID为ul1下面第一个li的标签名和内容
		-->
		<script type="text/javascript">
			// 获取ul标签
			var oUl=document.getElementById('ul1');
			//使用children属性获取ul的所有子集
			console.log(oUl.children);
			//输出数组长度
			console.log(oUl.children.length);//2
			//需求二：获取id为ul1下面第一个li的标签名和内容
			console.log(oUl.children[0].nodeName);//获取标签名 'LI' 大写的
			/*
			 *  aaa
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			 */
			console.log(oUl.children[0].innerHTML);//获取标签内容
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DYSqUJA3-1649659933050)(imgs/5-1575514945510.bmp)]

小结

操作标签元素的属性：
- 添加新属性 : setAttribute(“属性名”, “属性值”)
- 获取属性值： var 属性值 = getAttribute(“属性名”)
- 删除属性： removeAttribute(“属性名”)
- 获取元素中的内容： innerText、 innerHTML
  - innerText：仅对标签元素中的文件内容进行获取或修改
  - innerHTML：可以对标签元素中的所有内容(含子标签)进行修改或获取
- 获取元素的下一级子元素： children
  - 只能获取一层子级元素（不包含子子级）
- 获取元素的名称： nodeName 、tagName

DOM：操作标签元素

目标

掌握使用document操作标签元素的方式

路径

获取元素对象
新增元素对象
删除元素对象

获取元素对象

获取元素对象的方式：

方法名	描述
getElementById(id名称)	通过元素（标签）的id属性值获取标签对象，返回的是单个的标签对象注意：只能从document下面去获取
getElementsByName(name属性名称)	通过元素（标签）的name属性值获取标签对象，返回的是标签对象的数组。注意：只能从document下面去获取
getElementsByTagName(标签名)	通过元素（标签）的名称获取标签的对象,返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取
getElementsByClassName(类名)	通过元素（标签）的class属性获取标签对象，返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取

练习一：

<div class="red">div1</div>
<div>div2</div>
<div class="red">div3</div>

<p>p1</p>
<p class="red">p2</p>
<p>p3</p>

<form action="#">
    用户名：<input type="text" name="username" value="suoge"/>
    密码： <input type="password" name="password" value="123"/>
    性别：<input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" />女
    <input type="submit" value="提交" />
</form>

需求1：让页面上所有div字体颜色变蓝色
需求2：让页面上所有class为red的元素背景色变红色
需求3：获取页面上name为 username 和 gender的元素，并输出其value属性的值

代码示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--练习一：-->
		<div class="red">div1</div>
		<div>div2</div>
		<div class="red">div3</div>

		<p>p1</p>
		<p class="red">p2</p>
		<p>p3</p>

		<form action="#">
			用户名：<input type="text" name="username" value="suoge"/> 
			密码： <input type="password" name="password" value="123"/> 
			性别：
			<input type="radio" name="gender" value="male" />男
			<input type="radio" name="gender" value="female" />女
			<input type="submit" value="提交" />
		</form>
		<!--需求1：让页面上所有div字体颜色变蓝色 
		需求2：让页面上所有class为red的元素背景色变红色 
		需求3： 获取页面上name为 username 和 gender的元素，并输出其value属性的值-->
		<script type="text/javascript">
			//需求1：让页面上所有div字体颜色变蓝色 
			//获取所有的div标签 获取之后是一个数组
			var aDiv = document.getElementsByTagName('div');
			//遍历数组
			for(var i=0;i < aDiv.length;i++)
			{
				aDiv[i].style.color='blue';
			}
			//需求2：让页面上所有class为red的元素背景色变红色 
			//获取所有的class为red的标签
			var aRed = document.getElementsByClassName('red');
			//遍历数组
			for(var i=0;i<aRed.length;i++)
			{
				aRed[i].style.backgroundColor='red';
			}
			//需求3： 获取页面上name为 username 和 gender的元素，并输出其value属性的值
			//确定页面只有一个name是username的标签可以按照如下方式书写，获取的是input标签
//			var oUsername = document.getElementsByName('username')[0];
			var aUsername = document.getElementsByName('username');
			console.log(aUsername[0].value);
//			console.log(oUsername.value);//根据input标签获取value值
			//获取name是gender的标签
			var aGender = document.getElementsByName('gender');
			console.log(aGender[0].value);
			console.log(aGender[1].value);
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImCKqtda-1649659956450)(imgs/6-1575514945510.bmp)]

新增元素对象

方法名	描述
document.createElement(元素名称)	在页面上根据标签名来创建元素，返回创建的标签（元素）对象注意：只能从document下面去创建元素
parentNode.appendChild(要添加的元素对象)	在某一个父级元素（标签)下面去添加一个元素，每次添加到父级元素的最后面，相当于一个追加的操作
parentNode.insertBefore(要添加的元素对象，在谁的前面添加)	在某一个父级元素（标签)下面去添加一个元素，可以指定在哪一个子元素（标签）的前面添加

练习二：

<ul>
	<li>bbb</li>
</ul>

需求1：创建一个li添加到ul的最后面
需求2：再次添加一个li要求添加到ul的第一个位置

代码示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--练习二：-->
		<ul>
			<li>bbb</li>
		</ul>
		<!--需求1： 创建一个li添加到ul的最后面 
		     需求2： 再次添加一个li要求添加到ul的第一个位置
		-->
		<script type="text/javascript">
			//需求1： 创建一个li添加到ul的最后面 
			//创建li标签
			var oLi = document.createElement('li');
			//给li标签添加文本
			oLi.innerHTML='ccc';
			//将li标签添加到ul的最后面
			//获取ul标签 
			/*
			 * 在一个页面中无论书写多少个body标签，最后浏览器读取的时候
			 * 都会将所有的内容放到一个body标签中。所以我们可以根据
			 * document对象直接调用body标签来获取body标签。
			 * document.body.children[0] 表示获取body标签的第一个孩子
			 */
			var oUl = document.body.children[0];
			//将上述的li标签添加到ul标签的最后面
			oUl.appendChild(oLi);
			// 需求2： 再次添加一个li要求添加到ul的第一个位置
			//创建li标签
			var oLi2 = document.createElement('li');
			//给li标签添加文本
			oLi2.innerHTML='aaa';
			// 再次添加一个li要求添加到ul的第一个位置
			//父级.insertBefore(要添加的元素，在谁前面添加);
			oUl.insertBefore(oLi2,oUl.children[0]);
		</script>
	</body>
</html>

说明：

在一个页面中无论书写多少个body标签，最后浏览器读取的时候都会将所有的内容放到一个body标签中。所以我们可以根据document对象直接调用body标签来获取body标签。

document.body.children[0] 表示获取body标签的第一个孩子。

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnJ8HU5q-1649659956452)(imgs/7-1575514945510.bmp)]

删除元素对象

方法名	描述
element.remove()	删除当前的元素（标签）掌握
parentNode.removeChild(要删除的子元素)	通过父级元素（标签）删除子元素（标签）

练习三：

<ul>
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
</ul>

需求：删除第一个li标签。

代码示例如下所示：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--练习三：-->

		<ul>
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
		</ul>
		<!--需求：删除第一个li标签。-->
		<script type="text/javascript">
			//方式一：直接删除element.remove();
//			document.getElementsByTagName('li')[0].remove();
			//方式二：父级标签.removeChild(子级标签名)
			//获取父级标签ul
			var oUl = document.body.children[0];
			//oUl.children[0] 表示ul的第一个li标签
			oUl.removeChild(oUl.children[0]);
		</script>
	</body>
</html>

JS内置对象：Array

目标

掌握Array对象的基本应用

路径

Array对象的创建方式
数组的特点
获取数组中的元素
数组中的常用方法
字符串的比较规则
案例：数组的基本使用

内置对象就是指这个语言自带的一些对象，用来供开发者使用，这些对象提供了一些常用的基本功能。

拿Java语言举例：

Java中Object、 String、 System属于内置对象，而自己书写的Person、 Student属于自定义的对象

JavaScript中也有一些内置对象：Array、Date、String等

Array代表的是数组对象，属于JS中是一个内置对象

Array对象的创建方式

创建数组的方式	说明
var arr =new Array(); var arr = []; √	创建长度为0的数组
var arr =new Array(n)	创建一个指定长度的数组，长度为n. 举例：var arr = new Array(5);创建数组大小是5的数组。 var arr2=[10];//这里的10表示arr2数组中的数据，数组长度是1
var arr =new Array(元素1,元素2,元素3)	指定数组中每个元素创建一个数组
var arr =[元素1,元素2,元素3] √	指定数组中每个元素创建一个数组

代码示例：

//定义一个数组
var arr1=new Array(10);//这里的10表示arr1数组中的长度
var arr2=new Array('a');//这里表示数组arr2中的数据是a,数组长度是1
var arr3=[10];//这里的10表示arr3数组中的数据

console.log(arr1.length);//10
console.log(arr2.length);//1

var arr = [10,"aa"];

数组的特点

创建数组，元素的类型可以不同
数组的长度可以动态变化的
数组中还包含了方法

数组中元素的获取

跟java一样,通过索引和数组名的方式获得数组中的元素：

获得数组中的一个元素：arr[下标] 从0开始

遍历获得数组中的所有元素：

for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

代码示例：

//1.创建数组，元素的类型可以不同
var arr3 = [50, true, "abc", new Date()];
console.log(arr3);

//2.数组的长度可以动态变化的
console.log(arr3.length);//4
arr3[5] = 99; //扩大了数组长度，并设置索引5下的元素为99

//循环输出每个元素
for (var i = 0; i < arr3.length; i++) {
    var arrElement = arr3[i];
    console.log("数组元素："+arrElement);
}
console.log(arr3.length);//6

//直接修改长度 
arr3.length = 3; //修改数组长度，只保留索引：0、1、2
console.log(arr3);

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bACtvPTd-1649659993255)(imgs/image-20191205150528658.png)]

数组常用方法

方法名	功能
concat()	用于拼接一个或多个数组
reverse()	用于数组的反转
join(separator)	用于将整个数组使用分隔符拼接成一个字符串。相当于split()反操作
sort()	对数组进行排序，不带参数是按照编码值进行排序。如果不是按照编码值排序,那么必须指定比较器。说明：由于字符串都是按照编码值比较大小的，所以也可以将这个方法这样理解使用：如果要对数字进行排序，必须指定比较器。如果是按字符串进行排序，那么就是无参。
pop()	删除并返回数组的最后一个元素
push()	添加一个元素到数组的最后面

字符串的比较规则

字符串比较字符的ASCII码值
小写字母 > 大写字母 > 数字
两个字符串先比较第1个字符，如果比较出来了大小，就不再继续。
如果第1个字符相同，则继续比较第2个，谁大整个字符串就大。后面依次类推。
```
"abcdefg" <  "ac"
"239874239478" < "A"
"ABCDEFG" < "x"
```

案例：数组的应用

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script type="text/javascript">
    //3. 数组中还包含了方法
    // concat()：用于拼接一个或多个数组
    var a1 = [1, 3, 5];
    var a2 = ["a", "b", "c"];
    var a3 = [99, 100];
    var a4 = a1.concat(a2, a3);
    console.log(a4);//(8) [1, 3, 5, "a", "b", "c", 99, 100]

    // reverse()：用于数组的反转
    a1.reverse();
    console.log(a1);//(3) [5, 3, 1]

    // join(separator)：用于将整个数组使用分隔符拼接成一个字符串。相当于split()反操作
    var str = a3.join("_");
    console.log(str);//99_100

    /*
        sort()：对数组进行排序，不带参数是按照编码值进行排序。
        如果不是按照编码值排序,那么必须指定比较器。
        说明：
        由于字符串都是按照编码值比较大小的，所以也可以将这个方法这样理解使用：
            如果要对数字进行排序，必须指定比较器。如果是按字符串进行排序，那么就是无参
      */
    var arr5 = ["newboy", "Rose", "Tom", "Job", "Jack"];
    console.log("排序前：" + arr5);
    arr5.sort();//按照编码值排序
    console.log("排序后：" + arr5);//Jack,Job,Rose,Tom,newboy 升序

    var arr6 = [100, 5, 24, 83, 9];
    console.log("排序前：" + arr6);
    arr6.sort();//按照编码值排序
    console.log("排序后：" + arr6);//排序后：100,24,5,83,9 编码值升序

    var arr7 = [100, 5, 24, 83, 9];
    console.log("排序前：" + arr7);
    arr7.sort(function (a, b) {
        return b - a;
    });//按照数字大小
    console.log("排序后：" + arr7);//排序后：100,83,24,9,5 大小降序

    // pop()：删除并返回数组的最后一个元素
    var arr8 = ["newboy", "Rose", "Tom", "Job", "Jack"];
    var number = arr8.pop();
    console.log(number);
    console.log(arr8);

    // push()：添加一个元素到数组的最后面
    arr8.push("aaa","bbb");
    console.log(arr8);
</script>
</body>
</html>

小结

方法名	功能
concat()	一个或多个数组拼接（生成新数组）
reverse()	反转
join(separator)	将数组拼接成一个字符串
sort()	排序，无参是按字符串，如果数字要使用比较器
pop()	删除最后一个元素
，	在最后添加一个或多个元素

JS内置对象：RegExp

目标

掌握RegExp对象的基本应用

路径

正则表达式概念
正则表达式对象
正则表达式书写规则

正则表达式

正则表达式也称为规则表达式。是对字符串操作的一种逻辑公式。简单来讲，就是用事先定义好的一些特定字符组合成一个“规则字符串”，用这个“规则字符串”对字符串进行一种逻辑过滤。

正则表达式的特点：

正则表达式只是针对字符串操作的
可以迅速地用极简单的方式达到字符串的复杂控制
灵活性、逻辑性和功能性非常强

示例：/[0-9]{1,2}/      0~9之间的数字只能出现1次或2次。 控制字符串只能是：0~99

正则表达式对象

RegExp对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

创建 RegExp 对象的语法：

第1种：通过直接书写正则表达式的方式创建RegExp对象

var reg = /^ 规则字符串 $/;   //返回一个新的RegExp对象

第2种：通过构造器方式创建RegExp对象

var reg = new RegExp("/^ 规则字符串 $/");   //返回一个新的RegExp对象

注意: 在开发中我们一般不会自己去编写正则表达式 , 一般会使用别人已写好的正则表达式 , 在这里只需大家能读得懂基本的正则表达式和会使用正则表达式即可.

正则表达式书写规则

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
`[^abc]`	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串

RegExp对象方法

方法	描述
boolean test(“字符串”)	如果正则表达式匹配字符串，返回true，否则返回false

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 * 需求：使用正则表达式验证指定的字符串是否满足长度是6.
			 * 说明：在js中正则表达式的开头使用^  结尾使用$ 表示边界词
			 * regExp.test(str) 验证字符串的合法性
			 * 如果合法，返回true。如果不合法，返回false
			 */
			//定义字符串
			var str='abcdef';
//			方式一:创建正则表达式对象 .
//			var reg = new RegExp('^[0-9a-zA-Z]{6}$');
			//方式二：创建正则表达式对象 
			var reg=/^[0-9a-zA-Z]{6}$/;
			//调用方法判断str字符串的长度是否是6
			console.log(reg.test(str));
		</script>
	</body>
</html>

JS内置对象：String

目标

了解String对象的基本应用

路径

String对象的使用

String对象的使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10-字符串</title>
</head>
<body>
<!--
1. 构造字符串对象可以使用
    a. 双引号
    b. 单引号
    c. 反引号(重音符) 键盘左上角 esc下面 (es6字符串模板)
        经常用在拼接字符串: 避免单双引手动拼接
            '字符串${变量名}字符串'

2. 字符串常用方法
      substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符。  包头不包尾
      toLowerCase() 把字符串转换为小写。
      toUpperCase() 把字符串转换为大写。
      split() 把字符串分割为字符串数组。
      trim() 去掉首尾空格

-->
<script type="text/javascript">
    // ------------ 1. 构造字符串对象可以使用  双引号,单引号,反引号
    // let str2 = new String("abc")
    let str = "abc"
    let str2 = 'abc'
    let str3 = `abc`
    console.log(str);
    console.log(str2);
    console.log(str3);

    let i = 100; // 效果: 小丽体重i斤
    let str4 = '小丽体重' + i + '斤'
    console.log(str4);

    let str5 = `小张体重${i}斤`
    console.log(str5);
    // ------------ 2. 字符串常用方法
    
    let str6 = "askfdjASDFAJSDLas"
    var s = str6.toLowerCase();
    console.log(s)
</script>
</body>
</html>

JS内置对象：Date

目标

了解Date对象的基本应用

路径

Date对象的使用

Date对象的使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>12-日期</title>
</head>
<body>
<!--
    日期  Date
        1. 创建对象
             let date = new Date(); 获取当前时间时间

        2. 常用方法
            toLocaleString()      转换为本地日期格式的字符串
            getFullYear() 获取日期中的year
            getMonth()   获取日期中的month
            getDate()    获取日期中的 号
            getTime()   获取时间毫秒值(时间原点: 1970年1月1号0时分秒)
-->

    <script>
        let date = new Date();
        //Sun May 24 2020 14:38:34 GMT+0800 (中国标准时间:东八区)
        console.log(date);
        console.log(date.toLocaleString()); // 转换为本地日期格式的字符串
        console.log(date.getFullYear()); // 年 四位
        console.log(date.getMonth()+1);// 月 范围：0~11
        console.log(date.getDate()); // 日
        console.log(date.getTime()); // 1970年~今毫秒值
    </script>

</body>
</html>

JS内置对象：Math

目标

了解Math对象的基本应用

路径

Math对象的使用

Math对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13-数学</title>

</head>
<body>
<body>
<!--
数学运算
    查询手册完成
    1. 四舍五入 round()
    2. 向下取整 floor() 地板
    3. 向上取整 ceil()  天花板
    4. 产生随机数 random() ：返回 [0,1) 之间的随机数。
            [0,1) 左闭右开区间,包含0不包含1

-->
<script >
    let n = 1234.567
    //1. 四舍五入取整
    console.log(Math.round(n));
    //2. 向下取整
    console.log(Math.floor(n));
    //3. 向上取整
    console.log(Math.ceil(n));
    //4. 产生随机数
    for (let i = 0; i < 10 ; i++) {
        console.log(Math.random());
    }
</script>
</body>
</html>

用户注册验证

目标

能够使用正则表达式对用户注册信息进行验证

路径

案例效果
案例分析
案例代码实现

案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2AESOm0Z-1649660152320)(imgs/18-1575514945511.bmp)]

案例分析

浏览器中显示的页面如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8Z73yyB-1649660152323)(imgs/13-1575514945511.bmp)]

利用JavaScript中的事件，实现对用户注册信息进行合法性验证

事件：
- onblur ：在表单控件上添加事件，在标签元素失去焦点时触发(离焦)，来检验证输入的内容是否合法
- onsubmit ：提交表单时触发（验证表单中有非法数据时，不能提交给服务器）

编写步骤：

1、添加错误提示显示区域

例如：

<span id="usernamespan"></span> 校验不通过，红色字体提示

2、失去焦点时判断用户输入的信息是否合法

3、点击注册按钮验证所有项

要求：

1、用户名必须是6-10位的字母或者数字

2、密码长度必须6位任意字符

3、两次输入密码要一致

案例实现

HTML代码：

在html页面中添加错误显示区域

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--注册页面-->
		<form action="#" method="post">
			<!--6行2列-->
			<table>
				<tr>
					<td>用户名</td>
					<td><input type="text" name="username" id="username"/></td>
					<!--接收用户名的错误信息-->
					<td><span id="usernamespan"></span></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="password" id="password"/></td>
					<!--接收密码的错误信息-->
					<td><span id="passwordspan"></span></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" name="repassword" id="repassword"/></td>
					<!--接收确认密码的错误信息-->
					<td><span id="repasswordspan"></span></td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<input type="radio" name="gender" value="male" />男
						<input type="radio" name="gender" value="female" />女
					</td>
					<!--接收性别的错误信息-->
					<td><span id="genderspan"></span></td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<input type="checkbox" name="hobby" value="sing" />唱歌
						<input type="checkbox" name="hobby" value="dance" />跳舞
						<input type="checkbox" name="hobby" value="code" />写代码
					</td>
					<!--接收爱好的错误信息-->
					<td><span id="hobbyspan"></span></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="submit" value="注册" />
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

JS代码：

1、校验用户名是否合法

用户名必须是6-10位的字母或者数字

当鼠标离开文本输入框的时候就会触发的事件，所以我们需要在用户名的input标签中添加一个离焦事件onblur,用来验证用户名是否合法。

代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ekDvivSO-1649660152324)(imgs/14-1575514945511.bmp)]

验证用户名是否满足：用户名必须是6-10位的字母或者数字

<script type="text/javascript">
			//定义函数根据任意标签的id获取标签，防止根据标签id获取标签的代码重复
			function getId(id)
			{
				return document.getElementById(id);
			}
			//定义函数用来验证用户名是否合法
			//用户名必须是6-10位的字母或者数字
			function checkUser()
			{
//				alert("haha");
				//鼠标离开时获取用户名的值
				var userVal=getId('username').value;
				//获取正则表达式对象，6-10位的字母或者数字
				var reg=/^[0-9a-zA-Z]{6,10}$/;
				//判断用户输入的用户名是否符合上述正则表达式对象
				if(reg.test(userVal))
				{
					//返回true，说明符合，输入正确 合法
					getId('usernamespan').innerHTML='';
					//这里返回true，提交表单的时候要使用
					return true;
				}else{
					//非法
					getId('usernamespan').innerHTML='用户名必须是6-10位的字母或者数字';
					//提示信息是红色的
					getId('usernamespan').style.color='red';
					//提交表单的时候要使用
					return false;
				}
			}
</script>

2、验证密码

密码长度必须是6位的任意字符

当鼠标离开文本输入框的时候就会触发的事件，所以我们需要在密码的input标签中添加一个离焦事件onblur,用来验证密码是否合法。

代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGDYi60u-1649660152325)(imgs/15-1575514945511.bmp)]

验证密码是否满足：密码长度必须6位的任意字符

//验证密码 --->密码长度必须6位的任意字符
			function checkPassword()
			{
				//鼠标离开时获取密码的值
				var passwordVal=getId('password').value;
				//获取正则表达式对象，密码长度必须6位的任意字符
				var reg=/^.{6}$/;
				//判断用户输入的密码是否符合上述正则表达式对象
				if(reg.test(passwordVal))
				{
					//返回true，说明符合，输入正确 合法
					getId('passwordspan').innerHTML='';
					//这里返回true，提交表单的时候要使用
					return true;
				}else{
					//非法
					getId('passwordspan').innerHTML='密码长度必须6位的任意字符';
					//提示信息是红色的
					getId('passwordspan').style.color='red';
					//提交表单的时候要使用
					return false;
				}
		}

3、验证确认密码

两次输入密码要一致。

当鼠标离开文本输入框的时候就会触发的事件，所以我们需要在确认密码的input标签中添加一个离焦事件onblur,用来验证确认密码是否合法。

代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-84iMZRpY-1649660152325)(imgs/16-1575514945511.bmp)]

验证确认密码是否满足：两次输入密码要一致

//验证确认密码。两次输入密码要一致。
			function checkRpassword()
			{
				//鼠标离开时获取确认密码的值
				var rePasswordVal=getId('repassword').value;
				//获取密码的值
				var passwordVal=getId('password').value;
				//判断两次输入的密码是否一致
				if(rePasswordVal != passwordVal)
				{
					//不一致
					//非法
					getId('repasswordspan').innerHTML='两次输入密码不一致';
					//提示信息是红色的
					getId('repasswordspan').style.color='red';
					//提交表单的时候要使用
					return false;
				}else
				{
					//一致
					//返回true，说明符合，输入正确 合法
					getId('repasswordspan').innerHTML='';
					//这里返回true，提交表单的时候要使用
					return true;
				}
				
	}

4、校验表单是否可以提交

如果所有条件都满足，才可以提交表单，只要有一个不满足就不能提交表单。

那么如何验证表单是否可以提交呢？在js中有一个事件叫做onsubmit事件可以验证，该事件是在提交form表单按钮时触发。

给form表单添加一个id，代码如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r1cyg9Ta-1649660152326)(imgs/17-1575514945511.bmp)]

验证表单是否可以提交的代码如下所示：

//验证表单是否可以提交
			getId('registerForm').onsubmit = function()
			{
//				alert('haha');
				if(checkUser() && checkPassword() && checkRpassword())
				{
					//可以提交表单，返回true
					return true;
				}else{
					//不可以提交
					return false;
				}
			}

案例：表格隔行换色

目标

能够使用js实现表格隔行换色功能

路径

案例效果
案例准备
案例代码实现

案例效果

开发中，需要使用表格陈列数据，数据过多不易查看，通常使用隔行换色进行表示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cVCmMrUS-1649660180128)(imgs/19-1575514945511.bmp)]

说明：一般表头不会换颜色。

案例准备

将下面的html复制到页面中，完成隔行换色即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="margin: 50px;">
		<table border="1" width="1000">
			<tr style="background-color: #999;">
				<th><input type="checkbox"></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="chekbox"></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

案例代码

JavaScript代码实现：

分析：通过上述结果观察出，第一行表头不需要变颜色，所以获取到所有的tr之后，索引i需要从1开始，i是奇数时行的背景是白色，i是偶数时，行的背景是蓝色。

<script type="text/javascript">
			//获取所有的tr
			var aTr = document.getElementsByTagName('tr');
			//遍历数组 表头不用换颜色，所以i从1开始
			for(var i=1;i<aTr.length;i++)
			{
				//是奇数时是白色，i是偶数时是蓝色
				if(i%2 == 1)
				{
					//奇数 背景颜色是白色
					aTr[i].style.backgroundColor='white';
				}else
				{
					//偶数 背景颜色是蓝色
					aTr[i].style.backgroundColor='blue';
				}
			}
</script>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vt7FsCzb-1649660180130)(imgs/20-1575514945511.bmp)]

案例：复选框全选/全不选

目标

能够使用js实现复选框全选功能

路径

案例介绍
案例分析
案例准备
案例代码实现

案例介绍

开发中，经常需要对表格数据进行“批量处理”，就需要快速的对列表项进行操作

案例分析

复选框元素是否选中，需要使用checked来表示。

例如： element.checked = true; // true表示选中，false表示没有选中

案例准备

复制以下html代码：

<! DOCTYPE html >
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center">
            <tr style="background-color: #999999;">
                <th><input type="checkbox"></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>| <a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>| <a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>| <a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>| <a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>

案例代码实现

JavaScript代码实现：

步骤1 ：给复选框添加onclick事件

<tr style="background-color: #999999;">
    <th><input type="checkbox" onclick="selectAll(this)"></th>
    <th>分类ID</th>
    <th>分类名称</th>
    <th>分类描述</th>
    <th>操作</th>
</tr>

步骤2：编写selectAll(this)处理列表项的复选框是否勾选

<script type="text/javascript">
    function selectAll(obj){
        //1. 获取除了全选复选框之后的其他复选框
        var checkboxArr = document.getElementsByClassName("itemSelect") ;
        //2. 遍历存储复选框对象的数组, 获取每一个复选框
        for(var i=0; i<checkboxArr.length; i++) {
            //3. 设置每一个复选框的checked属性和全选复选框的属性一致
            checkboxArr[i].checked = obj.checked;
        }
    }
</script>

案例：省市二级联动

目标

能够使用js实现省市联动

路径

案例介绍
案例所需知识点
案例代码实现

案例介绍

在日常应用中，我们需要完善个人信息，“所在地”要求选择省市，当选择省时，该省对应的市将自动的更新。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KrvFmvSx-1649660221060)(imgs/22-1575514945512.bmp)]

案例所需知识点

JSON

JSON 英文全称 JavaScript Object Notation(标记、格式)。JSON 是一种轻量级的数据交换格式。JSON 是用于存储和传输数据的格式。JSON 通常用于服务端和网页之间传递数据的。 JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取以及作为数据格式传递。

JSON在JS里面其实就是一个对象：

定义JSON：

var json = { key1: value1, key2:value2…};

说明：按照语法规则，key如何书写都可以，但是为了规范，key最好写在双引号中，这样，在后面我们使用的时候便不会出现获取数据的问题。

使用JSON：

json.key1  //来访问键对应的值

演示JSON的代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//定义一个json
			var json={"name":"锁哥","age":18,"address":"上海"};
			//输出年龄
//			console.log(json.age);//18
			//上述只是存储一个人的信息，如果存储多个人的信息，可以使用数组进行存储
			var jsonArray = [{"name":"锁哥","age":18,"address":"上海"},
							 {"name":"黑旋风","age":19,"address":"黑龙江"},
							 {"name":"助教","age":29,"address":"北京"}
							 ];
			//访问黑旋风的地址address 由于是数组，所以索引从0开始
			console.log(jsonArray[1].address);//黑龙江
		</script>
	</body>
</html>

说明：

如果存储多个人的信息：

var jsonArray = [{“name”:“锁哥”,“age”:18,“address”:“上海”},{“name”:“黑旋风”,“age”:19,“address”:“黑龙江”},{“name”:“助教”,“age”:29,“address”:“北京”}];

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LeXNOAEf-1649660221063)(imgs/23-1575514945512.bmp)]

注意：标准格式的JSON键要用双引号引起来，值如果是字符串也必须要双引号引起来。我们后面做数据交互的时候一定要书写标准格式的JSON

下拉框

下拉框代码：

<select id="province" name="province">
		<option value="">--请选择省--</option>
        <option value="sh">上海</option>
</select>

事件：

onchange : 当下拉框的内容发生改变的时候触发的事件。

获取下拉框的所有option:

objSel.options
说明：objSel表示父标签select对象

动态创建option ：

var option = new Option(文本，value);
例如：
var option = new Option(‘上海’，‘sh’);

添加option：oProSel.appendChild(option);

objSel.appendChild(option);//将子标签option添加到父标签objSel上

代码实现

因为需要加载一些省市，所以已经给大家在课前资料准备好了一份：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bvB1DvxE-1649660221063)(imgs/24-1575514945512.bmp)]

代码实现：

第一步：新建一个html页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XiMpVJGI-1649660221064)(imgs/25-1575514945512.bmp)]

省市联动的html代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="province" name="province">
			 <option value=''>--请选择省--</option>
		</select>
		<select id="city" name="city">
			 <option value=''>--请选择市--</option>
		</select>
	</body>
</html>

第二步：将之前准备好的cities.js文件复制到编辑工具的目录中：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MuvhE4fV-1649660221064)(imgs/26-1575514945512.bmp)]

cities.js文件中的代码如下所示：

var china = [
    {
        "p_name": "吉林省",
        "p_id": "jl",
        "cities": [
            {
                "c_name": "长春",
                "c_id": "cc"
            },
            {
                "c_name": "四平",
                "c_id": "sp"
            },
            {
                "c_name": "通化",
                "c_id": "th"
            },
            {
                "c_name": "松原",
                "c_id": "sy"
            }
        ]
    },
    {
        "p_name": "辽宁省",
        "p_id": "ln",
        "cities": [
            {
                "c_name": "沈阳",
                "c_id": "sy"
            },
            {
                "c_name": "大连",
                "c_id": "dl"
            },
            {
                "c_name": "抚顺",
                "c_id": "fs"
            },
            {
                "c_name": "铁岭",
                "c_id": "tl"
            }
        ]
        
    },
    {
        "p_name": "山东省",
        "p_id": "sd",
        "cities": [
            {
                "c_name": "济南",
                "c_id": "jn"
            },
            {
                "c_name": "青岛",
                "c_id": "qd"
            },
            {
                "c_name": "威海",
                "c_id": "wh"
            },
            {
                "c_name": "烟台",
                "c_id": "yt"
            }
        ]
        
    },
    {
        "p_name": "上海市",
        "p_id": "sh",
        "cities": [
            {
                "c_name": "闵行区",
                "c_id": "mh"
            },
            {
                "c_name": "徐汇区",
                "c_id": "xh"
            },
            {
                "c_name": "黄浦区",
                "c_id": "hp"
            },
            {
                "c_name": "浦东新区",
                "c_id": "pd"
            }
        ]
        
    }
];

说明：上述js文件中的数据以json格式存储的。

第三步：在html页面中导入cities.js。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dcEu476S-1649660221064)(imgs/27-1575514945512.bmp)]

第四步：在html页面书写js代码完成二级联动的功能。

分析：

<script type="text/javascript">
			//书写js代码完成二级联动
			//获取省的下拉框
			var oProSel = document.getElementById('province');
			//获取市的下拉框
			var oCitySel = document.getElementById('city');
			//页面在加载的时候获取省，并将省添加到省的下拉框中
			//循环china数组获取省
			for(var i=0;i<china.length;i++)
			{
				//获取省的名字作为option的文本
				var p_name=china[i].p_name;//吉林省
				//获取省的id作为option的value
				var p_id=china[i].p_id;//jl
				//创建省的option var option=new Option(文本,value);
				var option=new Option(p_name,p_id);
				//将上述option添加到省的下拉框中
				oProSel.appendChild(option);
			}
			
			//每次更改省的时候改变对应省的市
			//所以我们给省的下拉框添加一个onchange事件，每次改变省的下拉框就会触发
			oProSel.onchange = function()
			{
				//每次改变省加载市的时候先清空市的下拉框
//				oCitySel.innerHTML="<option value=''>--请选择市--</option>";
				oCitySel.options.length = 1;//只有一个option：<option value=’’>--请选择市--</option>
//				alert("haha");
				//根据当前下拉框的省加载当前省对应的市
				//获取当前下拉框的value
				var p_id = this.value;//jl
				//遍历china数组
				for(var i=0;i<china.length;i++)
				{
					//判断取出的p_id是否和当前省获取的p_id是否相等
					if(p_id == china[i].p_id)
					{
						//找到省了，获取对应的城市
						var cityJsonArr = china[i].cities;
						//遍历城市的数组，依次取出城市
						for(var j=0;j<cityJsonArr.length;j++)
						{
							//取出城市的c_name作为文本
							var c_name = cityJsonArr[j].c_name;
							//取出城市的c_id作为value
							var c_id = cityJsonArr[j].c_id;
							//创建城市的option
							var option = new Option(c_name,c_id);
							//将城市的option添加到城市的下拉框中
							oCitySel.appendChild(option);
						}
						//找到之后，直接结束for循环
						break;
					}
					
				}
				
			};
</script>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-880D3Pc9-1649660221065)(imgs/28-1575514945512.bmp)]

acacac.

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Javascript高级+小案例

BOM：Windows对象目标掌握Windows对象的基本使用路径BOM介绍Window对象BOM介绍BOM是Browser Object Model的缩写，简称浏览器对象模型，是将使用的浏览器抽象成对象模型。简单理解：把整个浏览器当做一个对象来处理。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。Screen对象， Screen 对象中存放着有关显示浏览器屏幕的信息。Navigator对象，包含的属性描述了正在使用的浏览器(当前浏览器的相关
复制链接

扫一扫