当前位置：首页 > article >正文

专业四js知识点

article 2025/3/7 3:13:53

这里写目录标题

js基础
- - js能用来做什么？
  - js的三大组成部分：
  - js的两种引入方式：
  - 控制台：
  - js的三种输出方式：
  - js的两种交互方式：
js语法结构
- - - js是区分大小写的，js是采用驼峰法命名 1。
    - 标识符：用来命名变量、常量、函数、类等的名称 2 。
    - 变量的定义方式 3 。
    - 定义多个变量可以使用逗号分隔开 4 。
    - 可选的分号 5。
    - js常见的关键字和保留字 6。
    - 严格模式 7。
运算符
- 算数运算符
- - +号运算符
  - -号运算符
  - ++ / --
  - - a++：先进行赋值操作，后进行a+1操作
    - ++a：先进行a+1操作，再进行赋值
- 逻辑运算符
- - - &&：与，相当于and
    - ||：或，相当于or
    - ！：非，相当于not
- 比较运算符
- 赋值运算符
- 三元运算符
- - - 格式：
    - 三元运算符嵌套
语句
- 条件语句
- - if语句：
  - if else语句：
  - if elseif else语句：
  - switch语句：
- 循环语句
- - while语句：
  - do while：
  - for 循环
数据类型
- - typeof运算符：
- **数值：**
- - tofixed(n)是：保留n位小数，四舍五入
  - 进制之间的转换：
  - 数值强制类型转换：
  - - parseInt（）：
    - parseFloat（）：
    - Number（）：
- 字符串：
- 布尔：
- **null**：
- **undefined**：未定义
引用数据类型：
- **对象：**
- - 创建方式1
  - 设置或访问方式2
  - this关键字：在对象中代表当前对象3
  - 对象的序列化和反序列化 4
  - 对象属性的删除5
- 数组：
- - 创建数组的方式1：
  - 数组可以通过下标来访问，下标从0开始，访问未定义的数组下标返回undefined 2.
  - 可以通过下标可以新增或者修改数组的内容 3。
  - 稀疏数组的概念4：
  - length属性可以返回数组的长度5.
- 方法 function：
- - 定义方式：
  - 方法中的形参：
  - 方法也可以不传递参数，可以通过arguments属性来获取参数
  - 方法可以通过return来返回值。
- 例题：
- - 写一个冒泡排序
  - 输出100以内与7有关的数
  - 输出1-100之间所有不能被3整除的数，并输出这些整数的和
  - 求10的阶乘；
  - 求年利率
  - 有1元,2元,5元的钱,现在凑成20元,有多少种可能性?
  - for循环打印九九乘法表
  - 一张纸的厚度是0.0001米，将纸对折，对折多少次厚度超过珠峰高度8848米
  - 闰年
  - 1+1/2+1/3…+1/20 等于多少？
DOM
- DOM:文档对象模型。
- document：是文档对象的顶级对象。
- 静态属性：
- 节点分为：
- - 元素结点、属性结点、文本结点。
- 获取结点：
- 更改对象的样式：
- - 1、通过style属性来更改样式。
  - 2、通过修改className属性来更改样式
  - 3、通过classList来修改样式
  - - 对象.classList.add(样式名称)：添加样式
    - 对象.classList.remove(样式名称)：移除样式
    - 对象.classList.contains(样式名称)：判断样式是否存在
  - className 和 classList的区别：
  - - classList可以给对象添加多个样式；
    - className只能添加一个。
- 事件：
- - 事件的绑定方式：
  - - 1、绑定到html的标签上
    - 2、绑定到文档对象上
  - onclick（）：鼠标单击事件
- 获取DOM文档对象的方式
- remove和display：none的区别：
数组
- 1、创建数组的方式
- 2、length 属性可以用来获取数组的长度
- 3、新增和删除
- - push（）：向数组的尾部新增一个或者多个元素
  - unshift（）：向数组的头部新增一个或者多个元素
  - pop（）：从数组的尾部删除元素
  - shift（）：从数组的头部删除元素
- splice（）
- - splice（index,0,val,val2......）:从数组的index下标开始新增N个元素
  - splice（index，num）：从数组的index下标开始删除num个元素，删除完后会返回删除的元素组成的新数组
  - splice（index，num，val，val1.......）：从数组的index下标开始删除num个元素并且新增N个元素。
  - delete 运算符也可以用来删除，但不会更改数组的长度。
- 数组的静态方法：
- - Array.isArray( )：检查是否为数组
  - 数组元素位置的查找：
  - - indefOf（）：从前向后查找，存在则返回元素下标，不存在返回-1；
    - lastIndefOf（）：从后向前查找，存在则返回元素的下标，不存在则返回-1；
    - includes（）：判断元素是否存在，存在返回true，不存在则返回-1；
- 一维数组的去重
- 二维数组的去重:
- 排序：
- - reverse（）：倒序
  - sort（）：排序
  - - 1、如果不传值的情况下，按照ASCII值排序
    - 2、升序
    - 3、降序
- concat（）：合并数组
- join（）：将数组转换为字符串
- slice（）：数组截取，不会对原数组做影响
- - slice（）：不传值的情况下截取整个数组
  - slice（start）：从start位置开始截取到末尾
  - slice（start，end）：从start位置开始截取到end，不包括end位置
  - slice（）：可以传负值
- 循环方法：
- - forEach（）循环：
  - some（）：需要数组一项满足条件则返回true，只要有一项是满足的就返回true
  - every（）：需要数组每一项都满足条件则返回true
  - filter（）：返回满足条件的元素组成新的数组
  - map（）：返回计算后的元素组成的新数组
数学函数
- Math.PI（）：返回圆周率
- Math.ceil（）：向上求整
- Math.floor（）：向下求整
- Math.round（）：四舍五入
- Math.random（）：创建一个介于0~1之间的随机数
- Math.max（）：求几个数的最大值
- Math.min（）：求几个数的最小值
- - 例题：特效，生成一个随机背景色的圆
字符串函数：
- 强制类型转换：
- - 1、通过toString（）方法来转换字符串
  - 2、通过String（）对象转义
  - 3、加空字符 ' '
  - +加号运算符可以连接多个字符串；
- 字符模板：
- - 字符模板是用``反引号来定义，在字符模板中可以是${ }输出变量。
  - length：求字符串的长度；
  - 字符串可以当作数组来使用；
- 字符串位置的查找；
- - indefOf（） // lastIndexOf（）// includes（）；
  - split（）：字符串的切割
  - concat（）：字符串合并
  - charAt（）：根据下标返回字符
  - 大小写转换：
  - - toUpperCase（）：将英文全部转换成大写
    - toLowerCase（）：将英文全部转换成小写
- 字符的截取：
- - slice（） / substring() / substr()
  - 1、不传值得情况下，截取整个字符串
  - 2、传一个值得情况下，例如：str.slice(start)，从start位置截取到末尾
  - 3、传两个值得情况下，例如str.slice(start,end)，从start位置截取到end位置，slice和substring截取时不包含end位置，substr包含end位置。
  - 4、传负值得情况下，slice() 和substr() 支持传负值，substring() 不支持。
- 去除空白符
- - tirm（）：去除左右的空白字符
  - trimLeft（）：去除左边的空白字符
  - trimRight（）：去除右边的空白字符

js基础

js能用来做什么？

js能够用来做网页特效
js能够用来做手机端（app程序、小程序）
js能够用来做客户端（网易云音乐、qq音乐、Vscode）
js能够用来做服务器端（node js）

js的三大组成部分：

ECMAscript：定义js的核心语法结构。

DOM：文档对象模型。

BOM：浏览器对象模型。

js的两种引入方式：

通过script标签的src属性引入外部的js文件。

注意事项：

引入外部js文件，在script标签内书写代码不起作用。

通过script标签在页面内书写程序。

注意事项：

一般情况js文件放到文档的末尾，js出现错误或警告会停止DOM渲染。

控制台：

Elements：查看元素

console：控制台，输出js的调试信息。

network：加载网络请求

application：应用

js的三种输出方式：

alert（）：在浏览器弹出信息。

输出多个信息使用逗号分隔
document.write()：在页面上输出信息。
```
document.write('Hello World')
```

