JavaScript

JavaScript

目录

JavaScript介绍

JavaScript是什么？

JavaScript是一种web前端的描述语言，也是一种基于对象（Object）和事件驱动（Event Driven）的、安全性好的脚本语言。它运行在客户端从而减轻服务器的负担。

JavaScript的特点：

  • JavaScript主要用来向html页面中添加交互行为
  • JavaScript是一种脚本语言，语法和C语言系列语法类似，属于弱语言类型
  • JavaScript一般用来编写客户端脚本，如node.js例外
  • JavaScript是一种解释性语言，边执行边解释无需另外编译

在此之间我们就已经学过了HTML+CSS，那么我们就需要重新了解下web前端：

  • HTML：从语义的角度，描述页面结构
  • CSS：从审美的角度，描述样式（美化页面）
  • JavaScript：从交互的角度，描述行为（提升用户体验）

JavaScript历史背景介绍

布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。

一开始JavaScript叫做LiveScript，但是由于当时Java语言特别火，所以为了傍上打牌，就改名为JavaScript。Java和JavaScript的关系，就如同北大和北大青鸟的关系。

在同时期还有其他的网页语言，比如VBScript、JScript等等，后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。

JavaScript的用途

JavaScript的用途是解决页面交互和数据交互，最终目的是峰峰客户端效果以及数据的有效传递。

  • 实现页面交互，提升用户体验实现页面特效。即js操作html的dom结构或操作样式
  • 客户端表单验证，即在数据送达服务端之前进行用户提交信息及时有效地验证，减轻服务器压力。即数据交互

JavaScript和ECMAScript的关系

ECMAScript是一种由Ecma国际（前身为 欧洲计算机制造商协会）制定的一种标准。

JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以ECMA组织牵头执行了JavaScript的标准，取名为ECMAScript。

简单的说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script(Flash)。就是说当你的JavaScript学完了，那么Flash程序也就轻而易举了。

ECMAScript在2015年6月，发布了ECMAScript6版厄本那，语言能力更强（也包含了很多新特性）。但是，浏览器的厂商不能那么快追上这个标准。

更多信息请点击：

JavaScript入门易学性

  • JavaScript对初学者比较友好
  • JavaScript是有界面效果的
  • JavaScript是弱语言，变量只需要var来声明。而Java中变量的声明，要根据变量的类型来定义

比如Java中需要定义以下变量：

int a;
float a;
double a;
String a;
boolean a;

但是在JavaScript中，只用定义一个变量：

var a;
  • JavaScript不用关心其他的事情，更关心自己的业务

JavaScript的组成

JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等
  • DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等
  • BOM：操作浏览器部分功能的额API。比如让浏览器自动滚动

PS：JavaScript重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS这种的margin、padding都是机械重复劳动。

第一个JavaScript实例

引入JavaScript的3种方式

  • 外链式
  • 行内式
  • 内部式

外链式

也就是和我们引入外部CSS文件一样，在head头部引入我们自定义JavaScript脚本：

<script src="01%20index.js">

行内式

因为我们的JavaScript是可以操作我们的标签的，也就是说我们可以把标签当成DOM（Document Object Module），所以我们就可以使用行内式来引入JavaScript：

<body>
	<p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
</body>

但是我们发现给了p标签id和onclick属性后，依然是没有任何效果，所以，我们需要讲一下我们的内部式

内部式

在我们写的HTML代码中，拿到浏览器那边，浏览器是从上到下开始解析的，那么我们需要把JavaScript写在最后面，等全部加载成功后，再来加载JavaScript：

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

我们的内部式就是这样引入的，那么我们现在可以去写我们的第一个JavaScript实例了

Hello,JavaScript!

当我们点击P标签的时候，弹框输出：Hello,JavaScript!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
	</body>
	<script type="text/javascript">
		function clickHandler(){
			alert('Hello,JavaScript!')
		}
	</script>
</html>

image

alert语句

alert（英文翻译为“警报”）的用途：弹出警告框

alert('这是我的第一个JavaScript程序！')

当我们保存后在浏览器刷新，那么就会出现这样的效果：
image

JavaScript的语法规则

学习程序，是有规律可循的，就是程序中有相同的部分，这些部分就是一种规定，不能更改，我们称为：语法

  1. JavaScript对换行、缩进、空格不敏感

备注：每一条语句末尾都要加上分号，虽然分号不是必须添加的，但是为了程序今后要压缩，如果不加分号，那么压缩后的程序将不能运行

  1. 所有的符号，都是英语的。比如括号、引号、分号
  2. JavaScript的注释：

单行注释：

// 我是注释

多行注释：

/*
    多行注释1
    多行注释2
*/

JavaScript在网页中输出信息的写法

在JavaScript中，网页输出新的写法有三种：

  • 使用window.alert()输出警告框
  • 使用document.write()方法将内容写到html文档中
  • 使用innerHTML写入到HTML元素
  • 使用console.log()写入到浏览器的控制台

使用window.alert()输出警告框

windos.alert(""),弹框效果，window是BOM对象，指的是整个浏览器，可以省略不写。弹框比较突然，对用户来说体验不是太好，基本上就是测试代码使用的：

<script type="text/javascript">
    window.alert('星儿今天很漂亮')  # window是可以忽略的
    alert('星儿今天很漂亮')
