web前端 js基础

1.引入

1.body 标签的 script 标签中

2.将代码写在js的格式文件中，在body标签中引用

代码如下

2.数据类型

1.数字型 number 1

2.字符串型 string '1'

3.布尔型 boolean true

4.undefined型 undefined undefined

5.null型 object null

6.typeof 运算符 可以检测变量的类型

3.变量声明

var 变量名 = 变量值

4.数字类型

1.不分大小、整浮、正负

2.科学计数法 例：3e8 3乘10的八次

3.不同进制的数字

0b 二进制

0 八进制

0x 十六进制

4.NaN “not a number" 它是一个数字类型的值

5.字符串类型

1.单双引号包裹

2.字符串拼接

’1‘+’2‘结果是’12‘

3.字符串和变量的拼接

’字符串1‘+变量名’字符串2‘

4.空字符串 ’ ‘

5.length 字符串的长度

6.输入输出语句

输入语句 prompt()

输出语句 alert() 弹出警示框

console.log() 控制台输出

7.数据类型的转换

1.转数字型

Number()

parseInt()转换为整数

parseFloat()转换为浮点数

2.转字符型

String() toString()

3.转布尔型

Boolean()

8.运算

8.1算术运算符

加、减、乘、除、取余

8.2隐式类型转换

如果参与运算的不是数字型，自动将次操作符转换为数字型

8.3关系表达式

1.大于> 小于< 大于等于>= 小于等于<=

2.等于 == 值相等

===全等 值、类型完全相等

3.NaN 不自等

4.不相等 ！=

不全等！==

5.非 ！

6.与 && 都真才真

7.或 || 有真就真

8.优先级 非>与>或

8.4赋值运算符

=

+=

-+

*=

/=

%=

++

--

8.5a++与++a的区别

a++先取值后计算

++a先计算后取值

8.6运算优先级

非>数学运算>关系运算>逻辑运算

9.分支

if

switch

10.循环

while

do while

for

break 结束当前循环

continue 跳出本次循环，执行下次循环

11.数组

11.1创建数组

1.var arr = new Arr() 利用new创建

2.var arr = Arr[] 利用字面量创建数组

11.2获取数组元素

数组元素从0开始

1.arr[0]

2.利用for遍历数组

3.使用 数组名.length可以访问数组元素的数量

11.3数组新增元素

通过修改数组元素的长度增加数组元素 增加部分由于没有赋值 所以默认undefined

11.4利用数组冒泡排序

代码如下

12.函数

12.1声明

function 函数名 (参数1，参数2) {

函数内容

}

12.2调用

函数名(参数1，参数2)；

12.3调用问题

1.实参=形参 输出正确结果

2.实参>形参 只取到形参的个数

3.实参<形参 多得形参定义为undefined，结果为NaN

13.作用域

变量可用性的代码范围

全局变量：在代码任意位置都可以使用

局部变量：在函数声明内部可以使用

14.预解析

变量预解析：把变量的声明提前，但不提前变量的赋值

函数预解析：函数的声明提前，但不提前函数的调用

15.对象

15.1定义

对象作为具体的一个盒子 由属性和方法组成。

15.2创建

1.利用字面量

var obj = {

属性名：属性值，

方法名：function（）{}

}

2.利用new

var obj = new Object;

属性名：属性值;

方法名：function（）{};

3.构造函数

function 构造函数名(){

this.属性名=属性值；

this.方法名=function（）{}

}

15.3调用

1.调用属性

对象名.属性名

对象名['属性名']

2.调用方法

对象名.方法名()

15.4遍历对象

for (变量名 in 对象名) {

}

15.5Date对象

new Date()

1.如果Date()不写参数，则返回当前时间

2.如果Date()写参数，则返回括号里时间

16.MDN文档查阅

Date

获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒数(时间戳) 程序加密

1.通过 valueOf() getTime()

2.简单写法（最常用） +new Date() (之前已定义Date对象)

3.H5 新增的 Date.now()

数组对象Array

数组对象的创建

1.利用字面量

var arr = [1,2,3]

2.利用newArray

var arr = new Array(2,3) 注意：括号里不能写一个数字，如果写一个数字表示的是数组的长度 例如：Array（2） 表示里面有2个空的数组元素

检测是否为数组

1.instanceof 运算符

arr instanceof Array 如果输出true表示arr是数组，反之不是

2.Array.isArray(参数) H5新增的

Array.isArray(arr) 如果输出true表示arr是数组，反之不是

添加删除数组元素

1.push() 在数组末尾添加一个或多个数组元素

arr.push(元素1，元素2) push完毕返回的是新数组的长度 原数组变化为新数组

2.unshift 在数组的开头添加一个或多个数组元素

arr.unshift(元素1，元素2) unshift完毕返回的是新数组的长度 原数组变化为新数组