js的两种交互方式：

prompt（）：输入框，对话框

console.log(prompt("请输入内容"))
如果需要输入多个变量，可以添加多条prompt()信息
console.log(prompt("请输入内容"))
console.log(prompt("请输入内容"))
console.log(prompt("请输入内容"))

confirm（）：确认框，询问框

if(confirm('您确定要删除该产品吗')){
	document.write("商品已删除")
}
else{
	document.write('取消删除')
}

js语法结构

js是区分大小写的，js是采用驼峰法命名 1。

标识符：用来命名变量、常量、函数、类等的名称 2 。

命名规则：

(1) 可以为字母、数字、下划线和美元符号（$），首字母不可以为数字

(2) 不可以使用关键字或保留字。

正确的格式： var_2num 、 num 、 $_num

错误的格式： 2num

{ }代码块

变量的定义方式 3 。

let 、const 、var

js提供let / const / var 三个关键字来定义变量

区别：

使用var定义的变量作用域会提升到当前代码块的最顶端；

let、const作用域为块级作用域；

var可以定义多个同名变量，let、const仅限于出现一次。

var username ='张三'
var username = '李四';
let username = '王五'   //报错

暂时性死区（TDZ）：原因是因为let定义的变量作用域不会提升。
const一般用来定义常量，尽量初始化时赋值，一般情况下不可以更改。

定义多个变量可以使用逗号分隔开 4 。

可选的分号 5。

js的语句以分号结尾，建议每条语句后加分号。

原因：

js解释器判断语句是否结尾，会影响性能。
js的代码量大，需要压缩代码时，所有代码无分号会报错。

js常见的关键字和保留字 6。

class 、if 、for 、 case等

严格模式 7。

使用"use strict"开启严格模式

运算符

算数运算符、逻辑运算符、比较运算符、赋值运算符、三元运算符

算数运算符

+号运算符

var str = '12345';
console.log(typeof str)    //string
console.log(typeof +str) //转义   number

当一个字符串+另外一个数值时，会进行连接操作

console.log('12'+ 6) // 126

-号运算符

var str = '12345';
console.log(typeof str)
console.log(typeof -str) //number
console.log('15'-6) //9

++ / –

a++ / ++a

a++：先进行赋值操作，后进行a+1操作

++a：先进行a+1操作，再进行赋值

var a = 10;
console.log(a++);   //console.log(a);a=a+1    //10
console.log(a)		//11

var b = 20;
console.log(++b); //b=b+1;console.log(b)   //21
console.log(b);			//21

 var a = 101;  
 a++;  				//a = a;a=a+1;
 var b = ++a;  		//a=a+1; b = a ;
 var c = ++b+a++; 	// c = (b+1)+a; a=a+1

逻辑运算符

&&：与，相当于and

||：或，相当于or

！：非，相当于not

比较运算符

> < >= <= == !=

==:比较两个值是否相等

var str = 10;
var str2 = '10';
console.log(str == str2)    //true

===：恒等，比较值和内存地址（数据类型）是否相等

var str = 10;
var str2 = '10';
console.log(str === str2)   //false

赋值运算符

= += -=

三元运算符

格式：

条件？表达式1：表达式2；

如果条件为真的话，输出表达式1，否则输出表达式2

（-----从浏览器接受两个变量，比较他们的大小----）

三元运算符嵌套

条件？（条件一？表达式3：表达式4）：（条件2 ？表达式5：表达式6）

	（-------从浏览器接受三个变量，输出最的值-------)

语句

条件语句

if语句：

格式为：if（判断条件）{

表达式

}

例如：
if(true){
	console.log('Hello World')
}

如果只有一个if语句也可以改为：if(条件) 表达式

 例如：
 if(true) console.log('Hello World')

if 中的条件最终都会转换为布尔值

var str = 'Hello';
if(str){
	console.log('Hello World')
}

if else语句：

格式：

if(判断条件){
表达式
}

else{
表达式1
}

if elseif else语句：

格式：

if(条件){

表达式

}else if(条件1){

表达式2

}

…

else{

}

例题：
如果大于等于90，输出优秀，如果大于等于80，小于90，输入良好，大于等于60，小于80，输出及格，否则输出不及格

var score = +prompt('请输入您的成绩');
if(score >=90){
	console.log('优秀')
}
else if(score >=80 && score<90){
	console.log("良好");
}
else if(score >=60 && score < 80){
	console.log('及格');
}
else{
	console.log('不及格');
}

switch语句：

格式：

switch(值){
case 选项:
表达式
break;
case 选项1:
表达式
break;
…
default:
表达式
break;
}

例题：
接受一种水果，苹果输出3.5元一斤，香蕉2元 草莓5元
var friut = prompt("请输入水果名称");
switch(friut){
	case "苹果": 
		console.log('苹果3.5一斤');
		break;
    case '香蕉':
        console.log('苹果2一斤');
        break;
    case '草莓':
        console.log('草莓5一斤');
        break;
    default:
        console.log('输入错误');
        break;
}

if elseif语句转为switch语句时，case选项中使用计算表达式时，条件必须一直为true;

var score = +prompt("请输入成绩");
switch(true){
    case score>=90:
        console.log('优秀');
        break;
    case score>=80 && score<90: 
        console.log('良好');
        break;
    case score>=60 && score<80: 
        console.log('及格');
        break;
    default: 
        console.log('不及格');
        break;
}

当多个选项有相同输出内容时，可以省略break；

循环语句

while语句：

先执行判断条件，再执行循环体。

格式：

while（条件）{

循环体

}

例题：计算100以内所有的偶数和
var i = 0,sum = 0;
while(i < 100){
	if(i % 2 == 0){
		sum += i;
	}
	i++;
}
console.log(sum)

do while：

先执行一次循环体，再执行判断条件。

格式：

do{

循环体

}while(判断条件)

例如：
var i = 0;
while(i < 0){
	console.log('while循环');
}
do{
	console.log('do while循环');
}while(i < 0);

for 循环

格式：

for(初始化变量;条件表达式;操作表达式){

循环体

}

例题：计算10以内所有偶数的和
（1）
var sum = 0;
for(var i = 0;i<10;i++){
	if(i % 2 == 0){
		sum += i;
	}
}
console.log(sum)    //20
（2）
var i = 0,sum = 0;
for(i;i<10;i++){
	if(i % 2 == 0){
		sum += i;
	}
}
console.log(sum)   //20
(3)
for(var i =0,sum=0;i<10;i++){
	if(i % 2 == 0){
		sum += i;
	}
}
console.log(sum)     //20

break:终止
continue:跳出本次，继续执行下次

数据类型

基本数据类型：数值（number）、字符串（string）、布尔（boolean）、null、undefined

复合（引用）数据类型：对象（对象、数组、函数）

typeof运算符：

用来返回变量的数据类型

console.log(typeof 1)   //number
console.log(typeof '')  //string
console.log(typeof true) //boolean
console.log(typeof null) //object
console.log(typeof undefined) //undefined
console.log(typeof {})//object
console.log(typeof [])//object
console.log(typeof function(){}) //function

数值：

数值分为整数和浮点数

0.1+0.2!=0.3,因为Js的数值采用IEEE754标准规范，该规范对于十进制进度不准。

例如： console.log(0.1+0.2)    //0.30000000000000004

tofixed(n)是：保留n位小数，四舍五入

例如：
console.log(0.1+0.2)           //0.30000000000000004
console.log(1.56.toFixed(1))   //1.6
console.log((42).toFixed())    //42
console.log(42..toFixed(2))    //42.00
console.log(42.toFixed(1))     //错误

进制之间的转换：

十六进制：js的十六进制使用0x表示或者0X表示，取值范围是0~9 a~f()。

0x788 == 7x16x16+8x16+8

八进制：js的八进制使用0o或者0表示，取值范围0~7

二进制：js的二进制使用0b表示。

数值强制类型转换：

parseInt() / parseFloat() / Number()

parseInt（）：

转换数值，返回整数单位
```
console.log(parseInt(2.56))   //2
```
转换字符串，如果首位出现非数值情况下，返回NaN；