</script>

image

使用document.write()方法将内容写到HTML文档中

document.write("")会直接在页面上输出内容

<script type="text/javascript">
	document.write('星儿今天很漂亮')
</script>

image

既然我们说过，JavaScript是用来操作DOM的，那么我们就可以来尝试一下：

<script type="text/javascript">
	document.write("星儿今天很漂亮")
	document.write("<h1>我是一级标题</h1>")
</script>

image

使用innerHTML写入到HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 id="demo1">我是一级标题</h1>
		<button type="button" onclick="changeContent()">更改内容</button>
	</body>
	<script type="text/javascript">
		function changeContent(){
			document.getElementById("demo1").innerHTML = "通过innerHTML方法向页面输出内容"
		}
	</script>
</html>

当我们还没有点击的时候是这样的：
image

当我们点击按钮后是这个样子的：
image

使用console.log()写入到浏览器的控制台

其实console是一个系列，不仅仅之后console.log()方法，还有console.error(),console.warn()，当然这些都是输出在控制台上面的:

<script type="text/javascript">
	//控制台日志
	console.log("控制台.日志")
</script>

image

<script type="text/javascript">
	//控制台警告
	console.warn("控制台.警告")
</script>

image

<script type="text/javascript">
	//控制台错误
	console.error("控制台.错误")
</script>

image

prompt()方法

prompt()方法用于显示可提示用户进行输入的对话框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" onclick="hello_user()" value="点我点我"/>
	</body>
	<script type="text/javascript">
		function hello_user(){
			var name = prompt("请输入用户名：")
			if(name != null && name != ''){
				document.write("hello,"+name+"!")
			}
		}
	</script>
</html>

点我们没有点击的时候，此时就只有一个button按钮
image

当我们点击按钮的时候，会弹框让我们输如用户名
image

当点击确定后，会在浏览器界面输出一句话
image

JavaScript中的变量

变量的含义

变量，即是在程序运行过程中它的值是允许修改的量，与他相对应的就是常量：在程序运行过程中它的值不允许修改的量

JavaScript和Python是一样的弱类型语言，Python中定义变量没有关键字:username = 'xiao'，但是在JavaScript中定义变量使用关键字: var name = 'xiao';

var name = "xiao";

变量的声明和定义

有两种方式：

  • 先声明后定义
  • 声明立刻定义

先声明后定义

//1.先声明
var dog;
console.log(dog)  //undefined代表未定义

image

//2.后定义
dog = "校长";
console.log(dog)

image

声明立刻定义(常用)

<script type="text/javascript">
	var dog2 = "雪儿";
	console.log(dog2)
</script>

image

变量名的命名规范

  • 严格去分大小写
  • 命名时可以出现字母、数字、下划线、$，但是不能数字开头，也不能是纯数字，不能包括JavaScript的关键字和保留字
  • 推荐驼峰命名法
  • 匈牙利命名法

JavaScript的保留关键字

https://www.runoob.com/js/js-reserved.html

JavaScript基本数据类型

JavaScript数据类型包括：基本数据类型和引用数据类型

基本数据类型指的是简单的数据段，引用数据类型指的是具有多个值构成的对象

当我们把变量赋值给一个变量时，解析器首先要确认的是这个值是基本数据类型还是引用数据类型

基本数据类型

基本数据类型分为以下五种：

  • number
  • string
  • boolean
  • null
  • undefined

数字类型:number

<script type="text/javascript">
	var num = 123;
	console.log(num)
</script>

number类型在控制台输出是蓝色的
image

字符串类型:string

<script type="text/javascript">
	var str = "泰然城";
	console.log(str)
</script>

字符串类型在控制台输出是黑色的
image

布尔类型:boolean

<script type="text/javascript">
	var b1 = true;
	console.log(b1)
	console.log(typeof b1)
</script>

image

空对象:null

<script type="text/javascript">
	var n1 = null;
	console.log(n1)
	console.log(typeof n1)
</script>

null代表的是空对象
image

未定义:undefined

这个在刚刚我们讲变量的声明和定义已经说过了，如果一个变量声明了但是没有定义，那么就是undefined

<script type="text/javascript">
	var name1;
	console.log(name1)
	console.log(typeof name1)
</script>

image

其实还有一种数据类型,Infinity 属性用于存放表示正无穷大的数值：

<script type="text/javascript">
	var dev = 5/0;
	console.log(dev)
	console.log(typeof dev)
</script>

image

引用数据类型

  • Function
  • Object
  • Array
  • String
  • Date

后面会慢慢讲解

JavaScript的运算符

JavaScript运算符分为四种：

  • 算术运算符
  • 赋值运算符
  • 比较运算符
  • 逻辑运算符

算数运算符和赋值运算符请参考：http://www.w3school.com.cn/js/js_operators.asp

比较运算符和逻辑运算符请参考：http://www.w3school.com.cn/js/js_comparisons.asp

特殊情况

字符串拼接

我们有这么一段文字需要拼接：

相比10年前的北京奥运，这一次，大家选择了少而精的策略，真正在舞台上的演员只有70余人。

那么此时我们想把北京奥运和70拿出来再通过字符串进行拼接，做法是这样的：

