Day 01（js的基本语法）
一 、 JS的代码注释
// js注释的内容 单行注释
/*
多行注释
js的注释内容
可以写多行
*/二 、JS的三种写法
1.行内样式
<div class="box" onclick="javascript: alert('hello world')">
这是一个盒子
</div>2.内部样式
<script>
alert('男神')
</script>
//写在body内部3.外联样式
<script src=" js文件路径"></script>三 、变量(重点)
-
变量指的是在程序中保存数据的一个容器
-
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
-
也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
-
语法： var 变量名 = 值 例如:var box = 15
变量的命名规则和命名规范
-
规则： 必须遵守的，不遵守就是错
-
一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成
-
严格区分大小写
-
不能由数字开头，不要使用中文汉字命名
-
不能是 保留字 或者 关键字
-
不要出现空格
-
规范： 建议遵守的（开发者默认），不遵守不会报错
-
变量名尽量有意义（语义化）
-
遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
四 、 数据类型的分类
1.基本数据类型
-
数值类型（number）
-
一切数字都是数值类型（包括二进制，十进制，十六进制等）
-
NaN（not a number），一个非数字
-
字符串类型（string）
-
被引号包裹的所有内容（可以是单引号也可以是双引号）
-
布尔类型（boolean）
-
只有两个（true 或者 false）
-
null类型（null）
-
只有一个，就是 null，表示空的意思
-
undefined类型（undefined）
-
只有一个，就是 undefined，表示没有值的意思
2.复杂数据类型
1.array(数组)
五 、判断数据类型
-
既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据
-
使用 typeof 关键字来进行判断
// 第一种使用方式
var n1 = 100;
console.log(typeof n1);
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));六 、其他数据类型转成字符串、其他类型转数值
-
变量.toString()
-
有一些数据类型不能使用 toString() 方法，比如 undefined 和 null
'变量.tostring()'还可以转换进制.
变量.toString(2)
var num = 10
console.log(num.toString()) // 默认转10进制
console.log(num.toString(2)) // 默认转2进制 10-->转换成二进制-->转换成字符串
console.log(num.toString(8)) // 默认转8进制 10-->转换成八进制-->转换成字符串
console.log(num.toString(16)) // 默认转16进制 10-->转换成十六进制-->转换成字符-
String(变量)
-
所有数据类型都可以
-
使用加法运算
-
在 JS 里面，+ 由两个含义
-
字符串拼接： 只要 + 任意一边是字符串，就会进行字符串拼接
-
加法运算：只有 + 两边都是数字的时候，才会进行数学运算
4 、Number( )、parseInt( )、parseFloat( )
七 、 其他数据类型转成布尔
-
Boolean(变量)
-
在 js 中，只有 ''、0、null、undefined、NaN，这些是 false，其余都是 true
八 、NAN
-
意思是:not a number
-
代表数值类型的非数字
-
产生
-
其他转数值
-
计算
-
注意事项
-
nan和任何数做任何比较结果都是false 包括自己(nan=nan)
-
nan和任何数做任何数计算的结果都是nan (nan/nan) (nan-nan)
九 、赋值运算符
-
=
-
就是把 = 右边的赋值给等号左边的变量名
-
var num = 100
-
就是把 100 赋值给 num 变量
-
那么 num 变量的值就是 100
-
+=
var a = 10;
a += 10;
console.log(a); //=> 20-
a += 10 等价于 a = a + 10
-
-=
var a = 10;
a -= 10;
console.log(a); //=> 0-
a -= 10 等价于 a = a - 10
-
*=
var a = 10;
a *= 10;
console.log(a); //=> 100-
a *= 10 等价于 a = a * 10
-
/+
var a = 10;
a /= 10;
console.log(a); //=> 1-
a /= 10 等价于 a = a / 10
-
%=
var a = 10;
a %= 10;
console.log(a); //=> 0-
a %= 10 等价于 a = a % 10
十 、比较运算符
-
==
-
比较符号两边的值是否相等，不管数据类型
-
1 == '1'
-
两个的值是一样的，所以得到 true
-
===
-
比较符号两边的值和数据类型是否都相等
-
1 === '1'
-
两个值虽然一样，但是因为数据类型不一样，所以得到 false
-
!=
-
比较符号两边的值是否不等
-
1 != '1'
-
因为两边的值是相等的，所以比较他们不等的时候得到 false
-
!==
-
比较符号两边的数据类型和值是否不等
-
1 !== '1'
-
因为两边的数据类型确实不一样，所以得到 true
-
>=
-
比较左边的值是否 大于或等于 右边的值
-
1 >= 1 true
-
1 >= 0 true
-
1 >= 2 false
-
<=
-
比较左边的值是否 小于或等于 右边的值
-
1 <= 2 true
-
1 <= 1 true
-
1 <= 0 false
-
>
-
比较左边的值是否 大于 右边的值
-
1 > 0 true
-
1 > 1 false
-
1 > 2 false
-
<
-
比较左边的值是否 小于 右边的值
-
1 < 2 true
-
1 < 1 false
-
1 < 0 false
十一 、逻辑运算符
-
&&
-
进行 且 的运算
-
符号左边必须为 true 并且右边也是 true，才会返回 true
-
只要有一边不是 true，那么就会返回 false
-
true && true true
-
true && false false
-
false && true false
-
false && false false
-
||
-
进行 或 的运算
-
符号的左边为 true 或者右边为 true，都会返回 true
-
只有两边都是 false 的时候才会返回 false
-
true || true true
-
true || false true
-
false || true true
-
false || false false
-
!
-
进行 取反 运算
-
本身是 true 的，会变成 false
-
本身是 false 的，会变成 true
-
!true false
-
!false true
十二 、自增自减运算符（一元运算符）
-
++
-
进行自增运算
-
分成两种，前置++ 和 后置++
-
前置++，会先把值自动 +1，在返回
var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11-
后置++，会先把值返回，在自动+1
var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11-
--
-
进行自减运算
-
分成两种，前置-- 和 后置--
-
和 ++ 运算符道理一样
Day 02（循环结构）
一、程序运行的三大结构
-
顺序结构
-
选择结构
-
循环结构
二、If条件分支结构
if的语句格式
语法： if (条件) { 要执行的代码 }
例如:
<script>
num = 0
if(num==='0'){
console.log(true);
}
</script>
if else的语句格式
语法： if (条件) { 条件为 true 的时候执行 }
else { 条件为 false 的时候执行 }
例如:
<script>
num = 0
if(num==='0'){
console.log(true);
}else{
console.log(false);
}
</script>
if ... else if ...的语句格式
语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
例如:
<script>
var num=prompt('请输入一个数字')
if(num>=0){
console.log('该数字大于0');
}else if(num<0){
console.log('该数字小于0');
}
</script>
if else if … else 语句格式
if (false) {
alert('我是代码段1')
} else if (false) {
alert('我是代码段2')
} else {
alert('我是代码段3')
}三、switch 条件分支结构
语法：
switch (要判断的变量) {
case 情况1:
情况1要执行的代码
break
case 情况2:
情况2要执行的代码
break
case 情况3:
情况3要执行的代码
break
default:
上述情况都不满足的时候执行的代码
}四、三元运算（扩展）
-
三元运算，就是用 两个符号 组成一个语句
-
三元运算只是对 if else 语句的一个简写形式
-
语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行
var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')
五、循环结构
-
循环结构，就是根据某些给出的条件，重复的执行同一段代码
-
循环必须要有某些固定的内容组成
-
初始化
-
条件判断
-
要执行的代码
-
自身改变
1.while循环
语法 ： while (条件) { 满足条件就执行 }
因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了
例如:
<script>
var n=100
console.log('循环之前的代码')
while(n<10){
console.log('代码执行了', n)
n++
}
console.log('循环之后的代码')
</script> 2.do while 循环
语法： do { 要执行的代码 } while (条件)
例如:
<script>
var n=100
console.log('循环之前的代码')
do{
console.log('代码执行了', n)
n++
}while(n<10)
console.log('循环之后的代码')
</script>while和do while的区别
-
while 会先进行条件判断，满足就执行，不满足直接就不执行了
-
但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断
3.for循环
语法： for (var i = 0; i < 10; i++) { 要执行的代码 }
<script>
console.log('循环之前的代码')
for(var n=0;n<10;n++){
console.log('代码执行了', n)
}
console.log('循环之后的代码')
</script>break 终止循环
-
在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环
-
比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情
-
要终止循环，就可以直接使用 break 关键字
continue 结束本次循环
-
在循环中，把循环的本次跳过去，继续执行后续的循环
-
比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个
-
跳过本次循环，就可以使用 continue 关键字
Day 03（函数重点）
一 、函数的概念
将一段代码以命名方式存储到一个盒子里面 在要使用代码的时候可以根据这个名称找到这段代码然后执行
1.语法
- 定义函数： 存代码
```js
function 函数名(){
一段代码
}
```
- 调用函数： 使用代码
```js
函数名()
```
例如:
<script>
function getFunction(){
函数体
}
getFunction() //调用上面的函数
</script> 2.函数优点
-
封装代码，使代码更加简洁
复用，在重复功能的时候直接调用就好
代码执行时机，随时可以在我们想要执行的时候执行
3.函数参数的个数关系
-
形参个数和实参相等 实参会从左往右一一给形参赋值
-
形参个数大于实参 多余的形参它的值是undefined
-
形参个数小于实参 多余的实参相当于白给了
4.函数的返回值
-
返回值: 函数在调用位置得到的结果
-
函数会有一个默认的返回值undefined
-
如果我们希望函数有一个自定义的返回值 只需要在函数中写上return 数据 这个数据就会当做函数的返回值
-
如果函数调用之后得到一个结果 我们需要拿到这个结果进行下一步运算或者判断 这时候函数就需要有返回值
二、函数定义两种方式
-
声明式的定义
function 函数名(){
一段代码
}-
赋值式的定义
var 函数名 = function(){
一段代码
}三、预解析 预编译 声明提前
-
js代码在执行之前浏览器有一个解析的过程
-
在编译的阶段会通读整个js的代码 挑出中间某一些代码提前执行
-
提前执行
-
所有用var声明的变量 会将定义提前,只是定义提前 不会将赋值提前
-
所有声明式的函数会提前定义
-
影响
-
所有用var声明的变量可以提前使用只是使用的值是undefined
-
声明式函数可以在定义之前使用
四、作用域
-
含义： 一个变量起作用的范围
-
分类：
-
全局作用域
-
不被函数包裹区域
-
局部作用域
-
函数的内部（花括号）
-
变量分类
-
全局变量
-
在全局作用域里面定义的变量
-
全局变量它可以在任何位置使用
-
局部变量
-
在局部作用域里面定义的变量
-
局部变量只能在当前的局部作用域使用
五、函数的参数（重点）
-
我们在定义函数和调用函数的时候都出现过 ()
-
现在我们就来说一下这个 () 的作用
-
就是用来放参数的位置
-
参数分为两种 行参 和 实参
// 声明式
function fn(行参写在这里) {
// 一段代码
}
fn(实参写在这里)
// 赋值式函数
var fn = function (行参写在这里) {
// 一段代码
}
fn(实参写在这里)六、行参和实参的作用
-
行参
-
就是在函数内部可以使用的变量，在函数外部不能使用
-
每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范）
-
多个单词之间以 , 分隔
// 书写一个参数
function fn(num) {
// 在函数内部就可以使用 num 这个变量
}
var fn1 = function (num) {
// 在函数内部就可以使用 num 这个变量
}
// 书写两个参数
function fun(num1, num2) {
// 在函数内部就可以使用 num1 和 num2 这两个变量
}
var fun1 = function (num1, num2) {
// 在函数内部就可以使用 num1 和 num2 这两个变量
}-
如果只有行参的话，那么在函数内部使用的值个变量是没有值的，也就是 undefined
-
行参的值是在函数调用的时候由实参决定的
-
实参
-
在函数调用的时候给行参赋值的
-
也就是说，在调用的时候是给一个实际的内容的
function fn(num) {
// 函数内部可以使用 num
}
// 这个函数的本次调用，书写的实参是 100
// 那么本次调用的时候函数内部的 num 就是 100
fn(100)
// 这个函数的本次调用，书写的实参是 200
// 那么本次调用的时候函数内部的 num 就是 200
fn(200)-
函数内部的行参的值，由函数调用的时候传递的实参决定
-
多个参数的时候，是按照顺序一一对应的
function fn(num1, num2) {
// 函数内部可以使用 num1 和 num2
}
// 函数本次调用的时候，书写的参数是 100 和 200
// 那么本次调用的时候，函数内部的 num1 就是 100，num2 就是 200
fn(100, 200)七、参数个数的关系
-
行参比实参少
-
因为是按照顺序一一对应的
-
行参少就会拿不到实参给的值，所以在函数内部就没有办法用到这个值
function fn(num1, num2) {
// 函数内部可以使用 num1 和 num2
}
// 本次调用的时候，传递了两个实参，100 200 和 300
// 100 对应了 num1，200 对应了 num2，300 没有对应的变量
// 所以在函数内部就没有办法依靠变量来使用 300 这个值
fn(100, 200, 300)-
行参比实参多
-
因为是按照顺序一一对应的
-
所以多出来的行参就是没有值的，就是 undefined
function fn(num1, num2, num3) {
// 函数内部可以使用 num1 num2 和 num3
}
// 本次调用的时候，传递了两个实参，100 和 200
// 就分别对应了 num1 和 num2
// 而 num3 没有实参和其对应，那么 num3 的值就是 undefined
fn(100, 200)八、特殊的函数
-
匿名函数
var 函数名 = function (){
}-
自执行函数
(function(){
// 一段代码
})()-
递归函数
function 函数名(){
函数名() // 在函数内部调用自己
}
函数名()-
类似于循环
-
在函数内部自己调用自己 函数就会不断执行 就可以导致死递归的错误Uncaught RangeError: Maximum call stack size exceeded 最大调用栈长度溢出
-
递归函数都需要有一个结束条件
-
递归的两个过程
-
传递的过程
-
所有没有得到结果的函数会进入调用栈等待（入栈）
-
回归的过程
-
得到的结果的函数就会出调用（出栈）
-
递归就是用于解决循环无法实现的问题
九、return关键字
-
可以让函数执行结束之后有一个返回值
-
可以结束函数的执行
十、return和break的区别
-
return只能在函数的内部使用
-
break是用来结束循环和switch穿透
十二、随机数
-
Math.random() [0,1)
十三、赋值规则
-
当你想给一个变量赋值的时候，那么就先要找到这个变量，在给他赋值
-
变量赋值规则：
-
先在自己作用域内部查找，有就直接赋值
-
没有就去上一级作用域内部查找，有就直接赋值
-
在没有再去上一级作用域查找，有就直接赋值
-
如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，在给他赋值
十四、递归函数
-
什么是递归函数
-
在编程世界里面，递归就是一个自己调用自己的手段
-
递归函数： 一个函数内部，调用了自己，循环往复
// 下面这个代码就是一个最简单的递归函数
// 在函数内部调用了自己，函数一执行，就调用自己一次，在调用再执行，循环往复，没有止尽
function fn() {
fn()
}
fn()-
其实递归函数和循环很类似
-
需要有初始化，自增，执行代码，条件判断的，不然就是一个没有尽头的递归函数，我们叫做 死递归
Day04(数组重点)
数组（js里面最重要的数据类型） Array
1、数组的类型：复杂的数据类型
2、有序的数据集合
-
- 数组的有序性不是说数据往里面存放的时候会自动排序
+ 有序是体现在数组左侧的下标 索引
+ 每往数组里面放一个数据 自动生成一个下标
3、获取数组的长度
数组名.length4、数组的长度
-
+ 0-数组的长度-1
5.创建一个空数组
1. 字面量
+ var 数组名 = []
2. 内置构造函数
+ var 数组名 = new Array()6.往数组里面添加数据
1.创建的时候添加初始化数据
+ var 数组名 = [11,2,23,4,5,6,67,2]
+ var 数组名 = new Array(11,2,23,4,5,6,67,2)
2. 动态给数组添加数据
+ 数组名.push(数据) 往数组的末尾添加一个数据
+ 数组名.unshift(数据) 往数组的开头添加一个数据
3. 通过下标的方式给数组添加数据
+ 数组名[下标] = 数据7.获取数组里面的数据
1. 根据下标的方式获取
+ 数组名[下标]
+ 越界访问取到的数据都是undefined 不会报错
2. 动态获取
+ var 数据 = 数组名.pop()
+ var 数据 = 数组名.shift()
+ 这种获取方式会改变数组的长度8.遍历数组
- 取出数组里面所有的数据
- 循环获取 先生成数组的下标范围 0 - 数组长度-1
利用for循环
for(var i=0;i<数组名.length;i++){
console.log('下标', i)
console.log('每一项', 数组名[i])
}
利用for..in循环
for(var 变量名 in 数组名){
console.log('下标', 变量名)
console.log('每一项', 数组名[变量名])
}
利用for..of循环
for(var 变量名 of 数组名){
console.log('每一项', 变量名)
}
利用forEach
数组名.forEach(function(item, index){
// item 代表数组里面每一项
// index 代表下标
})
map方法
将一个数组里面数据经过计算 得到一个计算后的新数组
// map函数调用之后也会有一个返回值 返回就是计算后的数组
var 新数组 = 数组.map(function(item, index){
// item代表数组的每一项
// index代表数组的索引
// map需要返回一个数据 会把这个数据放到新数组里面
})
filter方法
将一个数组根据某一个条件进行过滤 得到一个过滤后的新数组
// filter方法调用之后有一个返回值 返回的是过滤后的数组
var 新数组 = 数组.filter(function(item, index){
// 这个函数需要有一个返回 返回的是一个条件 是一个布尔值
// 会根据这个布尔值来决定是保留还是撇弃当前项数据
})
every方法
判断数组里面是否每一项都符合这个条件
var 布尔值 = 数组.every(function(item, index){
// 需要返回值 这个返回值就是条件
})
some方法
判断数组里面是否有符合这个条件的某一项
var 布尔值 = 数组.some(function(item, index){
// 需要返回值 这个返回值就是条件
})
9.删除数组里面某一项数据
delete 数组名[下标] 会删除数据 但是不会删除长度
数组名.splice(开始的下标, 删除个数)10.修改数组里面某一项数据
数组名[下标] = 数据11.判断数组中有无这一项数据
判断数组里面是否包含某一项数据
- 数组名.indexOf(数据)
+ 找到了这个数据 返回第一个匹配数据对应的下标
+ 没有这个数据 固定返回-1
- 数组名.includes(数据)
+ 找到了这个数据 返回true
+ 没有找到这个数据 返回false12.数组的去重、拼接、旋转
代码的去重操作（思路）
<script>
var list = [1,34,1, true, 54,true, 21,'哈哈', 2,'哈哈',3, undefined,42]
// 新建一个数组
var newList = []
// 取出老数组的每一项
for(var i=0;i<list.length;i++){
console.log('每一项', list[i])
// 判断新数组里面有没有这一项
if(newList.indexOf(list[i]) === -1){
// 找不到才放进去
newList.push(list[i])
}
}
console.log(newList)
/* 新建一个数组
取出老数组里面每一项
- 判断新数组里面是否包含这一项数据 如果不包含就放进去 包含就不放进去
*/
</script>
数组的拼接
- 数组名.concat(数组01,数组02, ...)
数组的反转
- 数组名.reverse()13、数组的排序
- 冒泡排序
+ 双重for循环
+ 外层循环代表比较次数 次数=数组的长度-1
+ 内层循环代表每一次比较 每一次拿相邻的两项进行相比 如果前一项大于后一项 交换两项的位置
- 数组名.sort()Day05（字符串）
一、js的存储数据方式-值存储和引用存储
-
在js中有两种存储数据的方式: 栈和堆
-
在栈里面存储变量名
-
如果数据是基础数据类型 直接存在栈里面
-
如果数据是复杂数据类型 存在堆内存里面 每一次在堆内存存储一个数据都会得到一个空间地址
-
基础数据类型它的值和变量都是存储在栈里面（值存储）
-
复杂数据它的变量名是存在栈里面 在栈里面存的值是一个指向堆内存空间的地址（引用） 这个地址指向堆内存空间的数据(引用存储)
-
js在查找数据的时候只会在栈里面查找
二、值传递和引用传递
-
把一个变量赋值给另一个变量 这个过程称为传递的过程
-
基础数据类型之间的赋值是把值给另一个变量， 一个变化另一个不受影响 这个赋值过程称为值传递
-
复杂数据类型之间的赋值是把地址给另一个变量， 一个变化另一个也会变化。因为他们的地址是指向同一个堆内存里面的数据 这个赋值过程称为引用传递
三、值比较和引用比较
-
两个变量比较是否相等
-
基础数据类型拿两个变量的值进行比较的
-
复杂数据类型拿两个变量的地址进行比较
四、字符串
-
凡是被单引号或者双引号包裹的
-
多个字符组成的整体
-
'hello'
-
字符串在底层存储方式和数组是一致（字符串和数组的共性）
-
支持下标的方式访问
-
有长度
-
可以支持遍历
-
支持查找
五、字符串与数组的区别
1. 字符串不支持下标方式修改
2. 字符串不支持用forEach去遍历
3. 字符串不支持删除
4. 不支持反转
5. 排序六、字符串和数组的相互转换
1. 把字符串转换成数组（拆分）
- var 数组 = 字符串.split()
2. 把数组转换成字符串（拼接）
- var 字符串 = 数组.join()七、字符串的方法
字符串.charAt(下标)
字符串.charCodeAt(下标)八、编码
- ASCII码表
- unicode码表（万国码）
- 字符串比较
- 中文编码在utf-8范围
+ u4e00-u9fa5九、字符串转大小写常用方法
var str = 'sdAaSdas'
var newStr = str.toUpperCase()
//转大写
var newStr1 = str.toLowerCase()
//转小写十、字符串裁剪
- 字符串.substring(开始下标, 结束下标) 包含开始 不包含结束
- 字符串.substr(开始下标,截取个数)
- 字符串.slice(开始下标, 结束下标) 包含开始 不包含结束十一、substring和slice的区别
1. slice可以支持负数
+ 传负数代表下标是从右往左数的 从-1开始
+ 裁剪的方向永远都是从左往右
+ 必须有交集才能得到结果
2. slice既可以裁剪数组也可以裁剪字符串Day06(对象、时间、数学函数)
一、对象的类型：是一种复杂的数据类型、、键值对的数据集合
二、创建对象
1. 字面量
- var 对象名 = {}
2. 内置构造函数
- var 对象名 = new Object() 三、向对象中添加数据
1.初始化添加
var 对象名 = {
键名: 值,
键名: 值,
...
}
2. 动态添加数据
1. 点语法
对象名.键名 = 值
2. 下标法
对象名['键名'] = 值四、获取对象中的数据
1. 点语法
- 对象名.键名
2. 下标法
- 对象名['键名']五、修改对象中的数据
同添加
如果key不存在就新增
如果key存在就修改六、删除对象中的数据
delete 对象名.key
delete 对象名['key']七、遍历对象中的数据
只能使用for ... in循环
for(var key in 对象名){
console.log(key) // 对象的键名
console.log(对象名.key)
}八、内置对象 Math的对象属性
对象属性：当对象的value是一个具体数据 称这个键值对是对象的一个属性
+ **Math.PI**
+ Math.E九、内置对象 Math的对象方法
对象方法： 当对象的value是一个函数的时候 称这个键值对是对象的一个方法
+ Math.abs() 绝对值
+ Math.max() 获取最大值
+ Math.min() 获取最小值
+ Math.sqrt() 平方根
+ Math.pow(底数, 幂数) 求多少次方
+ 常用方法
- **Math.random()** 随机数，最常用的
+ **取整**
- Math.floor() 向下取整
- Math.ceil() 向上取整
- Math.round() 四舍五入取整十、不定形参
调用一个函数的时候 参数的个数是不固定的 可以利用函数内部自带的arguments获取参数的信息
arguments是一个伪数组 但是可以支持遍历 因为它有长度并且可以支持下标的方式访问十一、Date 内置构造函数
+ 和本地计算机时间相关
+ 获取年月日 时分秒 星期几
- 创建一个日期对象
+ var riqi = new Date()
- 利用这个日期对象获取
+ 获取年份 riqi.getFullYear()
+ 获取月份 riqi.getMonth() 从0开始的 0代表1月份
+ 获取日期 riqi.getDate()
+ 获取小时 riqi.getHours()
+ 获取分钟 riqi.getMinutes()
+ 获取秒数 riqi.getSeconds()
+ 获取星期 riqi.getDay()
+ 日期格式
- YYYY-MM-DD hh:mm:ss
- YYYY/MM/DD hh:mm:ss十二、定时器
- 间隔定时器
+ 每间隔一段时间执行代码一次
setInterval(function(){
// 只要写在这个函数里面的代码会间隔ms毫秒执行一次
}, ms)
- 延迟定时器
+ 延迟一段时间之后执行代码一次
setTimeout(function(){
// 只要写在这个函数里面的代码会延迟ms毫秒执行一次
}, ms)十三、时间计算
- '2000-10-08 09:45:12'
- '2022-01-16 17:53:02'
- 时间戳
+ 某一个时间距离计算机初始化时间（1970-01-01 00:00:00）相差的毫秒数
+ 先要把字符串格式的转换成日期对象
- var riqi = new Date(str)
+ 再调用getTime()就可以获取到时间戳
- riqi.getTime()十四、日期对象Date
new Date()传参问题
1. 当我们没有传参 代表获取的是当前的系统时间 当前的日期对象
2. 当我们传了一个字符串格式的日期 代表获取的是这个字符串所代表的日期对象
3. 当我们传了一个数字 这个数字就是一个时间戳 能够获取到这个时间戳所代表的日期对象Day07（DOM重点)
一、dom的基本介绍
+ document object model 文档对象模型
+ 将js和html css结合
+ 利用js来操作网页
1. 操作样式
2. 实现交互
3. 动画二、获取标签（元素）
1. 根据元素的id
- document.getElementById(id名称) 返回是唯一的元素
2. 根据元素的类名
- document.getElementsByClassName(类名称) 返回是数组 数组里面才是想要的元素
3. 根据元素的标签名
- document.getElementsByTagName(标签名称) 返回是数组 数组里面才是想要的元素
4. 根据选择器来获取匹配的第一个
- document.querySelector(css选择器)
5. 根据选择器来获取所有匹配的
- document.querySelectorAll(css选择器)三、操作元素的样式
- 设置样式
+ 元素.style.css属性名 = css属性值
- 获取样式
+ 元素.style.css属性名 只能获取行内样式 无法获取外部和内部的样式 默认样式
+ getComputedStyle(元素).css属性名 所有样式都能取到四、操作元素的内容
- 获取
+ 元素.innerHTML 包含html标签
+ 元素.innerText 纯文字
- 设置
+ 元素.innerHTML = 内容 识别标签
+ 元素.innerText = 内容 只能识别字符串五、操作元素的属性值
- 获取
+ 元素.getAttribute(属性名)
- 设置
+ 元素.setAttribute(属性名, 属性值)
- 移除
+ 元素.removeAttribute(属性名)六、操作类名
- 只要给某一个元素设置不同的类名 就会有不同的样式
- 设置类名
+ 元素.setAttribute('class', '类名') 会覆盖元素之前的类名
+ 元素.className = '类名' 会覆盖元素之前的类名
- 获取类名
+ 元素.getAttribute('class')
+ 元素.className
- 添加类名
+ 元素.classList.add(类名)
- 移除类名
+ 元素.classList.remove(类名)
- 判断有没有这个类名
+ 元素.classList.contains(类名)七、操作入框属性值
- 获取
+ 元素.value
- 设置
+ 元素.value = 值八、操作元素的尺寸
- 尺寸
+ 元素.clientWidth 内容+padding
+ 元素.offsetWidth 内容+padding+border九、DOM树和DOM节点
DOM树： 描述html的层级结构
+ DOM节点： html里面的内容
- 标签 元素节点
- 文字 文本节点
- 标签属性 属性节点
- 注释 注释节点
、、重点
+ 爬树
- 获取一个已知节点的所有子节点
+ 元素.childNodes 获取到所有类型的子节点
+ 元素.children 获取到元素类型子节点
- 获取一个已知节点的父节点
+ 元素.parentNode
- 获取一个已知节点的前一个相邻节点
+ 元素.previousSibling 前一个兄弟节点
+ 元素.previousElementSibling 前一个兄弟元素节点
- 获取一个已知节点的后一个相邻节点
+ 元素.nextSibling
+ 元素.nextElementSibling十、DOM节点的属性
- **nodeType**
+ 用于区分节点的类型
+ 元素节点 1
+ 属性节点 2
+ 文本节点 3
+ 注释节点 8
- nodeName
+ 元素节点 标签名的大写
+ tagName
- nodeValue十一、获取属性节点
- 属性节点是写在一个元素节点身上
- 元素节点.attributes十二、动态操作DOM-增加
+ 创建节点
- document.createElement(标签名) 创建一个元素节点
+ 将创建的节点添加到页面
- 往父节点添加一个子节点
+ 父节点.appendChild(子节点) 父节点最后添加一个子节点
+ 父节点.insertBefore(子节点, 已存在的节点) 父节点的某一个存在的子节点前面追加一个子节点十三、动态操作DOM-删除
- 修改内容
- 替换节点
+ 父节点.replaceChild(新节点, 老节点)十四、动态操作DOM-修改
- 父节点.removeChild(子节点)十五、动态操作DOM-克隆
- 要克隆节点.cloneNode() 只会克隆当前节点
- 要克隆节点.cloneNode(trye) 克隆当前节点和子节点
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