首位不是非数值的情况下返回到整数位。
```
console.log(parseInt('a12345'))   //NaN
console.log(parseInt('123.46a'))   //123
```
转换布尔类型时，返回NaN。
```
console.log(parseInt(true))   //NaN
```

转换null或者undefined，返回NaN。

console.log(parseInt(null))  // NaN
console.log(parseInt(undefined)) // NaN

parseFloat（）：

转换数值，返回浮点位。
```
 console.log(parseInt(2.56))  ==>2.56
```
转换字符串，如果首位出现非数值情况下，返回NaN；

首位不是非数值的情况下返回到浮点位。
```
console.log(parseInt('a12346.56'))   //NaN 
console.log(parseInt('123.46a'))   // 123.46
```
转换布尔类型时，返回NaN
```
console.log(parseFloat(true))  //NaN  
```

转换null或undefined，返回NaN

 console.log(parseFloat(null))    // NaN         
 console.log(parseFloat(undefined))   // NaN

Number（）：

转换数值，返回浮点位
```
console.log(parseInt(2.56))  ==>2.56
```

转换字符串时，出现非数值情况下统一返回NaN,如果字符串中不包含非数值原封返回.

console.log(Number('a12346')) //NaN
console.log(Number('12346a')) //NaN
console.log(Number('12346')) //12346
console.log(Number('123.46')) //123.46

转换布尔类型时，true返回1，false返回0

console.log(Number(true))   // 1
console.log(Number(false))   //0

转换null返回0，转换undefined返回NaN

console.log(Number(null))  // 0
console.log(Number(undefined)) // NaN

NaN（not a number）：非数值。

isNaN（）：检查是否为非数值，返回true或false

console.log(isNaN('str'))
console.log(isNaN(1))

Number.MAX_VALUE：js允许的最大值

Number.MIN_VALUE：js允许的最小值

字符串：

使用单引号或者双引号括起来的为字符串

‘str’ “hello”

使用构造函数定义字符串 new string()

var str = new String('Hello World')
console.log(str.toString())

字符串可以被看作数组来使用，可以通过下标访问，下标从0开始计数.
```
var str = 'Hello World';
console.log(str[0])   //H
```

length属性获取字符串长度

var str = 'Hello World';
console.log(str.length)    //11

可以使用+号运算符连接多个字符串

var username = '张三',age = 30,birthday = '1993';
console.log('我是'+username+"今年"+age+"出生日期为"+birthday)

字符模板

定义字符模板使用反引号``（位置在Esc下，直接点）,使用${变量}输出变量

var username = '张三',age = 30,birthday = '1993';
console.log(`我是${username},今年${age},出生日期为${birthday}`)

布尔：

true和false

null：

使用typeof运算符检查是否返回object

console.log(null == undefined)

undefined：未定义

只声明不赋值情况下，会返回undefined；

undefined做数值运算会返回NaN。

var username
console.log(username)  //undefined

如果不声明变量会报错
console.log(age)   //报错

引用数据类型：

对象：

对象是一个数据的集合，对象种可以放任意的数据类型，属性为键值对组合。

创建方式1

（1）通过字面量{ }来创建。

var obj={}
 console.log(typeof obj)      // object

（2）通过new Object（）来创建对象

var obj = new Object();
console.log(typeof obj)      //object

（3）通过Object.create( )来创建对象，create（）方法中需要传递原型链。

var obj = Object.create(Object.prototype)
console.log(typeof obj)     //object

设置或访问方式2

（1）可以通过对象.属性来访问或设置。

var obj = {
        username:'张三',
        age:30,
        getAge:function(){
        return obj.age;
        }
    }
    obj.birthday = '1993.10.25';
    console.log(obj)
    console.log(obj.username)
    console.log(obj.getAge())

（2）可以通过对象[‘属性’]来访问或设置。

注意事项：属性需要用引号括起来。

var obj = {
      username:'张三',
      age:30,
      getAge:function(){
        return obj.age;
      }
    }
    obj['birthday'] = '1993.10.25';
    console.log(obj)
    console.log(obj['age'])

this关键字：在对象中代表当前对象3

（1）在全局状态下，代表window对象。

console.log(this)
console.log(this == window)

（2）在方法中，this关键字代表window对象。

function add(){
      console.log(this)
}
add()

（3）在对象中，this关键字代表当前对象。

var obj = {
        username:'张三',
        age:30,
        getAge:function(){
          return this.age;
        }
      }
      console.log(obj.getAge())    //30
      
      function getAge(){
                        return this.age;
                    }
       var obj = {
       		username:'张三',
        	age:30
       }
       obj.getAge = getAge
       var obj2 = {
       username:'李四',
       age:40
       }
       obj2.getAge = getAge
       console.log(obj.getAge()) // 30
       console.log(obj2.getAge()) // 40

对象的序列化和反序列化 4

	JSON.stringify():序列化对象为json串  

	JSON.parse():反序列化json串为对象

var obj ={
    username:'张三',
    age:20,
    // getAge:function(){
    //     return this.age
    // }
}
var str = JSON.stringify(obj)
console.log(str)     //{"username":"张三","age":20}
console.log(JSON.parse(str))   //{username: '张三', age: 20}   是一个对象object

对象属性的删除5

使用delete运算符来删除对象的属性

var obj = {
        username:'张三',
        age:20,
      }
      delete obj.username
      console.log(obj)

数组：

创建数组的方式1：

通过字面量[ ]来创建

var arr = [ ];
console.log(arr)

通过new Array( )来创建数组

var  arr = new  Array()

注意事项：

当使用new Array()创建数组时，传一个参数时，表示数据的长度

var arr = new Array(3)
console.log(arr)         //3

当参数大于1时，表示数据的元素

var arr = new Array(3,2)
console.log(arr) //[3,2]

数组可以通过下标来访问，下标从0开始，访问未定义的数组下标返回undefined 2.

var arr = new Array(3,2)
console.log(arr[0]) // 3
console.log(arr[4]) // undefined

可以通过下标可以新增或者修改数组的内容 3。

var arr = [4,5];
arr[2] = 6;
console.log(arr)   //[4, 5, 6]
arr[1] = 8;
console.log(arr)  //[4, 8, 6]

稀疏数组的概念4：

数组的下标是可以不连续的，长度为最后一个下标+1，访问未定义的数组下标返回undefined

var arr = [3,4]
arr[100] = 101;
console.log(arr)

length属性可以返回数组的长度5.

方法 function：

在js中使用function关键字来定义方法。

定义方式：

定义方法有两种方式：

function方法名称（）{ }

使用匿名函数赋值给变量。

var getAge = function(){}

function getAge(){
	return 20;
}
var getAge1 = function(){
	return 20;
}
console.log(getAge())  //undefined
console.log( getAge1())   //20

方法中的形参：

方法可以传递参数，参数可以设置默认值。

function setAge(age = 30){
	return age;
}
console.log(setAge(19))  //19

方法也可以不传递参数，可以通过arguments属性来获取参数

function setAge(){
    console.log(arguments)       //[19,20,30,40,50]
    console.log(arguments[0])   //19
}
console.log(setAge(19,20,30,40,50))  undefined

方法可以通过return来返回值。

例题：

写一个冒泡排序

思路为：使用数组中前一个数和后一个数做比较，如果前一个数大于后一个数就交换位置

var arr = [1,3,90,34,56,39,54]
for (var i=0;i<arr.length-1;i++){
	for (var j =0;j<arr.length-i-1;j++){
		if (arr[j+1] < arr[j]){
			var temp = arr[j]
			arr[j] = arr[j+1]
			arr[j+1] = temp
		}
	}
}
console.log(arr);


 var arr = [1,3,90,34,56,39]
 for(let i = 0;i<arr.length;i++){
 	for(let j = 0;j<arr.length;j++){
 		if(arr[i] < arr[j]){
 			var temp  = arr[j]
 			arr[j] = arr[i]
 			arr[i] = temp;
 		}
 	}
 }
 console.log(arr)

输出100以内与7有关的数

for (var i=1;i<100;i++){
	if (i%7==0 || (i%10)==7 || parseInt(i/10)==7){
	//除以7余数为0的数，//除以10余数为7的数， //除以10取整等于7的数
		console.log(i);
	}
}