<script type="text/javascript">
	var n1 = "北京奥运";
	var n2 = 70;
	var str = "相比10年前的"+n1+"，这一次，大家选择了少而精的策略，真正在舞台上的演员只有"+n2+"余人。";
	console.log(str)
</script>

image

字符串运算

字符串相加

<script type="text/javascript">
	var str1 = "1";
	var str2 = "2";
	var newStr = str1+str2;
	console.log(newStr)
	console.log(typeof newStr)
</script>

虽然结果是12，但是还是string类型
image

如果我们想要将string类型转换成int类型，需要使用到parseInt()方法

<script type="text/javascript">
	//将string类型转换成int类型
	var newStr2 = parseInt(newStr);
	console.log(typeof newStr2)
</script>

image

当我们使用字符串相减的时候：

<script type="text/javascript">
	var str1 = "1";
	var str2 = "2";
	var newStr3 = str1-str2;
	console.log(newStr3)
</script>

image

同样，在我们使用字符串相乘/相除都是可以执行成功不需要转换数据类型的，验证结果略过

我们来尝试下两个都是字符串且不像数字的相乘：

<script type="text/javascript">
	var n1 = 'one';
	var n2 = 'two';
	console.log(n1*n2)
</script>

输出为NaN,即Not a Num
image

JavaScript中的流程控制语句

  • if
  • switch
  • while
  • do while
  • for

if语句

定义鸡为20，如果大于15则大吉大利今晚吃鸡

<script type="text/javascript">
	var ji = 20;
	if (ji >=20) {
		console.log("大吉大利，今晚吃鸡！")
	}
</script>

image

if...else

<script type="text/javascript">
	var ji = 15;
	if (ji >=20) {
		console.log("大吉大利，今晚吃鸡！")
	} else{
		console.log("很遗憾，今晚不能吃鸡！")
	}
</script>

image

if...else if

<script type="text/javascript">
	var mathScore = 140;
	var totalScore = 500;
	if (mathScore >= 138 && totalScore >= 680) {
		console.log("恭喜你被清华大学录取！")
	} else if( totalScore >= 700 || mathScore >= 139){
		console.log("恭喜你被复旦大学录取！")
	}else {
		console.log("很抱歉！")
	}
</script>

image

switch

switch和case一起用，case表示的是一个条件，满足这个条件就会走进来，遇到break就会跳出

<script type="text/javascript">
	var gameScore = "best";
	switch (gameScore){
		case "best":
			console.log('大吉大利今晚吃鸡！')
			break;
		case "better":
			console.log("你是最优秀的！")
			break;
		default:
			break;
	}
</script>

image

while

while循环有3个条件：

  1. 初始化循环变量
  2. 循环判断条件
  3. 更新循环变量
<script type="text/javascript">
	var n = 1;
	while (n<=100){
		console.log(n)
		n++;
	}
</script>

image

练习：打印1-100之间3的倍数

<script type="text/javascript">
	var n = 1;
	while (n<=100){
		if (n%3===0) {
			console.log(n)
		}
		n++
	}
</script>

image

do...while

do...while和while不一样，do...while不管符不符合条件，至少会运行一次

<script type="text/javascript">
	var n = 3;
	do{
		console.log(n)
		n++
	}while (n<10){
		
	}
</script>

image

for循环

打印1-100之间9的倍数

<script type="text/javascript">
	for (var n=1;n<=100;n++) {
		if (n%9==0) {
			console.log(n)
		}
	}
</script>

image

计算1-100的和

<script type="text/javascript">
	var sum=0;
	for (var n=1;n<=100;n++) {
		sum+=n
	}
	console.log(sum)
</script>

image

数组的创建和使用

在Python中，能存放数据的有列表，用[]表示，但是在JavaScript中，[]被当做为数组，所谓的数组看以看成是一个容器，用来存放东西的容器。

数组创建的两种方式：

  • 字面量方式创建
  • 使用构造函数的方式创建

字面量方式创建

所谓字面量的方式，是我们最经常用的，这种方法简单直观

//因为Array是一个对象，那么这个对象就有自己的方法和属性
var arr = ['red','yellow','black']

//创建一个空数组
var arr2 = []

使用构造方法创建数组

<script type="text/javascript">
	var arr1 = new Array();//创建的是空数组
	
	//万事万物皆对象，没有对象new一个，此时的Array可以看成是一个类
	var colors = new Array('red','blue','yellow');
	console.log(colors)
	
</script>

数组的基本操作

数组的赋值

<script type="text/javascript">
	//1.创建一个空的数组
	var colors = new Array();
	
	//2.为数组赋值
	colors[0] = "red";
	colors[1] = "black";
	colors[2] = "white";
	
	//3.打印数据
	console.log(colors)
	
</script>

image

通过下标获取元素的值

<script type="text/javascript">
	//1.创建一个空的数组
	var colors = new Array();
	
	//2.为数组赋值
	colors[0] = "red";
	colors[1] = "black";
	colors[2] = "white";
	
	//3. 通过下标获取数组的值
	console.log(colors[0])
	console.log(colors[2])
	
</script>

image

获取数组的长度

