• 一篇解决JavaScript

    华子目录

    JavaScript介绍

    JavaScript简称js，是一种浏览器解释型语言，是可以嵌入在html文件中交给浏览器解释执行的。主要用来实现网页的动态效果，用户交互以及前后端的数据传输等。
    JavaScript能做什么？
    1.网页的动态效果
    2.前后端的交互（数据提交，人机交互）
    3.进阶（前端的高级框架：vue.js React.js Node.js）(VR/AR开发：Three.js)
    注：html/css不是编程语言，JavaScript是一门正儿八经的编程语言

    JavaScript的组成

    1.ECMA Script简称ES，是js的语法规则，目前最新版本ES13
    2.ECMA是一个欧洲计算机制造商协会，主要做一些评估，开发和计算机标准
    3.BOM（Browser object model）：浏览器对象模型，主要是对浏览器进行操作（交互，弹窗，输入框）
    4.DOM（Document object model）：文档对象模型，负责对网页里的内容进行操作（网页里的所有内容都称为文档）

    JavaScript书写位置

    内部

    内部JavaScript直接写在html里面，用script标签包裹住

    语法：


    • 1
    • 2
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>
    <script>
        document.write('麦当')
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    外部

    外部JavaScript代码写在以.js结尾的文件里面，通过script标签引入到html页面中

    语法：


    • 1
    • 2
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>
body>
<script src="./demo.js">script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    注：1.如果用外部写法，再在script标签内写js的话是无效的
    2.src不止能引入本地的文件，也可以通过cdn加速的方式，获取实时js代码（相当于引入网络文件）
    3.引入js最好放在网页最后/body的最后

    js注释

    作用：主要写一些代码思路逻辑
单行注释：//
多行注释：/*内容*/
快捷方式：ctrl+/

    • 1
    • 2
    • 3
    • 4

    js输入（prompt）

    prompt：在进入网页时，弹出输入框，让用户输入内容，输入框里可以放提示文本
语法格式：
	prompt()
	prompt(‘提示内容’)
案例：prompt('请输入你的名字')

    • 1
    • 2
    • 3
    • 4
    • 5
    prompt输入用来赋值：
prompt得到的数据字符串类型（输入方法给变量赋值）
	let name = prompt('请输入你的名字')//在弹出框中显示
	alert('欢迎你'+name)

    • 1
    • 2
    • 3
    • 4

    js输出

    document.wtite(内容)：在网页里写内容，能够识别标签，字符串(字符串，标签都要用引号包裹)需要用引号包裹，数字不用。
语法格式：
	document.write(内容)
案例代码：
	document.write(888)
	document.write('多喝岩浆')
	document.write('内容')

console.log(内容)：控制台输出日志，在控制台输出一个信息（主要是用来调试js数据的）（不需要加标签，因为不是给网页看的）
语法格式：
	console.log(内容)
案例代码：
	console.log(888)
	console.log('多喝岩浆')	

alert：弹窗，在网页里显示一个弹窗
语法格式：
	alert(内容)
案例代码：
	alert('麦当')
	alert(888)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    js变量

    1.什么是变量？
	一个用来存储东西的容器，取个有意义的名字，方便后续使用
2.命名规范：
	变量名可以由数字,字母,下划线,$组成,禁止以数字开头(中文不推荐)
	变量名严格区分大小写
	不要用关键字命名
	见名知意
3.声明符：
	let：es6新出的语法，作用和var类似，但是在作用域上let更严谨