输出1-100之间所有不能被3整除的数，并输出这些整数的和

 var s = 0
 for (var i=1;i<100;i++){
 	if (i%3 != 0){
 		document.write(i+'<br>');  
 		s+=i
 	}
 	console.log(s);
 }

求10的阶乘；

阶乘就是 1！=1; 2!=12=2; 3!=123=6; 4!=1234=24;

 jc = 1           //定义第一个数的阶乘是1
 for (var i=1;i<=10;i++){
 	console.log(jc*=i)
 }
 console.log('10的阶乘为'+jc)

求年利率

本金10000元存入银行，年利率是千分之三，

每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？

var money=10000;
for (var i=1;i<=5;i++){
	// console.log(money*0.003+money)
	money = money*0.003+money
}
console.log('5年获得的本金是:'+money)

有1元,2元,5元的钱,现在凑成20元,有多少种可能性?

 var count=0;
 for(var one=0;one<=20;one++){
 	for (var two=0;two<=10;two++){
 		for (var five=0;five<=4;five++){
			if (one*1+two*2+five*5==20){
				document.write('1元:'+one+'2元:'+two+'5元:'+five+'='+20+'<br>')
				count++;
			}
		}
	}
}
document.write('共有'+count+'种可能性')

for循环打印九九乘法表

for (var i=1;i<=9;i++){
	for (var j=1;j<=i;j++){
		document.write(j+'*'+i+'='+i*j+'\n')
	}
	document.write('<br/>')
}

一张纸的厚度是0.0001米，将纸对折，对折多少次厚度超过珠峰高度8848米

var h = 0.0001;
var count = 0;
while(h<8848){
	h *=2;
	console.log(h)
	count++
}
console.log(count)   //27

闰年

打印1000-2000年中所有的闰年?

闰年判定方法:能被400整除。或者能被4整除但不能被100整除。

 var count=0
 for(var i=1000;i<=2000;i++){
	 if(i%4==0 &&  i%100!=0 || i%400==0){
 		// console.log(i);
 		document.write(i+'\t')
 		count++;
 		if (count%4==0){
 			// console.log('br')
 			document.write('<br>')
 		}
 	}
 }

1+1/2+1/3…+1/20 等于多少？

var sum = 0 ;
for (var i=1;i<=20;i++){
	console.log(sum += 1/i)
}
console.log('和为'+sum)


var num = 1,he=0;
while(num<=20){
	he+=1/num;
	num++
}
console.log(he);

DOM

DOM:文档对象模型。

document：是文档对象的顶级对象。

静态属性：

document.doctype : 文档类型

document.title : 文档标题

document.image : 获取所有的图片

document.script : 获取所有的script标签

document.link : 获取所有的link标签

document.body : 主题内容

节点分为：

元素结点、属性结点、文本结点。

元素结点：所有的html标签

属性结点：html标签中的属性，像class / style /name /id等。

文本结点：html标签中的内容。

例如：

<div class="" style="">
    内容结点
</div>

获取结点：

document.getElementById(选择名称)：通过id属性来获取文档对象

<div id="common">
	内容节点
</div>
<script>
    var box = document.getElementById('common')
    console.log(box)
</script>

为什么相同id名称的选择器再页面上建议只出现一次？？

通过id属性来获取文档对象只能获取第一个

更改对象的样式：

css属性采用驼峰式命名： font-size = fontSize

1、通过style属性来更改样式。

对象.style.属性 = 值

eg： box.style.background = ‘red’；

例题：画一个红色背景的圆，宽高都为200像素，文字居中，显示为白色，字号为40。

 <div id = 'common'>
 	内容结点
 </div>
 <script>
     var box = document.getElementById('common')
     box.style.width = '200px';
     box.style.height = '200px';
     box.style.background='red';
     box.style.borderRadius = '50%';
     box.style.fontSize = '40px';
     box.style.textAlign = 'center';
     box.style.lineHeight = '200px';
     box.style.color = 'white';
     console.log(box)      
 </script>

2、通过修改className属性来更改样式

对象.className = 值

<style>
    .circle{
    width :200px;
    height: 200px;
    background: green;
    border-radius: 50%;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
    color :white;
    }
</style>

<div id = 'common'>
	内容结点
</div>

<script>
    var box = document.getElementById('common')
    box.className = 'circle'
    console.log(box)
</script>

3、通过classList来修改样式

对象.classList.add(样式名称)：添加样式

对象.classList.remove(样式名称)：移除样式

对象.classList.contains(样式名称)：判断样式是否存在

className 和 classList的区别：

classList可以给对象添加多个样式；

className只能添加一个。

<style>
    .circle{
    width:200px;
    height: 200px;
    background: green;
    border-radius: 50%;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
    color: white;
    }
    .circle02{
    background: yellow;
    }
</style>
<div id="common">
	内容节点
</div>
<script>
    var box = document.getElementById('common')
    box.classList.add("circle")
    if(!box.classList.contains('circle02')){
    box.classList.add('circle02')
    }
    box.classList.remove('circle02')
    console.log(box)
</script>

事件：

href ：

javascript：；：是终止跳转

事件的绑定方式：

1、绑定到html的标签上

<a href="javascript:;" onclick="alert('hello world')">点击我</a>

可以绑定自定义方法：

 <a href="javascript:;" onclick="show()">点击我</a>
 <script>
     function show(){
     	alert('hello world!!')
     }
 </script>

2、绑定到文档对象上

<a href="javascript:;" id="btn">点击我！！！</a>
<script>
    var btn = document.getElementById('btn')
    btn.onclick = function(){
    	alert('hello world')
    }
</script>

鼠标事件：

onclick（）：鼠标单击事件

获取DOM文档对象的方式

document.getElementByid（）：通过id属性来获取文档对象。

document.getElementByClassName（）：通过class属性来获取文档对象

document.getElementByName（）：通过name属性来获取文档对象。

document.getElementByTagName（）：通过html标签来获取文档对象

document.querySelector（）：通过css选择器来获取单个文档对象

document.querySelectorAll（）：通过css选择器来获取匹配的所有文档对象。

document.getElementByClassName（）：通过class属性来获取文档对象

//来实现隔行换色
<div class="box">
	盒子1
</div>
<div class="box">
	盒子2
</div>
<div class="box">
	盒子3
</div>
<div class="box">
	盒子4
</div>
<div class="box">
	盒子5
</div>
<div class="box">
	盒子6
</div>
<script>
    var boxs = document.getElementsByClassName('box');
    	for(var i = 0;i<boxs.length;i++){
    		if (i % 2 == 0){
   				 boxs[i].style.background = "red";
    		}else{
    			boxs[i].style.background = "green";
    		}
    	}
</script>

document.getElementByName（）：通过name属性来获取文档对象

 <div class="box" name="name1">
 	盒子1
 </div>
 <div class="box" name="name1">
 	盒子2
 </div>
 <script>
     var boxs = document.getElementsByName('name1');
     console.log(boxs)
 </script>

document.getElementByTagName（）：通过html标签来获取文档对象

<div>
	盒子1
</div>
<div >
	盒子2
</div>
<p>
	盒子3
</p>
<script>
    var divs = document.getElementsByTagName('p')
    console.log(divs)
</script>

document.querySelector（）：通过css选择器来获取单个文档对象

<div class="box" id="box">
	盒子1
</div>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女" >女
<script>
    var div1 = document.querySelector('div')
    console.log(div1)
    
    var div2 = document.querySelector('.box')
    console.log(div2)
    
    var div3 = document.querySelector('#box')
    console.log(div3)

    var radio = document.querySelector('input[type="radio"]:checked')
    console.log(radio)
</script>

document.querySelectorAll（）：通过css选择器来获取匹配的所有文档对象

<div class="box" id="box">
	盒子1
</div>
<div class="box" id="box">
	盒子1
</div>
<div class="box" id="box">
	盒子1
</div>
<script>
    var boxs = document.querySelectorAll('.box');
    console.log(boxs)
    
    var boxs = document.querySelectorAll('div');
    console.log(boxs)
    
    var boxs = document.querySelectorAll('#box');
    console.log(boxs)