<script type="text/javascript">
	//1.创建一个空的数组
	var colors = new Array();
	
	//2.为数组赋值
	colors[0] = "red";
	colors[1] = "black";
	colors[2] = "white";

	//3.获取数组的长度
	console.log(colors.length)
	
</script>

image

遍历数组

<script type="text/javascript">
	//1.创建一个空的数组
	var colors = new Array();
	
	//2.为数组赋值
	colors[0] = "red";
	colors[1] = "black";
	colors[2] = "white";

	//3.遍历数组
	for (var count=0;count<=colors.length;count++) {
		console.log(colors[count])
	}
	
</script>

这里在后面有个undefined，是因为我们在设置循环条件的时候设置成了小于等于数据的长度，但是数组的第一个元素是从0开始的，所以才会有undefined
image

数组的常用方法

concat():数组的合并

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	console.log(newN)
</script>

image

toString()：将数组转换成为字符串

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
    //console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	console.log(newNum)
</script>

image

join()：将数组里的字符串按照指定的字符连接起来

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	console.log(newN.join('__'))
</script>

image

indexOf():通过内容查找下标，正向查找

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	console.log(newN.indexOf("固始"))
</script>

image

lastindexOf():反向查找

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	//console.log(newN.indexOf("固始"))
	
	//6.lastIndexOf()
	console.log(newN.lastIndexOf("固始"))
</script>

我们可以看到这个值依然是3，因为不管你正向还是反向，顺序是不会变的
image

sort():数组的排序

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	//console.log(newN.indexOf("固始"))
	
	//6.lastIndexOf()
	//console.log(newN.lastIndexOf("固始"))
	
	//7.sort()：对数组排序
	var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
	console.log(names.sort())
</script>

这样是按照26个字母进行排序的，如果首字母相同，那么就比较第二个字母，以此类推
image

reverse()：反转数组

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	//console.log(newN.indexOf("固始"))
	
	//6.lastIndexOf()
	//console.log(newN.lastIndexOf("固始"))
	
	//7.sort()：对数组排序
	var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
	//console.log(names.sort())
	
	//8.reverse()反转数组
	console.log(names.reverse())
</script>

仅仅是对数组的反转，并不会排序
image

shift():移除掉数组中的第一个元素，返回的是移除掉元素的值

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	//console.log(newN.indexOf("固始"))
	
	//6.lastIndexOf()
	//console.log(newN.lastIndexOf("固始"))
	
	//7.sort()：对数组排序
	var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
	//console.log(names.sort())
	
	//8.reverse()反转数组
	console.log(names.reverse())
	
	//9.移除元素和添加元素
	var shiftNames = names.shift();
	console.log(shiftNames)
</script>

image

unshift()：向数组的第一个元素插入一个或者多个值，并返回新的长度

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	//console.log(newN.indexOf("固始"))
	
	//6.lastIndexOf()
	//console.log(newN.lastIndexOf("固始"))
	
	//7.sort()：对数组排序
	var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
	//console.log(names.sort())
	
	//8.reverse()反转数组
	console.log(names.reverse())
	
	//9.移除元素和添加元素
	//var shiftNames = names.shift();
	//console.log(shiftNames)
	
	var unShiftNames = names.unshift("liming","王鹏飞")
	console.log(unShiftNames)
</script>

image

push():向数组的尾部添加一个或者多个值，并返回数组的长度

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	//console.log(newN.indexOf("固始"))
	
	//6.lastIndexOf()
	//console.log(newN.lastIndexOf("固始"))
	
	//7.sort()：对数组排序
	var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
	//console.log(names.sort())
	
	//8.reverse()反转数组
	console.log(names.reverse())
	
	//9.移除元素和添加元素
	//var shiftNames = names.shift();
	//console.log(shiftNames)
	
	var unShiftNames = names.unshift("liming","王鹏飞")
	//console.log(unShiftNames)
	
	//10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
	var pushNames = names.push("lihaiming","languansheng")
	console.log(pushNames)
</script>

image

pop()：删除数组尾部的一个元素，并返回这个元素的值

<script type="text/javascript">
	//1.首先创建两个数组
	var n1 = ['北京','上海','深圳']
	var n2 = ['固始','信阳']
	
	//2.concat():两个数组的合并
	var newN = n1.concat(n2)
	//console.log(newN)

	//3.将数组转换成字符串
	var num = [98,54,66,100,0]
	var newNum = num.toString()
	//console.log(newNum)
	
	//4.join()
	//console.log(newN.join('__'))
	
	//5.通过内容查找下标
	//console.log(newN.indexOf("固始"))
	
	//6.lastIndexOf()
	//console.log(newN.lastIndexOf("固始"))
	
	//7.sort()：对数组排序
	var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
	//console.log(names.sort())
	
	//8.reverse()反转数组
	console.log(names.reverse())
	
	//9.移除元素和添加元素
	//var shiftNames = names.shift();
	//console.log(shiftNames)
	
	var unShiftNames = names.unshift("liming","王鹏飞")
	//console.log(unShiftNames)
	
	//10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
	var pushNames = names.push("lihaiming","languansheng")
	//console.log(pushNames)
	
	//11.pop():删除数组的最后一个元素,并且返回删除的元素值
	var popNames = names.pop();
	console.log(popNames)
</script>

image

对字符串进行反转