3.pop() 删除数组的最后一个元素

arr.pop() pop后面不跟参数 pop完毕的返回值是删除的数组元素 原数组变化为新数组

4.shift() 删除数组的最后一个元素

arr.shift() shift后面不跟参数 shift完毕的返回值是删除的数组元素 原数组变化为新数组

数组排序

翻转数组

reverse()

arr.reverse() 表示翻转arr

数组排序(冒泡排序)

sort()

arr.sort(function（a,b) {

return a - b; 表示升序

return b - a; 表示降序

}

数组索引

1.indexOf()

arr.indexOf(元素1) 表示返回arr中的元素1的索引号

注意：只返回第一个满足条件的

找不到该元素，则返回-1

2.lastIndexO()

注意：相比indexOf 它是从后往前查找，返回元素的索引值其它一致

数组转换为字符串

1.toString

arr.toString()

2.join(分隔符)

arr.join() 用逗号分隔

arr.join('-') 用-分隔

字符串对象

基本包装类型

把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法

字符串的不可变

字符串赋值，字符串的值是不变的，只是重新开辟了一个新的空间放新的字符串

根据字符返回位置

indexOf('要查找的字符',[起始位置])

lastIndexOf 用法一致

根据位置返回字符

1.charAt(index) 根据位置返回字符

arr.charAt(3) 表示返回arr中索引数为3的元素

2.charCodeAt(index) 返回相应索引号的字符的ASCII值

arr.charCodeAt(0) 表示返回arr中索引数为0的元素的ASCII值

3.arr.[index] H5 新增的

arr.[0] 表示返回arr中索引数为0的元素

字符串操作方法

1.concat('字符串1','字符串2') 连接两个字符串

2.substr('截取的起始位置(索引号)','截取几个字符')

3.replace('被替换的字符','替换为的字符')

注意：只会替换第一个字符

4.split('分隔符') 把字符转换为数组 与join方法类似

简单类型与复杂类型

简单类型，又叫值类型，在存储变量中存储的是值本身

注意：null返回的是一个空对象

复杂类型，又叫引用类型，在存储变量中存储的是其地址

堆和栈

简单类型，直接开辟一个空间，栈里面存放的是值

复杂类型，在栈里面存放地址，用十六进制表示，这个地址指向堆里面的数据

简单类型传参

把变量在栈的空间里的值复制了一份给形参，在方法内部对形参做任何修改，都不会影响到外部变量

复杂类型传参

把变量在栈的空间里保存的地址复制给了形参，形参和实参保存的是同一个地址，所以操作的是同一个对象

Web APIs

APIs

给程序员提供的一种工具，以便能更轻松实现要完成的功能

Web APIs

是浏览器提供的一套操作浏览器功能和页面元素的APIs(BOM和DOM)

DOM

处理可扩展标记语言的接口 改变网页的结构和样式

DOM树

文档 一个页面

元素 页面中所有的标签

节点 页面中所有的内容

注意：DOM把以上内容都看做为对象

获取元素

根据ID获取

getElementById()

document.getElementById(id名)

1.script 写到标签的下面

2.参数id是大小写敏感的字符串

3.返回的是一个元素对象

4.console.dir 打印我们返回的元素对象 更好地查看里面的属性和方法

根据标签名获取

getElementsByTagName()

document.getElementsByTagName('标签名') 获取整个文档中的全部标签元素

1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的

2.依次获取每个元素，需要遍历数组

3.如果页面只有一个标签，返回的还是伪数组形式

4.如果页面中没有这个标签，返回的是空的伪数组形式

element.getElementsByTagName('标签名') 指明一个父元素(父元素必须是指定的单个元素)，获取父元素中的标签元素

通过HTML5新增方法

1.getElementsByClassName('类名')

2.querySelector('选择器名') 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号

3.querySelectorAll('选择器名') 返回指定选择器的所有元素对象集合

获取body

document.body

获取html

document.documentElement

事件基础

触发响应的机制

事件三要素

点击

事件源

事件被触发的对象

var btn = document.getElementById('btn');

事件类型

如何触发 什么事件

鼠标点击（onclick）

事件处理程序

通过一个函数赋值操作 完成

btn.onclick = function() {

alert('完成');

}

执行事件的步骤

1.获取事件源

2.绑定事件

3.添加事件处理程序

操作元素

改变元素的内容

1.element.innerText = 表示改变element元素中的文字为

不识别html标签 去除空格和换行

2.element.innerHTML = 表示改变element元素中的文字为

识别html标签 保留空格和换行

这两个属性是可以读写的 可以获取元素里面的内容

改变元素的属性

1.获取元素

2.注册事件 处理程序 修改元素属性

元素名.属性名

表单元素的属性操作