</script>

例题

页面上有N个div标签，设置奇数为红色的圆，偶数数蓝色的圆

<div class="bq1">
	块标签1
</div>
<div class="bq1">
	块标签2
</div>
<div class="bq1">
	块标签3
</div>
<div class="bq1">
	块标签4
</div>

<script>
    var divs = document.getElementsByTagName('div')
        for (var i = 0;i<divs.length;i++){
        	if(i%2==0){
                divs[i].style.background = 'red';
                divs[i].style.borderRadius = '50%';
                divs[i].style.width = '200px';
                divs[i].style.height = '200px';
                divs[i].style.textAlign = 'center';
                divs[i].style.lineHeight = '200px';
                console.log(divs)
            }else{
                divs[i].style.background = 'blue';
                divs[i].style.borderRadius = '50%';
                divs[i].style.width = '200px';
                divs[i].style.height = '200px';
                divs[i].style.textAlign = 'center';
                divs[i].style.lineHeight = '200px';
                console.log(divs)
    		}
		}
</script>

-------------------------------------------------------------------------------

<style>
    .circle{
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 50%;
    line-height: 200px;
    text-align: center;
    }
    .circle02{
    background: green;
    }
</style>
<div>
	块标签1
</div>
<div>
	块标签2
</div>
<div>
	块标签3
</div>
<div>
	块标签4
</div>
<script>
    var divs = document.querySelectorAll('div');
    	for (var i=0;i<divs.length;i++){
    		divs[i].className = 'circle'
    		if (i % 2 != 0){
    			divs[i].classList.add('circle02')
    		}
    	}
</script>

innerHTML：获取文档对象下所有内容，包括html标签。

innerTEXT：获取文档对象下的文本内容。

<div class="box">
	<a>盒子</a>
</div>
<script>
    var box = document.querySelector('.box')
    console.log(box.innerHTML)
    console.log(box.innerText)
    box.innerHTML = '<p>段落标签</p>'
    box.innerText = '<p>段落标签</p>'
</script>

操作子节点的方式：

识别空白行：

childNodes：获取所有的子节点。

不识别空白行：

children：获取所有的子节点。

例题

	<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
        <li>第六项</li>
	</ul>
    <script>
        var ul = document.querySelector('ul')
        //获取所有的子节点
        console.log(ul.childNodes)
        console.log(ul.children)

        //获取第一个子节点
        console.log(ul.firstChild)
        console.log(ul.firstElementChild)

        //获取最后一个子节点
        console.log(ul.lastChild)
        console.log(ul.lastElementChild)     //不识别空白行
        
        //获取上一个兄弟结点  
        console.log(ul.lastChild.previousSibling)
        console.log(ul.lastElementChild.previousElementSibling)

        //获取下一个兄弟结点
        console.log(ul.firstChild.nextSibling)
        console.log(ul.firstElementChild.nextElementSibling)

        //获取父节点
        console.log(ul.lastChild.parentNode)
        console.log(ul.lastElementChild.parentElement)
	</script>

创建文本对象

document.createElement(标签)

append( ): 将动态创建的文档追加父元素的末尾。

appendChild( ): 将动态创建的文档追加到父元素的末尾。

区别：

append（）可以追加多个文档
1. append（）可以追加文本内容，appendChild（）只能追加节点。

<script>
        var div = document.createElement('div')
        div.style.width = '200px'
        div.style.height = '200px'
        div.style.background = 'blue'
        var div2 = document.createElement('div')
        div2.style.width = '200px'
        div2.style.height = '200px'
        div2.style.background = 'yellow'
        // document.body.append(div,div2)    //第一个blue和第二个yellow都输出
        //document.body.appendChild(div,div2)    //输出blue第一个

        // document.body.append('hello world')    //hello world都输出
        // document.body.appendChild('hello')      //什么都不输出,只能追加一个节点，hello是文本形式
</script>

例题：在页面上有一个div，id为common，在该div内追加一个绿色的圆

<div id="common">
</div>
<script>
        var div = document.createElement('div')
        div.style.width = '200px'
        div.style.height = '200px'
        div.style.background = 'green'
        div.style.borderRadius = '50%'

        document.querySelector('#common').append(div)
</script>

prepend（）：将动态创建的文档对象追加到父元素的头部。

before（）：将动态创建的文档对象追加到当前元素的前面。

after（）：将动态创建的文档对象追加到当前元素的后面。

<div id="common">
	范筱涵范筱涵
</div>
<script>
    var div = document.createElement('div')
    div.style.width = '200px'
    div.style.height = '200px'
    div.style.background = 'green'
    div.style.borderRadius = '50%'

    document.querySelector('#common').before(div)   //追加到当前元素之前
    // document.querySelector('#common').after(div)   //追加到当前元素的后边
    // document.querySelector('#common').prepend(div)   //追加到父元素的头部
</script>

remove（）：是移除文档节点。

remove和display：none的区别：

remove（）是从DOM文档中删除，删除后无法再获取。
display：none 是从DOM文档中隐蔽，还可以再获取。

数组

1、创建数组的方式

通过new Array（）来创建数组

var arr = new Array（）

注意事项：

例如：只传递一个初始值时
```
var arr = new Array(3)     表示数组的长度为3，值为空
console.log(arr)     //是一个空属性，在此表示数组的长度是3
```
只有当数组的初始值大于1时，表示数组的元素
通过字面量[ ]来创建

var arr = [1,2,3]

2、length 属性可以用来获取数组的长度

var arr = [1,2,3,4,5,6,7,7]
console.log(arr.length)     //长度为8
arr.length = 4;            //可以使用数组的length属性来实现删除操作，4表示长度是4
console.log(arr)    //[1,2,3,4]

var arr = [1,2,3,4,5,6,7,7]
arr[arr.length] = 8     //新增  
console.log(arr)     // [1, 2, 3, 4, 5, 6, 7, 7, 8]

arr[5] = 10        //替换
console.log(arr)      //[1, 2, 3, 4, 5, 10, 7, 7, 8]

3、新增和删除

push（）：向数组的尾部新增一个或者多个元素

var arr = [1,2,3,4,5,6,7,7]
arr.push(10)
arr.push(11,12)
console.log(arr)    //[1, 2, 3, 4, 5, 6, 7, 7, 10, 11, 12]



 var obj = {
             username:'张三',
             age:30
           }

//数组中可以放任意的数组类型
var arr  = [];
arr.push(obj)
arr.push(1,true,'zhangsan')
console.log(arr)        //[{username: '张三', age: 30}, 1, true, 'zhangsan']

unshift（）：向数组的头部新增一个或者多个元素

var arr = [1,2,3,4,5,6,7,7]
arr.unshift(10)
console.log(arr)    // [10, 1, 2, 3, 4, 5, 6, 7, 7]

pop（）：从数组的尾部删除元素

var arr = [1,2,3,4,5,6,7,7]
arr.pop()
console.log(arr)    // [1, 2, 3, 4, 5, 6, 7]

shift（）：从数组的头部删除元素

var arr = [1,2,3,4,5,6,7,7]
arr.shift()
console.log(arr)    // [2, 3, 4, 5, 6, 7, 7]

splice（）

splice（index,0,val,val2…）:从数组的index下标开始新增N个元素

var arr = [1,2,3,4,5,6]
arr.splice(3,0,7,8,9)
console.log(arr)    //[1, 2, 3, 7, 8, 9, 4, 5, 6]

splice（index，num）：从数组的index下标开始删除num个元素，删除完后会返回删除的元素组成的新数组

var arr = [1,2,3,4,5,7]
var arr2 = arr.splice(3,1)
console.log(arr2)    //[4]
console.log(arr)     //[1, 2, 3, 5, 7]

splice（index，num，val，val1…）：从数组的index下标开始删除num个元素并且新增N个元素。

var arr = [1,2,3,4,5,6,7,7]
var arr2 = arr.splice(3,2,10,11,12)
console.log(arr2) //[4,5]
console.log(arr) //[1, 2, 3, 10, 11, 12, 6, 7, 7]

delete 运算符也可以用来删除，但不会更改数组的长度。