<script type="text/javascript">
	var str = "hello Javascript!"
	console.log(str.split("").reverse().join(""))
</script>

image

函数的使用

字面量方式创建

<script type="text/javascript">
	//1.字面量方式的创建
	function add(){
		alert("add函数被调用了！")
	}
	add()
</script>

不管在什么语言中，定义了函数那么就需要有调用，在JavaScript是这样的：
image

定义函数时需要携带参数

<script type="text/javascript">
	//1.字面量方式的创建
	function add(){
		alert("add函数被调用了！")
	}
	//add()
	
	//第二种方式：定义函数时携带参数
	function add2(a,b){
		console.log(a*b)
	}
	add2(4,5)
</script>

image

定义函数值需要有返回值

<script type="text/javascript">
	//1.字面量方式的创建
	function add(){
		alert("add函数被调用了！")
	}
	//add()
	
	//第二种方式：定义函数时携带参数
	function add2(a,b){
		console.log(a*b)
	}
	//add2(4,5)
	
	//第三种方式：定义函数需要有返回值
	function add3(a,b){
		return a*b
	}
	var a = add3(5,9)
	console.log(a)
</script>

image

Object_构造函数

对象的创建有以下几种方式：

  • 字面量方式创建
  • 使用Object()创建对象
  • 使用构造函数方式创建对象

字面量方式创建

在JavaScript中，对象的属性是用key:value的方式存储的

<script type="text/javascript">
	var stu = {
		name:"(*^_^*)亚飞",
		age:22,
		fav:"鸡汤",
	}
	console.log(stu)
</script>

推荐使用这种字面量方式创建，这种方式简单直观
image

如果想要设置name属性的值，那么我们需要用点语法，也就是在python中的get方法和set方法

<script type="text/javascript">
	var stu = {
		name:"(*^_^*)亚飞",
		age:22,
		fav:"鸡汤",
	}
	console.log(stu)
	
	stu.name = "li"
	console.log(stu)
</script>

image

使用Object()创建对象

使用Object构造函数 特点： 首字母要大写 想要创建对象就需要自己new一个

<script type="text/javascript">
	var Stu = new Object();
	Stu.name = "小明";
	console.log(Stu)
</script>

image

使用构造函数方式创建对象

<script type="text/javascript">
	var Student = function(){
		this.name = "海明";
		this.age = 22;
		this.fav = function(){
			alert('旅游')
		}
	}
	
	//创建对象
	var stu1 = new Student();
	console.log(stu1)
</script>

使用构造函数创建对象，有以下三点：

  • 函数名首字母大写
  • 构造函数不需要return
  • 为对象添加成员变量：this.name = 'guansheng';

image

但是使用构造函数方式创建对象有一个弊端：每new一次对象，里面的成员变量和方法都是一样的，所以我们在调用的时候不知道调用的是哪个

当然，到最后我们推荐的是构造函数方式

<script type="text/javascript">
	function Animal(){
		this.name = "jingjing";
		this.age = 21;
	}
	Animal.prototype.shownames1 = function(){
		alert('调用了shownames1方法！')
	}
	Animal.prototype.shownames2 = function(){
		alert('调用了showname2方法！')
	}
	
	var a = new Animal();
	a.shownames1()
</script>

image

String_Number

String字符串对象，那么这是一个对象就会有自己的方法

obj.length获取字符串的长度

<script type="text/javascript">
	var str = "hello,world!"
	
	console.log(str.length)
</script>

image

toUpperCase(obj)把小写变大写

<script type="text/javascript">
	var str = "hello,world!"
	
	console.log(str.toUpperCase())
</script>

image

toLowerCase()把大写变成小写

	<script type="text/javascript">
		var str = "hello,world!"
		
		var bigStr = str.toUpperCase();
		
		console.log(bigStr.toLowerCase())
	</script>

image

obj.split("",n)以xx进行切割，并返回数组的最大长度为m

	<script type="text/javascript">
		var str = "hello,world!"
		
		console.log(str.split(" "))
	</script>

image

obj.sunstring(n,m)左开右闭的方式获取str的n到m元素的值

	<script type="text/javascript">
		var str = "hello,world!"
		
		console.log(str.substring(2,5))
	</script>

image

Number类型

obj.toString()将number装换成字符串类型

	<script type="text/javascript">
		var num = 123.4567
		
		var num2String = num.toString();
		console.log(num2String)
		console.log(typeof num2String)
	</script>

image

toFixed(n)四舍五入，最大长度为n

	<script type="text/javascript">
		var num = 123.4567
		
		console.log(num.toFixed(2))
	</script>

image

Date对象的使用

	<script type="text/javascript">
		var myDate = new Date();
		
		//1.获取今天是第几号
		console.log(myDate.getDate())
		
		//2.获取当天的日期和时间
		console.log(Date())
		
		//3.获取今天是星期几 0代表周日 6代表周六
		console.log(myDate.getDay())
		
		//4.获取现在是几时
		console.log(myDate.getHours())
		
		//5.获取一年中的几个月  0代表1月  11代表12月
		console.log(myDate.getMonth()+1)
	</script>

image

Date对象的小练习