4.变量的使用：
	（1）声明变量
		let 变量名  //声明一个空的变量，没有赋值
		let 变量名=值  //声明一个变量并赋值
		let name
		let age=18
	（2）声明多个变量
		let 变量名=值,变量名=值
		let sex='女',name='小川'
	（3）输出变量
		document.write(变量名)
		console.log(变量名)
		alert(变量名)
	（4）输出多个变量
		document.write(变量名,变量名)
		console.log(变量名,变量名)
		alert(变量名,变量名)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    注：1.直接写 变量名=值，不写let，写法上是允许的，但是非常不推荐
    2.变量使用let关键字声明，但是未赋值，变量初始值为undefined，不会报错
    3.使用let关键字重复声明一个变量会报错

    js基本数据类型

    js中查看数据类型：typeof 变量名
	console.log(typeof 变量名)
	console.log(typeof teacher)

    • 1
    • 2
    • 3

    number（数值类型）

    JavaScript不区分整数 浮点数等 统一都叫number --> 年龄/金钱/身高
	let 变量名 = 数值
	let age = 18
	let height = 188
	console.log(age,height)
	console.log(typeof age)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    string（字符串）

    通过单引号(''),(""),或者反引号(``)包裹的数据都叫字符串-->文字信息/地址/名字
	let 变量名 = '字符'
	let 变量名 = "字符"
	
	let name='杨洋'
	let food="螺蛳粉"
	let hobby=`睡觉`
	
	console.log(typeof name,name)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    反引号主要是作为模板字符串使用 帮助我们更好的输出一些带有变量的数据

    格式：`字符${变量名}字符`
	let name = `墨离`,age = 18
	console.log(`我叫${name}我今年${age}岁`)//这一行里面必须是用反引号包裹

    • 1
    • 2
    • 3

    Boolean（布尔类型）

    布尔类型主要用于逻辑判断 只有两个值 true/false
	let 变量名 = true/false
	
	let on_line = true
	let not_online = True  //会报错 没有被定义
	console.log(on_line,typeof on_line)
    console.log(not_online,typeof not_online)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    undefined（未定义）

    undefined即是类型也是值 指的就是未定义的意思 当你声明变量没有赋值时,
他的值就为undefined
	let 变量名
	let test
	console .log (test,typeof test)

    • 1
    • 2
    • 3
    • 4
    • 5

    null（空）

    null和Python里的none类似 表示的是值为空 输出类型为对象(空对象)
	let bf = null
	console.log(bf,typeof bf)

    • 1
    • 2
    • 3

    js转义字符

    \n 换行
\t 制表符tab键
\\ 正常输出一个斜杠
\' 正常输出一个引号

    • 1
    • 2
    • 3
    • 4

    注意:js没有原始字符串 不能像Python那样在字符串前面加r取消转义

    js类型转换

    在开发学习中 经常会遇到需要把一个数据转换成其他类型使用 这个时候就要类型转换
	1 + '1'
	1 - '1'
	
	隐式类型转换:
		程序运行过程中自动执行 自动发生一种转换机制 主要体现在字符串和数值进行运算时
		+号会优先识别为拼接 其他的就是为正常数值运算
		
	强制类型转换:
		手动把数据转换为指定的数据类型
		Number(数据)--把数据转换为number类型
			1.如果转换失败 结果为NaN
			2.NaN也是number类型 表示的非数字 not a number
		String(数据)--把数据转换为string类型
		Boolean(数据)--把数据转换为Boolean类型 在转换时 有值为真无值为假 (0,-0,undefined,null)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    运算符类型

    运算符 == 带有特定的功能的符号
算术运算符:+ - * / ** %
	**取幂:3**3 = 27-->原理 3*3*3 3**4 3*3*3*3
	% 取余:11%3 = 2-->原理 11-3 直到减不下去为止 还剩多少就是取余 
	
逻辑运算符:
	&&: 逻辑与and 当有多个条件时 都满足才为真
	||: 逻辑与or 当有多个条件时 满足一个就为真
	!: 逻辑与非not 反骨仔 什么都和你反着来
	
赋值运算符:
	= += -= *= /= 
	a+=b --> a=a+b
	
关系运算符:
	== < > >= <=
	
单目运算符:
	++ -- 自增/减1
	++在前,先自增再赋值;先+1 再运行
	++在后,先赋值再自增;先运行 再+1
	let i = 10
        i++
        ++i

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        // let name=prompt('请输入你的姓名')
        // alert('你好'+name)
        // console.log('你好麦当')
        // console.log(888)
        // document.write(888)
        // let name='麦当',age=20
        // document.write(name,age)
        // let num=10,count=3
        // console.log(num%count)
        // console.log(num+count)
        // console.log(`${num/count}`)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    js流程控制

    程序三大结构:
顺序结构:程序是由上往下执行 遇到报错就终止
选择结构:通过不同条件走向不同分支结果
循环结构:通过判断条件是否满足从而把一段代码重复执行

    • 1
    • 2
    • 3
    • 4

    分支语句

    if语句的作用'条件判断'-->根据判断结果执行对应语句
	if :如果
	else :否则
	else if :或者

三种分支的情况:
	1.单分支:满足条件就执行if里的代码 否则不执行
	2.双分支:满足条件就执行if里的代码 不满足就执行else里的代码
	3.多分支:如果满足if判断的条件 就执行if里的代码 如果不满足接着判断是否满足else if的代码 如果没满足就执行else if 如果都不满足就执行else

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    单分支

    语法格式:
	 if(判断条件)
	 {
	 	执行语句
	 }

    • 1
    • 2
    • 3
    • 4
    • 5
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
     let name=prompt('请输入你的名字')
     if(name=='麦当')
     {
        document.write(`${name}`)
     }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    双分支

    语法格式:
	 if(判断条件)
	 {
	 	执行语句
	 }
	 else
	 {
	 	执行语句
	 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let name = prompt('请输入你的名字')
        if (name == '麦当') {
            document.write(`${name}`)
        }
        else 
        {
            document.write('你不是麦当')
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    多分支

    语法格式:
	 if(判断条件)
	 {
	 	执行语句
	 }else if(判断条件)
	 {
	 	执行语句
	 }
	 else
	 {
	 	执行语句
	 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let name = prompt('请输入你的名字')
        if (name == '麦当') {
            document.write(`${name}`)
        }
        else if(name=='迪亚')
        {
            document.write('你是迪亚')
        }
        else
        {
            document.write('你不是麦当')
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    注：有值为真，没值为假(0/0.0/undefined/‘’/null)

    switch分支

    case --> 选择
break --> 结束
default --> 默认值
	语法格式:
		switch(数据)
		{
			case 情况1:
				执行语句
			break
			case 情况2:
				执行语句
			break
			case 情况3:
				执行语句
			break
			case 情况4:
				执行语句
			break
			default:
				执行语句
			break
		}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let num = Number(prompt('请输入你的成绩'))
        switch(parseInt(num/10))  //取整
        {
            case 10:
            case 9:
                document.write('优秀')
                break
            case 8:
                document.write('良好')
                break
            case 7:
                document.write('合格')
                break
            case 6:
                document.write('及格')
                break
            default:
                document.write('不及格')
                break
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    while循环

    语法格式:
        while(循环判断)
        {
            执行语句
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let num = 0
        while(num<10)
        {
            document.write(`${num+1}、麦当
    `    )
            num++
        }
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    do while循环

    语法格式:
do
{
	执行代码
}while(循环判断)

    • 1
    • 2
    • 3
    • 4
    • 5
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let num = 0
       do
       {
        document.write(`${num+1}、麦当
    `    )
        num++
       }while(num<10)
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    for循环

    for(初始化变量;循环条件;更新操作){
	执行语句
}

    • 1
    • 2
    • 3
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
      for(let i=0;i<10;i++)
      {
        document.write(`${i+1}、麦当
    `    )
      }
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    break与continue

    1.break 强制结束循环
2.continue 结束当次循环 开始下一次循环

    • 1
    • 2

    js函数基础

    函数:把一些经常使用的代码包装起来 起个有意义的名字 以后需要用的时候直接调用

    函数的基本使用(function声明函数)

    1.定义函数
	function 函数名(){
		函数内容
	}
	function fun(){
		alert('多喝岩浆')
	}
2.调用函数
	函数名()
	fun()

输出语句(函数名()) //调用函数并且输出返回值
	console.log(fun()) //先调用函数，如果没有返回值 为undefined
	document.write(fun()) //先调用函数，如果没有返回值 为undefined


函数的命名规范:
	1.由数字,字母,下划线组成
	2.区分大小写Fun fun
	3.不能数字开头/不能使用关键字(if else)
	4.见名知意
	5.自定义函数 尽量使用纯小写

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    函数的返回值(return)

     function 函数名(){
        函数内容
        return 返回值
    }


返回值可以用来输出 赋值
	let 变量名 = 函数名()
	输出语句(函数名())
没有设置返回值的情况下 返回值默认为undefined	

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        function fun(){
            document.write('麦当')
            return true
        }
        let result = fun()
        console.log(result)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    函数的参数

    形参:没有具体数据 -- 定义函数
实参:有具体数据 -- 调用函数

	function 函数名(参数1,参数2){
		函数内容
	}
	函数名(数据1,数据2)
	
	function water(name){
		console.log(`${name}同学咱们多喝岩浆 有益身体健康`)
	}
	water('段君虎')
    water('吴昊')
    
	function water(name,money) {
     console.log(`${name}同学咱们多喝岩浆 一杯岩浆${money}元`)
    }
    water('段君虎')
    water('吴昊')
    // 注意:如果只传一个参数 不会报错只是会出现未定义

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    默认值参数

    在声明参数的时候就赋值

    	function 函数名(参数1,参数2=值){
		函数内容
	}
	函数名(参数)
	
	function fun3(name,talk='多喝岩浆'){
		console .log(`我叫${name} 老师让我${talk}`)
	}
	fun3('大百草')	
	fun3('大百草','哈哈哈')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        function fun(name,age,sex='男'){
            document.write(`${name}今年${age}岁了，性别${sex}
    `    )
            return true
        }
        fun('麦当',20)
        fun('迪亚',18,'女')
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    匿名函数（自动执行函数）

    特点：
    只执行一次

    匿名函数一般是写在最前面 或者需要前面的代码都执行完了 才会运行
如果要在下方运行有两种解决方式
	1.在匿名函数前加!
	2.在匿名函数前一段代码/自己最后的代码加上;
	
语法:
	!(function(形参){
		函数内容
	})(实参);
	
	!(function(name){
		alert(`${name},今晚一起嗨皮吧`)
	})('婷婷');

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    匿名函数在最后面，需要加！和；

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        function fun(name,age,sex='男'){
            document.write(`${name}今年${age}岁了，性别${sex}
    `    )
            return true
        }
        fun('麦当',20)
        fun('迪亚',18,'女')

        !(function(name){
            alert(`${name},今晚一起嗨皮吧`)
        })('麦当');
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    匿名函数在前面什么都不需要加

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        (function(name){
            alert(`${name},今晚一起嗨皮吧`)
        })('麦当')
        function fun(name,age,sex='男'){
            document.write(`${name}今年${age}岁了，性别${sex}
    `    )
            return true
        }
        fun('麦当',20)
        fun('迪亚',18,'女')
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    作用域（js中var与let的区别）

    1.let声明的变量是块级作用域（花括号里面），var是函数作用域和全局作用域
注：let是可以定义全局变量，局部变量，块级作用域的变量
2.通过var关键字声明的变量没有块级作用域，在快{}内声明的变量可以从快之外进行访问
  通过let关键字声明的变量拥有块级作用域，在快{}内声明的变量无法从快外访问

    • 1
    • 2
    • 3
    • 4
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
       let age = 20
       function fun(){
        let age = 19
        document.write(age)//就近原则
       }
       document.write(age)
       fun()
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
    {
        var x=10
    }
    document.write(x)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    js复习笔记

    http://c.biancheng.net/view/9356.html

    • 1

    js内置对象

    js的对象也是由属性和方法组成，调用方式也是通过对象.xx的方式进行访问的

js的内置对象类似于python的内置模块

js自定义对象：通过键值对的方式来保存数据
	let 对象名={
		键:值,
		键:值
	}

注：对象里不要加let

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let msg = {
            name:'tingting',
            age:18,
            action:function(name1){     //创建方法
                document.write(`我叫${name1}`)
            }
        }
        document.write(msg.name)
        document.write(msg.age)
        msg.action('麦当')    //调用方法
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    数组（array）

    数组的表现形式：
用一对中括号[]包裹起来的数据，里面的数据用逗号隔开，数据类型不限
	let 数组名 = [数据1,数据2,数据3]
	let tt = ['婷婷',18,'不男不女',false]
数组里的数据都是基于下标来保存的，默认从0开始

可以通过数组名[下标]方式访问到对应的数据
	数组名[下标]
可以通过数组名.length属性，获取数组的长度
	数组名.length
tips:
	1.数组是没有负数下标的
	2.数组是没有切片的
	3.数组里的内容可以被修改
		数组名[下标]=值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let tt = ['麦当',18,'不男不女',false]
        document.write(tt[0])
        tt[0]='婷婷'
        document.write(tt)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    数组方法

    push:在数组最后追加数据 可以追加多个数据 返回值为追加后的数据长度
	数组名.push(数据)
	数组名.push(数据1,数据2)
	
pop:删除数组最后的一个数据 返回值为删除数据
	数组名.pop()
	
unshift:在数组最前面添加数据 可以添加多个数据 返回值为追加后的数据长度
	数组名.unshift(数据)
	数组名.unshift(数据1,数据2)
	
shift:删除数组的第一个元素 返回值为被删除的元素
	数组名.shift()
	
splice:增删数据 取出数组的一部分数据
	数组名.splice(起点下标,取数据数量)
	
toSting:把数组转换为字符串 返回值为转换结果
	数组名.toString()
	
reverse:把数组的数据反转过来
	数组名.reverse()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    DOCTYPE html>
<html lang="en">

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

    <title>Documenttitle>
head>

<body>
    <script>
        let name = ['南风过熙', '孟宇', '德红', '注定']
        // push:在数组最后追加数据 可以追加多个数据 返回值为追加后的数据长度
        name.push('山超')
        console.log(name, name.push('顾冉', '白露'))

        // pop:删除数组最后的一个数据 返回值为删除数据
        //js会把里面所有的代码执行完了在渲染
        console.log(name.pop())


        // unshift:在数组最前面添加数据 可以添加多个数据 返回值为追加后的数据长度
        console.log(name.unshift('小杨','婷婷'))

        // shift:删除数组的第一个元素 返回值为被删除的元素
        console.log(name.shift(),name)

        // splice:增删数据 取出数组的一部分数据
        let arr = [1,8,9,7,1,8,9]
        let num = arr.splice(2,3)
        console.log(arr,num)

        // toSting:把数组转换为字符串 返回值为转换结果
        let str=arr.toString()
        console.log(str,typeof str)

        // reverse:把数组的数据反转过来
        console.log(name.reverse())
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    字符串(String)

    声明方式：
	let str1 = 'hello'
	let str2 = new String('hello')
	这两个都是新建string对象，都是一样的
属性：
	length 获取字符串里数据个数
	字符串.length
方法：
	toUpperCase:把字符串里字母都转为大写
	toLowerCase:把字符串里字母都转为小写
	字符串.toUpperCase()
	字符串.toLowerCase()
	
	subsstring:截取字符串(切片 取头不取尾)
		字符串.subsstring(起点,终点)
	split:分割字符串 通过指定字符 把字符串分割为数组
		字符串.split('分割字符')	
	indexOf:获取指定元素的下标 有两个参数:1.要找的数据 2.起点
		字符串.indexOf('数据','起点下标')
	charCodeAt:获取字符串对应的编码
		字符串.charCodeAt(下标)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
        let str1 = new String('tingting')
        console.log(str1.length)

        let str2 = 'Hello Word'
        console.log(str2.toLocaleLowerCase()) //小写
        console.log(str2.toLocaleUpperCase()) //大写
        console.log(str2.charCodeAt(1))

        let str3 = '多喝热水水热喝多'
        console.log(str3.substring(1,4))//字符串切片 括号内起点 终点
        console.log(str3.split('水')) //切割 基于括号内的数据进行分割
        console.log(str3.indexOf('喝')) //找到指定数据所在的下标 只写一个值 默认从0开始
        console.log(str3.indexOf('喝',3))//找到指定数据所在的下标 起点下标3开始搜索
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    Math

    属性:
	PI -->圆周率
	Math.PI

方法:
	random:生成0-1之间随机数
	ceil:数据向上取整 不管小数 整数+1
	floor:数据向下取整 不要小数 保留整数
	round:四舍五入求整
	max:获取最大值
	min:获取最小值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    DOCTYPE html>
<html lang="en">

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

<body>
    <script>
        document.write(Math.PI + '
    '    ) //获取圆周率

        // random: 生成0 - 1之间随机数
        let num = Math.random() * 10
        // let num = parseInt(Math.random()*10)
        document.write(num)
        document.write('
    '    )

        // ceil:数据向上取整 不管小数 整数 + 1
        document.write(Math.ceil(num))
        document.write('
    '    )

        // floor:数据向下取整 不要小数 保留整数
        document.write(Math.floor(num))
        document.write('
    '    )

        // round: 四舍五入求整
        document.write(Math.round(num))
        document.write('
    '    )

        // max: 获取最大值
        console.log(Math.max(10,70))
        document.write('
    '    )
        // min: 获取最小值
        console.log(Math.min(10,70))
        document.write('
    '    )
        script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    Date（日期）

    日期对象顾名思义就是用来显示 时间/日期

Date() --> Date对象
let 变量名 = Date() 声明Date日期对象

getTime() -->获取格林威治时间戳 1970 1 1距离现在多少秒
getFullYear() --> 获取当前年份
getMonth() --> 获取当前月份 他计算月份0开始计算 所以要获取本月月份需要+1
getDate() -->获取日
getHours() -->获取小时
getMinutes() -->获取分钟
getSeconds() -->获取秒钟

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
      let d = Date() //声明Date日期对象
      document.write(d)
      let e = new Date()//创建Date日期对象
      document.write(e)
      let this_time = new Date('1970-7-7 07:07:07') //自定义时间
      document.write(this_time)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <script>
      let d = new Date() //创建Date日期对象,获取当前时间
      document.write(d.getTime())//获取时间戳   1970 1 1距离现在多少秒
      document.write('
    '    )
      document.write(d.getFullYear())//获取当前年份
      document.write('
    '    )
      document.write(d.getMonth()+1)//获取当前月份 他计算月份0开始计算 所以要获取本月月份需要+1
      document.write('
    '    )
      document.write(d.getDate())//获取日
      document.write('
    '    )
      document.write(d.getHours())//获取小时
      document.write('
    '    )
      document.write(d.getMinutes())//获取分钟
      document.write('
    '    )
      document.write(d.getSeconds())//获取秒
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    DOM操作

    学习网址

    DOM学习： http://c.biancheng.net/view/9360.html
交互事件学习： https://www.runoob.com/jsref/dom-obj-event.html

    • 1
    • 2

    文档对象模型（Document Object Model，简称 DOM）， 是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。

    当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在 DOM 中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个逻辑树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象，如下图所示：
    在这里插入图片描述

    Document对象

    当浏览器加载一个 HTML 文档时，会创建一个 Document 对象，Document 对象是 DOM 树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。

    提示：Document 对象是 Window 对象的一部分，所以您可以通过 window.document 来访问 Document 对象。

操作网页元素分为两步:
1.找出元素
2.对应的元素实施操作

    • 1
    • 2
    • 3
    • 4
    • 5

    DOM元素的选中方式

    Element -- 元素
函数语法基本都是小驼峰
1.通过id获取元素
	document.getElementById() 
2.通过class获取元素
	document.getElementsByClassName() 
3.通过标签名获取元素
	document.getElementsByTagName()

获取的元素默认值为HTMLCollection 类似于数组 但是他不是数组
	同:数据都有下标的概念/数据可以被遍历
	异:他不可以使用数组方法
基于这个原因 如果直接对伪数组进行dom操作都是无效 我们要操作的不是这个伪数组 而是这个伪数组里的元素 所以要添加下标来访问对应的元素

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    DOM操作文本内容

    innerText:读取/修改元素里的文本内容(不识别标签语法)
innerHTML:读取/修改元素里的文本内容(识别标签语法)

    • 1
    • 2
    DOCTYPE html>
<html lang="en">

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

<body>
    <div id="box">多喝岩浆div>

    <div class="water">123div>
    <div class="water">456div>
    <div class="water">789div>

    <p>罗普p>
    <p>婷婷p>
    <p>吴昊p>

    <script>
        //通过id获取元素
        let box = document.getElementById('box')
        box.innerText = '多喝热水' //修改元素的文本内容
        console.log(box, typeof box)
        console.log(box.innerText)// 查看元素的文本内容

        //通过class获取元素
        let water = document.getElementsByClassName('water')
        console.log(water, typeof water) //伪数组
        // water.innerText = '早上好'
        // water[0].innerText = '早上好'
        // water[1].innerText = '中午好'
        // water[2].innerText = '晚上好'

        for (let i = 0; i < water.length; i++) {
            water[i].innerText = `要多喝热水 这是第${i}杯`
        }

        //通过标签名获取元素
        let p = document.getElementsByTagName('p')[1]
        //取标签元素的时候 就指定 我要取的是下标为1的元素而不是全部
        p.innerText='小概率'
        // p[1].innerText='小概率'

    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    DOM操作元素属性和样式

    操作元素属性 --> 获取到元素后 ,通过元素名. 的方式进行操作
	元素名.属性名 //使用元素的属性
	元素名.属性名 = xxx // 修改元素属性
	
	元素名.title //设置/获取元素的标题
	元素名.src //设置/获取元素的资源路径
	元素名.className //设置/获取元素的类名
	
操作元素样式(css) --> 获取元素后 通过元素名.style.样式名 的方式进行操作
	元素名.style.样式名 //访问该元素的css样式
	元素名.style.width // 访问元素的宽度样式
	
如果css的样式有(-)减号作为连接符 在用js写时候 不写链接符而是用小驼峰命名法
font-size --> fontSize
background-color --> backgroundColor

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    注：就算只有一个class命名的盒子，它也是一个伪数组，也有下标0

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #096;
        }
        .tt{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    style>
head>
<body>
    <img src="../img/2.jpg" alt="">

    <div class="box">div>

    <script>
        let img = document.getElementsByTagName('img')[0]
        console.log(img.src) //查看img路径的位置

        img.src = '../img/3.jpg'

        let box = document.getElementsByClassName('box')[0]
        box.className = 'tt'
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>
<body>
    <div class="box">div>
    <div id="hot">多喝岩浆div>

    <script>
        let hot = document.getElementById('hot')
        hot.style.color = 'pink'
        hot.style.fontSize = '66px'

        let box = document.getElementsByClassName('box')[0]
        box.style.backgroundColor = '#096'
        box.style.border = '3px solid #ccc'

    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    交互事件（event）

    事件指的是用户跟网页内容产生交互时的操作:
	按下键盘/点击鼠标/双击鼠标/输入文本
	
当这些事件触发时 就可以通过JavaScript的监听器来获取到交互情况 并且运行对应的功能

事件流程:
	1.获取事件对象 --> 会基于什么进行交互
	2.绑定监听事件 -->
		事件对象.监听事件 = function(){} 当触发事件时 执行函数里的功能
		box.onclick = function(){功能代码} -->当我点击box时 触发功能
		onclick:鼠标点击事件

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    切换图片小案例

    DOCTYPE html>
<html lang="en">

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

<body>
  <img src="./img/meinv1.png" alt="" id="pic" width="500px" height="500px">
  <button id="up">上一张button>
  <button id="down">下一张button>
  <script>
   let pic = document.getElementById('pic')
   let up = document.getElementById('up')
   let down = document.getElementById('down')
    let max = 4, min = 1
    let now_pic = min
    down.onclick = function () {
      if (now_pic == max) {
        now_pic = min
      }
      else {
        now_pic++
      }
      pic.src = `./img/meinv${now_pic}.png`
    }
    up.onclick = function () {
      if (now_pic == min) {
        now_pic = max
      }
      else {
        now_pic--
      }
      pic.src = `./img/meinv${now_pic}.png`
    }
  script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
  • 相关阅读:
    SSM房屋租赁系统
    mybatis的使用技巧8——联合查询union和union all的区别和用法
    设计模式学习
    shell之免交互
    盲盒小程序 跨平台兼容性测试策略：打造无缝体验
    SpringBoot整合Shiro(仅测试认证)
    Linux常用命令——find命令大全
    C/C++语言 数据结构 创建邻接表存储的无向图及其邻接表的输出
    面经积累---持续更新
    kubernettes之RBAC基于角色的访问控制
  • 原文地址：https://blog.csdn.net/huaz_md/article/details/132898477