var arr = [1,2,3,4,5,6,7,7]
delete arr[3]
console.log(arr)   //[1, 2, 3, 空白, 5, 6, 7, 7]

数组的静态方法：

Array.isArray( )：检查是否为数组

console.log(Array.isArray({}))   //false
console.log(Array.isArray([]))   //true

数组元素位置的查找：

indefOf（）：从前向后查找，存在则返回元素下标，不存在返回-1；

lastIndefOf（）：从后向前查找，存在则返回元素的下标，不存在则返回-1；

includes（）：判断元素是否存在，存在返回true，不存在则返回-1；

var arr = [1,2,3,4,5,6,7,7]
console.log(arr.indexOf(7))       //下标是6
console.log(arr.lastIndexOf(5))   //下标是4
console.log(arr.includes(8))  //false
console.log(arr.includes(7))  //true

例题：给定一组数组[1,2,3,4,5,5,4,3,2,1]，去掉数组中的重复项。

一维数组的去重

var arr = [1,2,3,4,5,6,5,3,2,4,1]
var arr2 = []
for (let i=0;i<arr.length;i++){
	if(arr2.indexOf(arr[i])==-1){
		arr2.push(arr[i])
	}
}
console.log(arr2)

二维数组：

var arr = [1,2,3,[4,5,6]] //二维数组

二维数组的访问：

 var arr = [1,2,3,4,5,6,2,4,[1,7,8,5],5,3]
 console.log(arr[8])   //[1, 7, 8, 5]
 console.log(arr[8][1])  //7

二维数组的去重:

var arr = [1,2,3,4,5,6,2,4,[1,7,8,5],5,3]
var arr2 = []
for (let i=0;i<arr.length;i++){
	if(Array.isArray(arr[i])){
		if(arr.indexOf(arr[i][j])==-1){
			arr2.push(arr[i][j])
		}
	}else{
		if(arr2.indexOf(arr[i])==-1){
		arr2.push(arr[i])
		}
	}
}
console.log(arr2)          // [1, 2, 3, 4, 5, 6, 7, 8]

排序：

reverse（）：倒序

var arr = [1,2,3,4,5,6]

console,log(arr.reverse()) // [6, 4, 3, 2, 1]

sort（）：排序

1、如果不传值的情况下，按照ASCII值排序

var arr = [1,11,2,12,3,23,4,25]
console.log(arr.sort())   //[1, 11, 12, 2, 23, 25, 3, 4]

2、升序

格式：

数组. sort(function（a,b）{

return a-b;

})

var arr = [1,8,5,6,11,7,55,20,36,4]
console.log(arr.sort(function(a,b){
	return a-b
}))     //[1, 4, 5, 6, 7, 8, 11, 20, 36, 55]

3、降序

格式：

数组. sort(function（a,b）{

return b-a;

})

var arr = [1,11,2,12,3,23,4,25]
console.log(arr.sort(function(a,b){
	return b-a
}))  //[25, 23, 12, 11, 4, 3, 2, 1]

concat（）：合并数组

var arr = [1,2,4,5,8,3,44,22,47]
var arr1 = [1,2,3];
var arr2 = [4,5,6];
console.log(arr.concat(arr1,arr2))   //[1, 2, 4, 5, 8, 3, 44, 22, 47, 1, 2, 3, 4, 5, 6]

join（）：将数组转换为字符串

var arr = [1,2,4,5,8,3,44,22,47]
console.log(arr.join())   //1,2,4,5,8,3,44,22,47

slice（）：数组截取，不会对原数组做影响

slice（）：不传值的情况下截取整个数组

var arr = [1,2,4,5,8,3,44,22,47]
var arr2 = arr.slice()
console.log(arr,arr2)    //[1,2,4,5,8,3,44,22,47]

slice（start）：从start位置开始截取到末尾

var arr = [1,2,4,5,8,3,44,22,47]
var arr2 = arr.slice(2)
console.log(arr2)   //[4, 5, 8, 3, 44, 22, 47]

slice（start，end）：从start位置开始截取到end，不包括end位置

var arr = [1,2,4,5,8,3,44,22,47]
var arr2 = arr.slice(2,5)
console.log(arr2)    //[4, 5, 8]

slice（）：可以传负值

var arr = [1,2,4,5,8,3,44,22,47]
var arr2 = arr.slice(-2)
console.log(arr2)        //[22, 47]

循环方法：

forEach（）循环：

forEach（）方法用于调用数组的每个元素，并将元素传递给回调函数

注意：forEach（）对于空数组是不会执行回调函数的。

格式：