在桌面显示当前时间：

	<script type="text/javascript">
		function getCurrentTime(){
			//1.创建一个时间对象
			var date = new Date();
			
			//2.获取当前时间
			var timeInfo = date.getFullYear()+"年"+num(date.getMonth()+1)+"月"+num(date.getDate())+"日 "+ num(date.getHours())+":"+num(date.getMinutes())+":"+num(date.getSeconds());
			
			//3.获取span1这个元素
			var oSpan = document.getElementById('span1');
			
			//4.将时间写到span标签中
			oSpan.innerHTML = timeInfo.fontcolor('red');
		}
		getCurrentTime()
		
		//5.设置定时器
		setInterval("getCurrentTime()",1000)
		
		//我们发现：秒钟走到59后 就变成了0  而不是00
		 function num(n){
		 	if (n<10) {
		 		return "0"+n
		 	} else{
		 		return n
		 	}
		 }
	</script>

image

Math对象的使用

Math对象用于执行数学任务

	<script type="text/javascript">
		
		//1.ceil() 天花板函数 向上取整  大于等于1，并且最接近的整数
		var reg1 = Math.ceil(1.12131)
		console.log(reg1)
		
		//2.floor() 地板函数  向下取整  小于等于1，并且最接近的整数
		var reg2 = Math.floor(1.12131)
		console.log(reg2)
		
		//3.最大值与最小值
		var reg3 = Math.max(4,5)
		console.log(reg3)
		
		var reg4 = Math.min(1,9)
		console.log(reg4)
		
		//4.取随机数  这个是0-1之间的随机数
		var reg5 = Math.random()
		console.log(reg5)
		
		//获取100-200之间的随机数
		var reg6 = 100+Math.random()*100
		console.log(reg6)
	</script>

image

JavaScript案例

模态框案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			#box{
				 100%;
				height: 100%;
				background-color: rgba(0,0,0,.3);
			}
			#content{
				 400px;
				height: 200px;
				line-height: 200px;
				background-color: white;
				position: relative;
				top: 150px;
				margin: auto;
				text-align: center;
				color: red;
			}
			#span1{
				position: absolute;
				top: 0px;
				right: 0px;
				background-color: red;
				color: white;
				 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
			}
		</style>
	</head>
	<button id="btn">点我</button>
	<body>
	</body>
	<script type="text/javascript">
		var myBtn = document.getElementById('btn');
		
		var myDiv = document.createElement('div');
		var myP = document.createElement('p');
		var mySpan = document.createElement('span')
		
		myDiv.id = 'box';
		myP.id = 'content';
		mySpan.id = "span1";
		
		myP.innerHTML = "成功弹出模态框";
		mySpan.innerHTML = "x";
		
		myDiv.appendChild(myP);
		myP.appendChild(mySpan);
		
		myBtn.onclick = function(){
			//console.log(myBtn.parentNode)
			myBtn.parentNode.insertBefore(myDiv,myBtn)
		}
		mySpan.onclick = function(){
			myDiv.parentNode.removeChild(myDiv)
		}
	</script>
</html>

image
image

点一点有惊喜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				 200px;
				height: 200px;
				background-color: red;
				text-align: center;
				line-height: 200px;
				margin: 20px auto;
				color: white;
				font-size: 22px;
				font-weight: blod;
			}
		</style>
	</head>
	<body>
		<div class="box">
			点击有惊喜
		</div>
	</body>
	<script type="text/javascript">
		//getElementsByClassName获取的是所有符合条件的元素,用数组保存的
		var myBox = document.getElementsByClassName("box")[0];
		
		var a = 0;
		myBox.onclick = function(){
			a++;
			if (a%4===1) {
				this.style.background = "green";
				this.innerText = "逗你玩呢";
			} else if(a%4===2){
				this.style.background = "blue";
				this.innerText = "再点一次";
			} else if(a%4===3){
				this.style.background = "transparent";
				this.innerText = "";
			} else{
				this.style.background = 'red';
				this.innerText = "点击有惊喜"
			}
		}
	</script>
</html>

image
image
image
image
image

简易留言框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			
		</div>
		<textarea id='msg'></textarea>
		<input type="button" id="btn" value="提交" />
		<button onclick="sum()">统计</button>
	</body>
	<script type="text/javascript">
		
		var ul = document.createElement('ul')
		var box =  document.getElementById('box');
		box.appendChild(ul)
		
		var msg = document.getElementById('msg');
		var btn = document.getElementById('btn');
		
		var count=0;
		btn.onclick = function(){
			var li = document.createElement('li');
			li.innerHTML = msg.value + "<span>&nbsp;&nbsp;&nbsp;&nbsp;X</span>";
			
			var lis = document.getElementsByTagName('li');
			
			if (lis.length==0) {
				ul.appendChild(li);
				count++;
			} else{
				ul.insertBefore(li,lis[0]);
				count++;
			}
			msg.value = "";
			
			var spans = document.getElementsByTagName('span');
			for (var i=0;i<spans.length;i++) {
				spans[i].onclick = function(){
					ul.removeChild(this.parentNode)
					count--;
				}
			}

		}
		function sum(){
			alert("一共有"+count+"条留言")
		}
	</script>
</html>

image

