JS基础知识

一、引入方式

一、语法、标识符

二、 变量提升（不报错–>undefined）

仅仅把"声名"提升，赋值不提升

结果：

三、JS的三种输出方式

alert：弹窗
document.write（）：在页面显示文本
console.log():控制台输出

document.write()

四、6种数据类型

1. 六种数据类型
2. 三种原始类型


3. 复合类型

五、typeof（）

五、数据类型转换

六、比较运算符

=:严格比较，数值+类型

七、布尔运算符

八、函数

定义方式二

编译时会将函数提到顶部，再进行调用：

对象的调用（类似c的结构体）

获取min~max之间的随机数：

九、Date函数

获取后台传来的时间
获取当前时间

打印当前时间

还有多少天过年

十、JS对象

一、数组对象

1、遍历数组（for、foreach）

2、push、splice

二、String对象

三、自定义对象

四、JSON对象

五、BOM

一、window对象

二、Location对象

代码：跳转到www.itcast.cn

十、DOM

通过DOM改变文本内容、改变css样式

1、节点
通过节点操作HTML

二、DOM操作

十一、document获取结点（四种方式）

1.ByTagName
JS达到操作页面元素的目的

2.ByClassName（同理ByTagName）

3.ById（主要！！！）


JS更改HTML页面

4.querySelector选择器


不加下标，返回的是集合
加了下标，可以准确操作该标签

十二、document创建子元素！！！

1.创建标签结点：createElement，返回结点！！！！！

2.创建文本：createTextNode

3.创建属性：createAttribute，（class=“ ”）

创建属性结点、设置属性结点

应用如下：
appendChild：
1、加内容到p标签中
2、加子元素到容器中
3、setAttributeNode：把属性（选择器）塞入标签，只有属性**，**
其他都用appendChild方法

结果：

十三、Element（id，class，innerText，元素位置）

1.先获取到元素结点，才能用element获取、修改元素的id

2.获取到元素结点后，才能用element获取、修改class名称


上面代码更改了id选择器的名称为roots，但是获取的var变量任然可以操作

结果：

3.对class：添加、删除、判断是否存在


设置完：

4.innner.HTML和innner.Text
后面加了内容就是修改，没加就是读取

使用innerHTML、innerText：读取或修改（二者功能几乎一样！！！！！）

结果：

区别：


str不被识别成标签！！

Element属性：
区别：InnerHTML会识别成超链接；
而innerText不识别*标签，认为是 字符串*
innerHTML

5、element获取元素位置
3、4和1、2没有区别！！！

1.元素高度：

2.滚动高度，返回px值

3.不包含margin外边距，其他都包含
4.有定位（position：relative）相对父级，没有则相对标准流
（标准流左右各有8px的空隙）

消除页面左右两边空隙

十四、CSS操作（JS实现CSS）

通过JS操作CSS，设置样式
有以下三种方式：

十五、事件处理程序（HTML事件、DOM0、2级事件）

1.HTML事件（未分离）

2.DOM0级（分离，但是仅触发最后一个）（主要！！！！！）

3.DOM2级事件处理(多个)

btn111.addEventListener(“click”,函数体)

十六、鼠标事件

十七、Event事件对象

属性方法：event.Target
结果：

对象方法1：

对象方法2：阻止事件冒泡，只在子元素触发事件

阻止事件冒泡，只在子元素触发事件
实现：点红色只打印红色
点灰色只打印灰色

十八、键盘事件

三种：

e.target就是当前元素结点
keydown、up、press、既然可以获取到e那么可以用e.target.value获取键盘输入值
e.target获取当前元素：标签

keyCode:回车按键的ascii码值是13

十九、表单事件（input、submit、reset、change）

1.input事件，一输入就触发（onkeyup好像也可以！）

2.Change，回车才触发事件（input有变化就触发事件）

3.reset：在整个表单上触发、不在表单成员上触发
虽然获取了表单成员resetBtn，但是还需要myForm触发！！！！！

4.submit：在表单上触发

console.log 打印日志在原来页面，表单提交后转到新的页面，无法显示旧的页面的日志，可以使用alert显示展示的内容！

二十、定时器

1、定时器setTimeout

语法：

1.、
JS中的对象：复合数据类型：下图中的user
>this.name相当于user.name

2.
结果：

3.定时器中的this指向iwen
getName中的this指向itbanzhan

2、定时器setInterval

3、防抖

第一次触发：给出期限值200ms，200ms内未再次触发则执行
第二次触发：若超过了200ms，则上一次已经触发；若在200ms内，则检查定时器timer是否为null是否有值，若有值则清空之前定时器，实现只执行最后一次的触发
最后一次触发：输入结束后200ms内还没输入，则执行

二十一、命令

1、let命令

1作用域

只有var可以被重复定义！！！！！！！

let i 有十个i，因此打印出6
var i只有一个i，打印出最后一次的值10

2、let不存在变量提升，var可以

报错：

3、