1.获取元素

2.注册事件 处理程序

表单里面的文字内容通过value改变

input.value =

如果想要某个表单被禁用 不能再点击

this.disabled = true this是指向事件函数的调用者

改变样式属性

this.style.backgroundColor this.style.width 产生的时候行内样式

隐藏元素 display:none 变量名.style.display = 'none'

显示元素 display:block

获得焦点事件 onfocus 失去焦点事件 onblur

类名样式操作样式属性 （适合于样式较多或者功能复杂的）

element.className

在head标签中创建一个类标签，然后在script标签中，把需要修改的元素类标签修改为新创建的标签

this.className = '新类标签名' 会覆盖之前的class类名

this.className = '原来的类标签名 新类标签名' 保留原先的class类名

排他思想

1.所有元素全部清除样式

2.给当前元素设置样式

3.注意顺序不要颠倒

onmouseover 鼠标经过

onmouseout 鼠标离开

自定义属性值的操作

获取元素的属性值

1.element.属性 获取的是内置属性值

2.element.getAttribute('属性') 可以获取自定义属性值

设置属性值

1.element.属性='值' 内置属性值

2.element.setAttribute('属性','值') 主要针对自定义属性值

移除属性值

类名标签.removeAttribute('属性')

H5自定义属性

规定以data-开头设定自定义属性

获取

1. .getAttribute('data-属性名') 常用 兼容性较好

   2.  .dataset.属性名   或  .dataset['属性名']

如果自定义属性中有多个-链接的单词，我们获取时采取 驼峰命名法

节点操作

1.父节点 parentNode 得到的是离元素最近的父节点 如果找不到父节点就会返回 null

2.子节点 childNodes 得到的所有子节点 包括元素节点和文本节点

children 获取所有的子元素节点

firstChildren 第一个子节点 不管是文本节点还是元素节点

lastChildren 最后一个

firstElementChild 第一个子元素节点 有兼容性问题

lastElenmentChild 最后一个 有兼容性问题

children[0] 第一个子元素节点

children[children.lenth - 1] 最后一个子元素节点

3.兄弟节点 nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null 所有节点包含元素节点和 文本节点

nextElementSibling 得到下一个兄弟元素节点 有兼容性问题

previousElementSibling 得到上一个 有兼容性问题

创建函数 元素节点 1

创建节点

document.createElement(' ')

添加节点

node.appendChild(child) node 父级 child 子级 后面追加元素

node.insertBefore(child,指定元素) 前面追加元素

删除节点

node.removeChild(child)

例如 删除ul中的第一个li 代码如下

获取ul 删除li ul.removeChild(ul.children[0])

阻止链接跳转（地址不变化） 添加javascript:void(0)或者javascript

复制节点

node.coloneNode()

注意：

1.复制完元素如果想要展示出来，需要添加元素

1. 如果括号里是false，即浅拷贝，只克隆节点本身，不克隆里面的子节点

2. 如果括号里是true，即深拷贝，会复制节点本身和里面的内容

三种动态创建元素的区别

document.write() 文档流执行完毕 再调用这句话 会导致页面重绘 原先的内容全部不在保留

element.innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

document.createElement() 创建多个元素效率稍微低一点点，但是结构清晰

DOM重点核心

创建

1.document.write

2.innerHTML

3.createElement

增

1.appendChild

2.insertBefore

删

1.removeChild

改

1.修改元素属性：src、href、title

2.修改普通元素内容：innerHTML、innerText

3.修改表单元素：value、type、disabled

4.修改元素样式：style、className

查

1.DOM提供的API方法：getELementByld、getElementsByTagName

2.H5提供的新方法：querySelector、querySelectorAll提倡

3.利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextELementSibling)提倡

属性操作

1.setAttribute:设置dom的属性值

2.getAttribute:得到dom的属性值

3.removeAttribute:移除属性

事件

注册事件

传统注册方式 onclick 注册事件的唯一性 只能执行后面的处理函数

方法监听注册方式 addEventListener() 同一个元素 同一个事件可以注册多个监听器 按注册顺序依次执行

事件监听方式

eventTarget.addEventListener(type,listener[,useCapture])

type 事件类型字符串 click 注意不要带om

listener 事件处理函数 事件发生时 会调用该监听函数

useCapture 可选参数 是一个布尔值 默认是false

删除事件

传统注册方式 eventTarget.onclick = null

方法监听注册方式 ev entTarget.removeEventListener(type,listener[,useCapturel])

DOM事件流

js代码中只能执行捕获或者冒泡其中的一个阶段

onclick和attachEvent(ie)只能得到冒泡阶段

捕获阶段 如果addEventListener 第三个参数是ture那么则处于捕获阶段 document-html-body-farher-son