/**

*item：值

*index：下标

数组.forEach（function（item，index）{

}）

例子：

var arr = [1,2,22,333,4,5,66,6,6,5,4,3,2,1]
arr.forEach(function(item,index){
	console.log('值为'+item+'下标='+index)
})

some（）：需要数组一项满足条件则返回true，只要有一项是满足的就返回true

格式:

数组.some(function（item）{

return 条件

})

例子：

var arr = [1,2,3,4,5,6,7,7,1,2,3,44,22,5,11]
var istrue = arr.some(function(x){
	return x > 5
})
console.log(istrue)   //true

every（）：需要数组每一项都满足条件则返回true

格式:

数组.some(function（item）{

return 条件

})

例子：

var arr = [1,2,3,4,5,6,7,7,1,2,3,44,22,5,11]
var istrue = arr.every(function(x){
	return x>=1
})
console.log(istrue)   //true

filter（）：返回满足条件的元素组成新的数组

格式:

数组.some(function（item）{

return 条件

})

例子：

 var arr = [1,2,3,4,5,6,7,7,1,2,3,44,22,5,11]
 var arr2 = arr.filter(function(x){
 	return x>5
 })
 console.log(arr2)  //[6, 7, 7, 44, 22, 11]

map（）：返回计算后的元素组成的新数组

格式:

数组.some(function（item）{

return 条件

})

例子：

var arr = [1,2,3,4,5,6,7,7,1,2,3]
var arr2 = arr.map(function(x){
	return x*x
})
console.log(arr2)  //[1, 4, 9, 16, 25, 36, 49, 49, 1, 4, 9]

封装一个方法，将给定的数组[1,2,22,333,4,5,66,6,6,5,4,3,2,1]去掉重复项，可按照升序或降序排列

用for循环的样式给数组进行去重

function shu(arr,orderby='asc'){
	var arr2 = [];
	for (var i=0;i<arr.length;i++){
		if (arr2.indexOf(arr[i])==-1){
			arr2.push(arr[i])
		}
	}
	switch(orderby){
		case 'asc':
			arr2.sort(function(a,b){
				return a-b;
			})
			break;
		case 'desc':
			arr2.sort(function(a,b){
				return b-a;
			})
			break;
	}
    return arr2;
}
console.log(shu([1,2,4,5,8,3,44,22,1,47]))  // [1, 2, 3, 4, 5, 8, 22, 44, 47]

用forEach循环的方法

function unqiue(arr,orderby='asc'){
	var arr2 = [];
	arr.forEach(function(item){
		if (arr2.indexOf(item) == -1){
			arr2.push(item)
		}
	})
	switch(orderby){
		case 'asc':
			arr2.sort(function(a,b){
				return a-b;
			})
			break;
		case 'desc':
			arr2.sort(function(a,b){
				return b-a;
			})
			break;
	}
	return arr2;
}
console.log(unqiue([1,2,22,333,4,5,66,6,6,5,4,3,2,1]))

表单事件：

onsubmit（）：表单提交时触发的事件

注意事项：

onsubmit（）事件需要有return返回
验证的方法中也需要有返回值

onfocus（）：获取焦点时触发的事件

onblur（）：失去焦点时触发的事件

onchange（）：内容改变时触发的事件

oninput（）：内容输入时触发的事件

缓存：localStorage：

设置缓存：setItem（键，值）

 localStorage.setItem('user','张三')  //user 是设置的缓存名称
 localStorage.setItem('age',20)   //age是设置的缓存名称
 localStorage.setItem('city',JSON.stringify({city:'河北'}))    
 //JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串

获取缓存：getItem（值）

console.log(localStorage.getItem('user'))  // 张三            console.log(JSON.parse(localStorage.getItem('city')))   //JSON.parse() 方法用来解析 JSON 字符串，

删除缓存：removeItem（键）

localStorage.removeItem('user')    //将缓存名称为user的缓存整个删除

清空缓存：localStorage.clear（）

localStorage.clear()

数学函数

Math.PI（）：返回圆周率

console.log(Math.PI)   //3.141592653589793

Math.ceil（）：向上求整

console.log(Math.ceil(2.2))  //3
console.log(Math.ceil(2.9))   //3

Math.floor（）：向下求整

console.log(Math.floor(2.2))   //2
console.log(Math.floor(2.9))   //2

Math.round（）：四舍五入

console.log(Math.round(2.2))  //2
console.log(Math.round(2.9))   //3

Math.random（）：创建一个介于0~1之间的随机数

console.log(Math.random())

Math.max（）：求几个数的最大值

Math.min（）：求几个数的最小值

例题：

返回一个介于0~100之间的随机整数

var num = parseInt(Math.random() * 100);   
var num = Math.floor(Math.random() * 100);
console.log(num)

返回一个100~200之间的随机整数

var num = parseInt(Math.random() * 100 + 100);
var num = Math.floor(Math.random() * 100 + 100);
console.log(num);

返回一个10~100之间的随机整数

var num = parseInt(Math.random() * 90 + 10);   //*后边是后一个数减去前一个数,
var num = Math.floor(Math,random() * 90 + 10)
console.log(num)

例题：特效，生成一个随机背景色的圆

思路：十六进制的取值范围是0~9 a~f ；是6位字符，十六位字符开头是#

 function createRandomColor(){
     var str = '0123456789abcdef';
     var color = '#';
     for (var i=0;i<6;i++){
     	color += str[Math.floor(Math.random() * str.length)]
     }
 	return color;
 }
 console.log(createRandomColor())    //随机输出获取的颜色
 
 function createCircle(){
     var div = document.createElement('div')
     div.style.width = '200px';
     div.style.height = '200px';
     div.style.borderRadius = '50%';
     div.style.background = 'pink';
     //div.style.background = createRandomColor()    // 调用随机颜色的方法
     document.body.append(div)
 }
 createCircle()

字符串函数：

强制类型转换：

1、通过toString（）方法来转换字符串

var num = 22;
console.log(typeof num.toString())   //string

2、通过String（）对象转义

var num = 22;
console.log(typeof String(num))   //string

3、加空字符 ’ ’

var num = 22;
console.log(typeof "" + num)   //string22

+加号运算符可以连接多个字符串；

字符模板：

字符模板是用``反引号来定义，在字符模板中可以是${ }输出变量。

function toUpper(str){    //定义一个方法
	return str.toUpperCase()
}
var str = 'Hello';
console.log(`${str}`)    //Hello
console.log(`${str.toUpperCase()}`)   //HELLO
console.log(`${toUpper(str)}`)   //HELLO    //调用上边的toUpper方法

length：求字符串的长度；

字符串可以当作数组来使用；

var str = 'hello';
console.log(str[2])  //l

字符串位置的查找；

indefOf（） // lastIndexOf（）// includes（）；

indexOf（）：从前向后查找元素的位置，存在则返回下标，不存在则返回-1;

lastIndexOf（）：从后向前查找元素的位置，存在则返回下标，不存在则返回-1;

includes（）：判断字符是否存在，存在返回true ，不存在返回 false；

var str = 'Hello World';
console.log(str.indexOf('l'))      ==>2
console.log(str.lastIndexOf('l'))  ==>9
console.log(str.includes('l'))     ==>true

split（）：字符串的切割

按照特定字符将字符串转换位数组，常和join（）结合使用。

 var str = 'hello World';
 console.log(str.split(''))  //['h', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']

例题：在输入框中输入内容，分隔为单个字符；

并且为每个字符加随机背景色，在页面输出。

HTML:
<div class="common">
	<div class="header">
		<input type="text" value="" id="keyword">
		<input type="submit" class="btn" value="提交">
	</div>
	<div class="content">

	</div>
</div>

js:

var btn = document.querySelector('.btn');
btn.onclick = function(){
    var keyword = document.querySelector('#keyword');
    if (keyword.value == ''){
        return false;
    }
    var arr = keyword.value.split('');
    var html = '';
    for(var i=0;i<arr.length;i++){
        html += `<span style="background:${createRandomColor()}">${arr[i]}</span>`
    }
    document.querySelector('.content').innerHTML = html
}

function createRandomColor(){
    var str = '0123456789abcdef';
    var color = '#';
    for (var i=0;i<6;i++){
        color += str[Math.floor(Math.random() * str.length)]
    }
    return color;
}
console.log(createRandomColor())

CSS:
*{
    margin: 0;
    padding: 0;
}
.common{
    width: 800px;
    margin: 0 auto;
}

/* header */
.header {
    margin-top: 30px;
}
.header input{
    width: 70%;
    height: 40px;
    line-height: 40px;
    border: 2px solid pink;
}
.header input.btn{
    width: 20%;
    color: white;
    background: pink;
    box-sizing: content-box;
}
/* content */
.content{
    margin-top: 30px;
}
.content span{
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 100px;
    color: white;
    font-size: 40px;
    vertical-align: middle;
}

concat（）：字符串合并

var str = 'Hello World',str1 = '你好',str2='aaa';
console.log(str.concat(str1,str2))   //Hello World你好aaa

charAt（）：根据下标返回字符

var str = 'Hello World' 
console.log(str.charAt(0))   //H

大小写转换：

toUpperCase（）：将英文全部转换成大写

toLowerCase（）：将英文全部转换成小写

var str = 'Hello';
console.log(str.toUpperCase())  //HELLO
console.log(str.toLowerCase())   // hello

字符的截取：

slice（） / substring() / substr()

1、不传值得情况下，截取整个字符串

var str = 'Hello World'
console.log(str.slice());     //Hello World
console.log(str.substring())  //Hello World
console.log(str.substr())     //Hello World

2、传一个值得情况下，例如：str.slice(start)，从start位置截取到末尾

var str  = 'Hello World';
console.log(str.slice(1))     ==>ello World
console.log(str.substring(1)) ==>ello World
console.log(str.substr(1))    ==>ello World

3、传两个值得情况下，例如str.slice(start,end)，从start位置截取到end位置，slice和substring截取时不包含end位置，substr包含end位置。

var str = 'Hello world'
console.log(str.slice(1,7))  		==>ello w
console.log(str.substring(1,7))  	==>ello w
console.log(str.substr(1,7))  		==>ello wo

4、传负值得情况下，slice() 和substr() 支持传负值，substring() 不支持。

 var str  = 'Hello World'; 
 console.log(str.slice(-1))      //d
 console.log(str.substring(-1))  //substring() 不支持,所以全部返回Hello World
 console.log(str.substr(-1))     //d

去除空白符

tirm（）：去除左右的空白字符

trimLeft（）：去除左边的空白字符

trimRight（）：去除右边的空白字符

var str = '      Hello world                  ';
console.log(str.trim())
console.log(str.trimLeft())
console.log(str.trimRight())

高亮显示

搜素一段文字，如果有就高亮加颜色。

HTML:
<div class="common">
	<div class="header">
        <input type="text" value="" id="keyword">
        <input type="submit" class="btn" value="提交">
	</div>
</div>
    <div class="content">
    	[张万年同志逝世]中国共产党的优秀党员，久经考验的忠诚共产主义战士。
    </div>
js:
<script>
	var btn = document.querySelector('.btn');
	btn.onclick = function(){
		var keyword = document.querySelector('#keyword');
		if(keyword.value == ''){
			return false;
		}
		var content = document.querySelector('.content');
		console.log(content)
		var html = content.innerText.split(keyword.value).join(`<b>${keyword.value}</b>`)
		console.log(html)
		content.innerHTML = html;
	}
</script>

CSS:
<style>
	.content b{
	background: yellow;
	}
</style>

文字缩放

对一段内容的展开和显示

