JavaScript总结

JavaScript 概述

JavaScript ！= Java （GC机制…）

轻量级：解释语言，需要浏览器解释

弱类型：代码的分号可加可不加；标签属性的大小写均可以… 语法的严格程度不高

面向对象：

//构造函数
function Test（）{

}
let test = new Test()

JS 作用： 处理网页幕后逻辑（JS） （页面设计交给 HTML/CSS）

​ 举例：要求密码前三位是英文字母，且不能小于10位 （表单验证）

JS在页面中输出： write 只能被document使用，指定定义文本

​ innerHTML可以被所有标签使用，识别标签的文本内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QcPC6Kxw-1662363312946)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220825163535319.png)]

变量初始化

var 没有块级作用域 （在区域中的值会向外扩散）

let 块级作用域 （只能在当前区域中生效）

变量提升

//var a = undefined
a = 1
console.log(a)

变量类型

null 清空引用类型“对象”

undefined 初始化每个变量在内存中的状态、

在数据类型中： NaN（不是一个数）、Infinity（无穷大）

类型的转化

var a = String(内容)

var a = Number(内容) parseInt paseFloat

var a = Boolean(内容)

运算符

逻辑与 与 短路与

​ & &&

if(a > 0 && 1 / 0 > 1)
if(a > 0 & 1 / 0 > 1)

数组

创建方式：1、var a = [1,2,3] 2、var a = new Array() ; a[0] = 1

length 数组的长度

push 向后添加一个元素或者数组

pop 将数组 末尾 去掉并返回一个元素

shift 将数组 头部 去掉并返回一个元素

unshift 向前添加一个元素或者数组

join 将所有数组的元素·通过某个字符进行组合

内置对象

new Date() 过时了

现在建议的事件获取方式：Date.now()

System.currentMillons

DOM

获取元素的方式：

document.querySelector 根据选择器 获取标签

document.querySelectorAll 根据选择器 获取所有标签

document.getElementXXXXX

监听事件

onmousedown up over out move

onkeypress

onclick

设置事件的方式（绑定事件的方式）

1、div.onclick = function(){}

2、div.addEventListener(‘click’,function(){})

设置元素的属性样式

<div style=“color:red”></div> 内联样式

color -> style -> div

div.style.color = 字符串属性

<div style=“background-color:red”></div>

div.style.background-color 错误=> div.style.backgroundColor 正确

div.style[‘background-color’] = 字符串属性

<div class=“a”></div>

div.class 错误=> div.className 正确

value

1、表单标签中的属性 所以只能用于标签标签

2、不同的type属性标签，那么value的意义的不同

3、既可以用来设置value属性，也可以用来获取value属性 （get set）

输入狂 type = “text” “password” “number”…

value 输入的内容

单/多项框 type = “radio” “check’box”

value 输入的内容就是value中定义的内容

选项框 select + option

value option的标记内容

按钮 type=“button”

value 按钮的名称

style.属性

只能设置标签的属性，不能获取标签的属性 （除非该标签定义的是行内样式）

获取属性值的函数 ： document.getComputedStyle(标签对象，属性名称)

设置一个标记的属性，

如果标记定义了行内样式 ，那么“标记.style.属性” 可以获取属性

Chrome浏览器 Edge浏览器 FireFox getComputedStyle

IE8 IE7 IE6 currentStyle 使用格式“ 标记对象.currentStyle[属性] ”

class属性 “style.className”

函数

函数的定义

常用

function abc(){

}

变量的方式

let abc = function(){

}

注意点：事件设置

box.onclick = abc
box.onclick = abc() 错误  abc()会提前执行

形参自动接收的数组对象 => 重载

arguments

函数会被浏览器引擎解析， 当HTML结构加载完成，引擎会事先将函数加载至缓存中

（ 函数无论定义在调用前还是后，都可以使用）

对象

对象中也有属性 和 方法

JS中对象就是以键值对的方式组合，用花括号包裹起来的内容

对象调用

student.age => student[‘age’]

对象属性自定义

如果需要在对象中新增一个属性

对象. 属性 = 属性值 （新增了一个属性）

对象 包含了 document.querySelector 中取出的标签对象

因此我们时常可以在标记存入一些具有特殊意义的变量

定时器的使用

1、setInterval（function(){}, duration） 执行函数 和 间隔时间

2、clearInterval

DOM 节点

节点树 （文本、属性、元素）

元素节点树 （元素（标记））

创建标记

createElement(标记名称)

append 父元素末尾添加子元素 （appendChild）

prepend 父元素开头添加子元素

删除标签

remove 将标签本身删除

empty 将标记的内容清空

removeChild 父元素将指定的子元素删除

设置标记属性

对象.属性 = 属性值

对象.setAttribute(属性，属性值)

事件使用

onmouseover

onmouseout

onmousedown

onmouseup

onmousemove

onclick

ondblclick

onchange 针对输入框标记有效

onblur 失去焦点

onfocus 获取焦点

事件event

clientX 当前元素在显示区域中的X坐标位置

clientY 当前元素在显示区域中的Y坐标位置

offsetX 当前元素在具有定位级的父元素中的X坐标位置

offsetY 当前元素在具有定位级的父元素中的Y坐标位置

event 在不同事件中事件中的属性的个数。类别是不同的

onmousemove中 X,Y…

onkeypress 中 key keyCode…

事件绑定

addEventListener（事件名称，函数） 绑定

removeEventListener(事件名称，函数) 解绑

一个事件可以绑定多个函数

一个函数绑定多个事件

组织事件冒泡

 //阻止事件冒泡
event.cancelBubble = true

window

window.document

window.history go(数字) 跳转到对应的缓存页面 forward back …

window.location reload 重新加载当前网页 replace将网页内容替换

window.open 打开一个新的网页

类别是不同的

onmousemove中 X,Y…

onkeypress 中 key keyCode…

事件绑定

addEventListener（事件名称，函数） 绑定

removeEventListener(事件名称，函数) 解绑

一个事件可以绑定多个函数

一个函数绑定多个事件

组织事件冒泡

 //阻止事件冒泡
event.cancelBubble = true

window

window.document

window.history go(数字) 跳转到对应的缓存页面 forward back …

window.location reload 重新加载当前网页 replace将网页内容替换

window.open 打开一个新的网页

window.localStorage 本地储存（关闭浏览器消失）