冒泡阶段 如果addEventListenner 第三个参数是false或者省略 那么则处于冒泡阶段 son-father-body-html-document

事件对象

function(event){}

event就是一个事件对象 写到我们侦听函数的小括号里面 当形参来看

事件对象只有有了事件才会存在，它是系统给我们自动创建的 不需要我们传递参数

事件对象 我们事件的一系列相关数据的集合

兼容性问题

常见事件对象的属性和方法

e.target 返回的是触发事件的对象（元素） 区别 this那个元素绑定了这个事件返回那个元素 e.target点击那个元素返回那个元素 有兼容性

e.type 返回的是触发事件的类型（click、mouseover等）

e.preventDefault() 阻止默认行为（事件）有兼容性

return false 阻止默认行为 没有兼容性 return后面的代码不执行 只限于传统的注册方式

阻止冒泡的方法

e.stopPropagation() 兼容性

e.cancelBubble = true

事件委托

原理 不是每个子节点单独设置事件监听器 而是事件监听器设置在其父节点上 然后利用冒泡排序原理影响设置每个子节点

鼠标事件

鼠标右键菜单

contextmenu

鼠标开始选中

selectstart

鼠标移动

mousemove 只要鼠标移动一个像素，都会触发

鼠标事件对象

e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标

e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标

e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持

e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持

e.screenX 返回鼠标相当于电脑屏幕的X坐标

e.screenY 返回鼠标相当于电脑屏幕的Y坐标

键盘事件

onkeyup 某个键盘按键被松开时触发 不区分字母大小写

onkeydown 某个键盘按键被按下时触发 不区分字面大小写

onkeypress 某个键盘按键被按下时触发 但是它不识别功能键 如 ctrl shift 箭头等 区分字母大小写

执行顺序 先执行down 再执行press 再执行up

键盘事件对象

keyCode 返回按下键的ASCII码值

BOM

浏览器对象模型，提供独立于内容而与浏览器窗口进行交互的对象，其核心是window

窗口加载事件

window.onload = function(){}

或者

window.addEventListener('load',function(){}); 必须所有的内容加载完 包括图片啥的加载完才可以执行

或者

document.addEventListener('DOMContentLoaded', function(){}) 文档加载完就可以执行了

调整窗口大小事件

window.onresize = function(){}

window.addEventListener("resize",function(){})

window.innerWidth 得到当前的屏幕宽度

两种定时器

setTimeout() 定时器

window.srtTimeout(调用函数，[延迟的毫秒数])

延迟时间到了就去调用这个回调函数，只调用一次

1.window在调用的时候可以省略

2.这个调用函数可以直接写函数 还可以写函数名

3.页面中可能有很多的定时器，我们经常给定时器加标识符

停止setTimeout()定时器

window.clearTimeout(timeoutID)

setInterval()定时器

window.setInterval(回调函数，[间隔的毫秒数])

重复调用一个函数，每间隔这个时间，就去调用一次回调函数

1.window在调用的时候可以省略

2.这个调用函数可以直接写函数 还可以写函数名

3.页面中可能有很多的定时器，我们经常给定时器加标识符

停止setInterval()定时器

window.clearInterval(intervalID)

JS执行机制

同步异步

同步任务 同步任务都在主线上执行，形成一个执行栈。

异步任务 JS的异步是通过回调函数实现的

一般而言 异步任务有以下三种类型：

1.普通事件 如click,resize等

2.资源加载 如load,error等

3.定时器 包括setInterval setTimeout等

location对象

location

window对象下的一个属性，主要作用是获取或设置窗体的URL，并且用于解析URL

URL

资源地址，每一个网页有唯一一个URL

格式

ptotocol://host[:port]/path/[?query]#fragment

protocol 通信协议 常用的 http ftp maito等

host 主机(域名)

port 端口号 省略时为默认端口 http的默认端口为80

path 路径 由零或多个'/'符号隔开的字符串 一般用来表示主机上的一个目录或者文件地址

query 参数 以键值对的形式 通过&符号分隔开来

fragment 片段 #后面内容 常见于链接 锚点

属性

location.href 获取或者设置整个URL

locaton.host 返回主机（域名）

location.port 返回端口号 如果未写 返回空字符

location.pathname 返回路径

location.search 返回参数

location.hash 返回片段 #后面内容 常见于链接 锚点

location对象的方法

location.assign() 跟href一样，可以跳转页面(也称为重定向页面)

location.replace() 替换当前·1页面，因为不记录历史，所以不能后退页面

location.reload() 重新加载页面，相当于刷新按钮或者 f5 如果参数为true 强制刷新 ctrl+f5

history对象

back() 可以后退功能

forward() 前进功能

go(参数) 前进后退功能 如果参数是1 前进一个页面 如果参数是-1 后退一个页面