选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			#tab{
				 480px;
				margin: 20px auto;
				border: 1px solid red;
			}
			ul li{
				float: left;
				 160px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				background-color: #CCCCCC;
			}
			ul li a{
				color: #000000;
			}
			li.active{
				background-color: #FFFFFF;
			}
			p{
				height: 200px;
				display: none;
			}
			p.active{
				display: block;
				height: 200px;
				text-align: center;
				line-height: 200px;
				background-color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div id="tab">
			<ul>
				<li class="active"><a href="">我的商城</a></li>
				<li><a href="">我的收藏</a></li>
				<li><a href="">我的订单</a></li>
			</ul>
			<p class="active">商城展示</p>
			<p>收藏展示</p>
			<p>订单展示</p>
		</div>
	</body>
	<script type="text/javascript">
		var tabli = document.getElementsByTagName('li')
		var tabContent = document.getElementsByTagName('p')
		
		for (var i=0;i<tabli.length;i++) {
			tabli[i].index = i;
			tabli[i].onclick = function(){
				for (var j=0;j<tabli.length;j++) {
					tabli[j].className = '';
					tabContent[j].className = '';
				}
				this.className = 'active';
				console.log(this.index)
				tabContent[this.index].className = 'active';
			}
		}
	</script>
</html>

image
image
image

仿淘宝搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>仿淘宝搜索框</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			input{
				outline: none;
				display: block;
				 390px;
				height: 40px;
				margin-top: 20px;
				font-size: 20px;
				border: 2px solid red;
				border-radius: 5px;
			}
			label{
				position: absolute;
				top: 32px;
				left: 10px;
				font-size: 20px;
				color: gray;
			}
		</style>
	</head>
	<body>
		<div id="search">
			<input type="text" name="" id="text" value="" />
			<label for="text" id="msg">泰然城</label>
		</div>
	</body>
	<script type="text/javascript">
		var txt = document.getElementById('text');
		var msg = document.getElementById('msg');
		
		txt.oninput = function(){
			if (txt.value == '') {
				msg.style.display = 'block'
			} else{
				msg.style.display = 'none'
			}
		}
	</script>
</html>

匀速移动案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>匀速移动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 50px;
				left: 0px;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我</button>
		<div id="box">
			
		</div>
	</body>
	<script type="text/javascript">
		var btn = document.getElementById('btn');
		var box = document.getElementById('box');
		
		var count = 0;
		var timer = null;
		
		//当点击按钮时
		btn.onclick = function(){
			setInterval(function(){
				count++;
				if (count >1000) {
					clearInterval(timer)
					box.style.display = 'none'
				} else{
					box.style.left = count +'px'
				}
				
			},1)
			
		}
	</script>
</html>

5秒自动关闭广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			img{
				position: fixed;
			}
			#left{
				left: 0px;
			}
			#right{
				right: 0px;
			}
			ul li{
				font-size: 26px;
			}
		</style>
	</head>
	<body>
		<img src="../JS_dom/1.gif" id="left"/>
		<img src="../JS_dom/1.gif" id="right"/>
		<ul>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
			<li>屠龙宝刀 点击就送</li>
		</ul>
	</body>
	<script type="text/javascript">
		var left = document.getElementById('left')
		var right = document.getElementById('right')
		var timer = null;
		timer = setTimeout(function(){
			left.style.display = 'none'
			right.style.display = 'none'
		},5000)
	</script>
</html>

小米轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米滚动框</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			.wrap{
				 512px;
				height: 400px;
				border: 3px solid #808080;
				position: relative;
				overflow: hidden;
				margin: 100px auto;
			}
			.wrap span{
				 100%;
				height: 200px;
				position: absolute;		
			}
			.up{
				top: 0;
			}
			.down{
				bottom: 0;
			}
			img{
				position: absolute;
				top: 0;
				left: 0;		
			}
		</style>
	</head>
	<body>
		<div id="box" class="wrap">
			<img src="../JS_dom/mi.png" id="xiaomi"/>
			<span id="picUp" class="up"></span>
			<span id="picDown" class="down"></span>
		</div>
	</body>
	<script type="text/javascript">
		var up = document.getElementById('picUp');
		var down = document.getElementById('picDown');
		
		var img = document.getElementById('xiaomi');
		
		var count = 0;
		var timer = null;
		//鼠标移入的时候吧
		up.onmouseover = function(){
			
			//不管怎样 上来先清定时器
			clearInterval(timer);
			timer = setInterval(function(){
				count-=3;
				count >= -1070 ? img.style.top = count + 'px': clearInterval(timer);  
				
			},30)
		}
		down.onmouseover = function(){
			clearInterval(timer)
			
			timer = setInterval(function(){
				count += 1;
				count < 0 ? img.style.top = count + 'px': clearInterval(timer);
			})
		}
	</script>
</html>

轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无缝轮播</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			ul{list-style: none;}
			.box{
				 600px;
				height: 200px;
				margin: 50px auto;
				overflow: hidden;
				position: relative;

			}
			ul li{
				float: left;
			}
			.box ul{
				 400%;
				position: absolute;
				top: 0;
				left: 0;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="../JS_dom/image/01.jpg"/></li>
				<li><img src="../JS_dom/image/02.jpg"/></li>
				<li><img src="../JS_dom/image/03.jpg"/></li>
				<li><img src="../JS_dom/image/04.jpg"/></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementsByClassName('box')[0];
		console.log(box)
		var ul = box.children[0];
		
		var num = 0;
		function autoPlay(){
			num--;
			num <= -600 ? num=0 : num ;
			ul.style.left = num +'px';
		}
		
		//鼠标移动上去
		box.onmouseover = function(){
			clearInterval(timer)
		}
		//鼠标拿开的时候
		box.onmouseout = function(){
			timer = setInterval(autoPlay,30)
		}
	</script>
</html>

JavaScript的BOM知识点

浏览器对象模型（BOM）

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的操作。

BOM输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//DOM输出系列
		
		//1.alert() 弹框输出
		
		//2.console.log() 用于浏览器调试
		console.log('111')
		
		//3.prompt() 获取用户输入
		var pro = prompt('请输入你的名字：');
		console.log(pro)
		
		//prompt(value,defaultValue) 自动输入defaultValue
		var pro1 = prompt('请输入你的学校：','城关中学');
		console.log(pro1)
		
		//4.confirm() 弹框 如果选择确定则返回true，如果选择取消则返回false
		var con = confirm('是否要关闭？')
		console.log(con)
	</script>
</html>

open_close方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="window.open('https://www.baidu.com')">打开百度首页</button>
		<button>小米官网</button>
		<button>关闭当前页面</button>
		<button id="new">打开一个空白页</button>
	</body>
	<script type="text/javascript">
		//open和close方法
		//1.open()  打开方法
		var btn = document.getElementsByTagName('button')[1];
		console.log(close)
		
		btn.onclick = function(){
			open("https://www.mi.com")
		}
		
		var close1 = document.getElementsByTagName('button')[2];
		
		close1.onclick = function(){
			if (confirm('是否关闭? ')) {
				console.log(111)
				close();
			}
		}
		
		//打开一个空白页
		var openNew = document.getElementById('new');
		openNew.onclick = function(){
			open('about:blank','_self')
		}
	</script>
</html>

BOM的其他元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//1.获取浏览器的信息 返回浏览器的用户设备信息
		console.log(window.navigator.userAgent)
		
		//2.windows.location用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
//		console.log(window.location)
		
		//这个方法使用的比较多

		//window.location.href = 'https://www.baidu.com';
		
		//3.全局刷新 window.location.reload()  尽量少用
		//window.location.reload()
	</script>
</html>

client系列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				 200px;
				height: 200px;
				border: 5px solid red;
				padding: 10px;
				/*margin: 10px auto;*/
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById('box')
		/*
		 clientTop:指的是上面border的宽度
		 clientLeft:指的是左边border的宽度
		 
		 clientWidth：指的是整个内容区域加上上下两个padding的宽度
		 clientHeight:指的是整个内容区域加上左右两个padding的宽度
		 * */
		console.log(box.clientTop)
		console.log(box.clientLeft)
		console.log(box.clientHeight)
		console.log(box.clientWidth)
	</script>
</html>

屏幕的可视区域

所谓的屏幕克是区域，就是当你首次打开浏览器 能看见的区域。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//
		window.onload = function(){
			console.log(document.documentElement.clientWidth)
			console.log(document.documentElement.clientHeight)
		}
	</script>
</html>

我们也可以对屏幕的大小进行监听，当屏幕或宽度改变，那么我们的值也跟着改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//
		window.onload = function(){
			console.log(document.documentElement.clientWidth)
			console.log(document.documentElement.clientHeight)
			
			window.onresize = function(){
				console.log(document.documentElement.clientWidth)
				console.log(document.documentElement.clientHeight)
			}
		}
	</script>
</html>

offset系列

没有设置盒子定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#wrap{
				
			}
			#box{
				 200px;
				height: 200px;
				border: 1px solid red;
				padding: 10px;
				margin: 10px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="box">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		var box = document.getElementById('box');
		
		/*
		 如果没有设置定位，那么：
		 	offsetTop是指上方盒子margin的宽度
		 	offsetLeft指的是左边盒子margin的宽度
		 	offsetHeight指的是盒子 border+padding+content的高度
		 	offsetWidth指的是盒子border+padding+content的宽度
		 * */
		console.log(box.offsetTop)
		console.log(box.offsetLeft)
		console.log(box.offsetWidth)
		console.log(box.offsetHeight)
		
	</script>
</html>

如果设置了父相子觉，那么

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#wrap{
				position: relative;
				 400px;
				height: 400px;
				border: 1px solid black;
			}
			#box{
				position: absolute;
				top: 20px;
				left: 20px;
				 200px;
				height: 200px;
				border: 1px solid red;
				padding: 10px;
				margin: 10px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="box">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		var box = document.getElementById('box');
		
		/*
		 如果设置定位，那么：
		 	offsetTop是指上方盒子外边框到父盒子顶部的距离
		 	offsetLeft指的是左边盒子的外边框到父盒子左边的距离
		 	offsetHeight指的是盒子 border+padding+content的高度
		 	offsetWidth指的是盒子border+padding+content的宽度
		 * */
		console.log(box.offsetTop)
		console.log(box.offsetLeft)
		console.log(box.offsetWidth)
		console.log(box.offsetHeight)

		
	</script>
</html>

image

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaoyafei/p/9682143.html