里边内容有空白字符，是识别空白行的 ``` HTML:

还是去安徽大家都会的家具电器等级为基地的就完全的精确打击文件的全路径到我家就跑到启动机器的i哦对金钱我带回去的好。我却觉得无穷尽的气味的间谍的是个如果感豆腐干大师傅是个人个人.....

缩放

js:


# 事件：

    标签、文档或元素发生的特定的行为，例如：鼠标单击事件、键盘事件等

    目标源：

      发起事件的目标元素

    两种绑定方式：

      1、绑定到HTML元素上

      2、绑定到文档对象上

##     DOM1：写on

      通过事件名称+函数方式来实现，例如onclick、onmouseover

##     DOM2:不需要写on

### 	addEventListener：添加事件监听

		第一个参数：事件类型，不需要写on

		第二个参数：匿名函数

		第三个参数：对象或布尔，是否是冒泡

### 	removeEventListener：移除事件监听

	区别：

		DOM2中 规定的事件监听同类型的事件可以定义多个。

点击


事件捕获：

window ---->document --->html --- ....目标源

事件冒泡：

	目标源----->逐级往上----->html ------>document------>window

	子元素触发某个事件后同时触发父元素的事件

阻止事件冒泡

	stopPropagetion（）阻止事件冒泡

<div class="circle">
    <div class="circle2">
        <div class="circle3">

        </div>
    </div>
</div>

<script>
    var circle = document.querySelector('.circle');
    var circle2 = document.querySelector('.circle2');
    var circle3 = document.querySelector('.circle3');
    circle.onclick = function(){
        console.log('圆1被触发了')   //圆1被触发了
    }
    circle2.onclick = function(e){
        e.stopPropagation()
        console.log('圆2被触发了')  //圆2被触发了
    }
    circle3.onclick = function(e){
        e.stopPropagation()
        console.log('圆3被触发了')   //圆3被触发了
    }
</script>


## 鼠标事件：

onclick（）：鼠标单击事件

ondblclick（）：鼠标双击事件

onmouseover（）：鼠标滑过时触发的事件

onmousedown（）：鼠标按下时触发的事件

onmouseup（）：鼠标松开时触发的事件

事件对象：

type：事件类型

target / srcElement：事件源

currentTarget：当前执行目标的对象

timeStamp：发起时间

offsetX：相对于事件对象的X坐标

offsetY：相对于事件对象的Y坐标

path：冒泡的路径



例题：排它策略

  （找到当前点击的元素 去除所有元素样式 给当前点击的元素设置样式） 

 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法 。

顺序是先干掉其他人，再设置自己。就是先给所有元素全部清楚样式，再给当前的元素设置样式

1、第一种写的方式

 <ul>
     <li>范筱涵</li>
     <li>范筱涵</li>
     <li>范筱涵</li>
     <li>范筱涵</li>
     <li>范筱涵</li>
     <li>范筱涵</li>
 </ul>
 <script>
     var lis = document.querySelectorAll('li');
     for (var i=0;i<lis.length;i++){
         lis[i].onmouseover = function(){
             for (var j=0;j<lis.length;j++){
                 lis[j].style.color = 'black';
                 lis[j].style.background = 'white'
             }
             this.style.background = 'red';
             this.style.color = 'white';
         }
     }
 </script>

//2、第二种写的方式
<style>
    ul{
        list-style: none;
    }
    ul li{
        display: inline-block;
        border: 2px solid red;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>
<ul>
    <li>范筱涵</li>
    <li>范筱涵</li>
    <li>范筱涵</li>
    <li>范筱涵</li>
    <li>范筱涵</li>
    <li>范筱涵</li>
</ul>
<script>
    //获取所有的li标签元素
    var lis = document.getElementsByTagName('li');
    //获取lis的元素，并进行一个循环
    for (var i=0;i<lis.length;i++){
        lis[i].onmouseover = function(){
            for (var i=0;i<lis.length;i++){
                lis[i].style.background = '';
            }
            this.style.background = 'pink'
        }
       
    }
</script>


## 键盘事件：

onkeydown（）：键盘按下时触发的事件。

onkeyup（）：键盘松开时触发的事件。

```

键盘事件的对象：

type：事件类型

timeStamp：触发的事件

targe：目标源

keyCode：返回的是键盘上的按钮的一个数字

key：返回键盘上的按键

altKey：是否是alt键

shiftKey：是否是shift键

ctrlKey：是否是ctrl键

<input type="text" id="input" >
    <script>
        var input = document.querySelector('#input')
        input.onkeydown = function(e){
            console.log(e)   //输出来是一个事件
            console.log(e.keyCode)   //数出来是键盘上按的数字
        }
    </script>

例题：

通过键盘上的上下左右按钮控制小圆的移动

 <style>
        .circle{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: pink;
            position: absolute;
        }
    </style>
    <div class="circle">
    </div>
    <script>
        var circle = document.querySelector('.circle');
        document.onkeydown = function(event){
            var e = event || window.event;
            console.log(e.keyCode);
            switch(e.keyCode){
                //上是W
                case 87:
                    circle.style.top = circle.offsetTop - 5 +"px";
                break;
                //下是S
                case 83:
                    circle.style.top = circle.offsetTop + 5 +"px";
                break;
                //左是A
                case 65:
                    circle.style.left = circle.offsetLeft - 5 +"px";
                break;
                //右是D
                case 68:
                    circle.style.left = circle.offsetLeft + 5 +"px";
                break;
            }
        }
    </script>

BOM：浏览器对象对象，它为浏览器和js交互提供api；

浏览器的顶级对象是window；

在全局状态下，方法或属性都会在window上体现。

var age = 30;
function add(){
	return 2;
}
console.log(window)
//window == this ==>true

open（）：打开新窗口

第一个参数：打开的地址（网络连接或本地地址）

第二个参数：窗口的名称

第三个参数：窗口的属性

close（）：关闭新窗口

<a href="javascript:;" class="btn">打开新窗口</a>
<script>
	var btn = document.querySelector('.btn')
	btn.onclick = function(){
		window.open('http://www.baidu.com','windows','height=400,width=300')
	}
</script>

定时器：

setTimeout（）：在规定执行时间内执行一次

格式：

时间==毫秒

var 定时器变量 = setTimeout（function（）{}，时间）

clearTimeout（定时器变量）:关闭定时器

setInterval（）：在规定执行时间内循环执行

格式：

时间 == 毫秒

var 定时器变量 == setInterval（function（）{}，时间）

clearInterval（定时器变量）：关闭定时器

setTimeout和setInterval的区别：

setInterval(function(){
	console.log('SetInterval');
},1000)
setTimeout(function(){
	console.log('setTimeout');
},1000)

例题：写一个验证码的6位数的随机验证并把它放到输入框种

history：历史记录

go（）：可以实现网页的前进或者后退，前提是需要有浏览历史

back（）：后退

forward（）：前进

location 对象：

host：域名+端口号

hostname：域名（ip地址）

href：在js种可以用来做重定向

pathname：地址

port：端口号

search：可以获取地址栏的参数

查看全文

http://www.kler.cn/a/13626.html

如何快速将PDF文件转换为Word文档

15天学习MySQL计划（常用函数/约束）（基础篇）第三天

shell：清理指定目录中指定天数之前的旧文件

【学习笔记】从MySQL快速入门 PostgreSQL

美国肝素钠专用树脂，医药肝素钠提取工艺专用树脂

三谈ChatGPT（ChatGPT可以解决问题的90%）

OpenCV 图像处理学习手册：6~7

液压轴位置闭环控制(比例伺服阀应用)

不知道玩什么游戏的你看过来

功率MOS管烧毁，有这些原因

大型体检管理系统源码：适用于大中型医院或独立体检中心

C/C++每日一练(20230419)

Elasticsearch

格式工厂将视频导出Maya需要的图像序列帧

我的第一台电脑------计算机类专业学生购置电脑的一些个人心得

如何用AI生成《ios客户端学习笔记（一）：Swift学习路径》

VUE入门

VMware vSphere 8.0 Update 1 正式版发布 - 企业级工作负载平台

【设计模式】Java 的三种代理模式

智加科技与舍弗勒签订商用车先进转向系统量产合作协议，将率先量产行业首个正向开发的智能重卡冗余转向