js总结

JS总结

js的组成
ECMAscript 基础语法
变量 数据类型 运算符 数组 函数 对象
BOM 浏览器对象模型
window对象（获取浏览器宽高）
history对象
location对象
DOM 文档对象模型 轮播图
元素获取 操作属性 操作样式 节点 事件 时间对象
js的作用

1. 数据验证
2. 动态创建和删除元素
3. 操作元素的内容和样式
4. 模拟动画
5. 创建cookie
6. ajax 请求数据
7. JSON格式的数据处理

特征：面向对象

1. 基于[对象]和[事件驱动]的松散型 解释型语言
2. 客户端脚本语言，实现用户交互

BOM： 浏览器对象模型

完成窗口与窗口之间的通信，window对象是其核心对象，

history【前进，后退，刷新】 是一个对象 使用【window.history】

location【地址】

DOM【】

screen【屏幕】

frames[真窗口]

navigation
window对象：
属性
1-1：获取浏览器宽高

a.ie8及以上
window.innerWidth [获取浏览器宽度]
window.innerHeight [获取浏览器高度]
b.ie8以下
document.documentElement.ClientWidth [宽度]
document.documentElement.ClientHeight 【高度】

1-2： 重新获取浏览器宽高

window.οnreset=function () {
NewW=window.innerWidth;
NewH=window.innerHeight;
}

1-3：重新设置浏览器大小

​ window.οnresize=function（）{

​ }
1-4：浏览器滚动事件

​ window.οnscrοll=function （）{

​ }
2.浏览器左上角距离屏幕左上角的偏移量

window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]

注意：

因为window是核心，可以省略window不写

方法
alert() 弹出框

prompt() 输入框

confirm() 提示框，返回true或flase

close() 关闭页面

open(“url”) 打开页面（“打开的页面的路径【根据本html位置的相对路径】”）

open(“url”,"",“width=300,height=200”);

setInterval（fn，毫秒数）：隔毫秒数重复不断的执行一个函数fn

方法1
let t =setInterval(fn,3000)
function fn(){
​
}
方法2
setInterval(function(){
​
},1000)

clearInterval（t）：清除setInterval的时间函数

let t =setInterval(fn,3000)
function fn(){

}
clearInterval（t）

setTimeout（fn，1000） 隔一定的时间只执行一次函数
cleanTimeout（t） 清除时间函数 【用法同上】
获取表单的值

对象.value=
​
清空=“”

history对象
属性：
history.length 用来显示历史记录的长度
方法

history.forward() 前进

history.back()后退

history.go(0) 刷新 【1 前进，-1后退；不常用】
location对象
属性：设计获取当前页面的地址

location.href=“ ” 设置或获取页面地址 设置新值

location.host：主机名+端口号

location.hostname：主机名

location.port：端口号

location.protocol：协议

location.pathname： 路径

location.search： ？后面的查询【搜索】字段

方法

location.reload( ) 重新加载

location.replace（“网页.html”） 页面替换，不会增加历史记录

location.assign（“网页.html”） 页面替换， 能够增加历史记录

DOM（文档对象模型）document object model
获取元素

获取body：document.body
获取html：document.documentElement

1.获取id名的元素：

let 变量=document.getElementById(“id名”)
例子： let box=document.getElementById(“id名”)

2.获取class名的元素[得到的是集合，可以通过键名访问]

let 对象=document.getElementsByClassName（“class名”）
通过遍历改变样式
集合通过单个下表改变，不能全部用class名同时改变

3.获取标签名的元素[得到的是集合，可以通过键名访问]

let 对象=document.getElementsByTagName（“标签名”）

4.给对象加类

标签加1个类名
对象.className=“类名”
div加多个类名
对象.className=“类名1 类名2 ”

5.指定范围的多层级获取【集合】

​ 多楼层获取 let box=document.getElementClassName("box"); let box1=box.getElementClassName("box1"); let box2=box1.getElementClassName("box2")

6.获取选择器选中的元素

let liss=document.querySelector("【选择器】"); 获取选择器选中的第一个元素
let lis=document.querySelectorAll("【选择器】"); 获取选择器选中的全部元素【集合】【下标或者foreach遍历】

7.属性选择器

let con = document.querySelector("[name=con]")

操作样式
获取样式
获取行内样式

对象.style.样式名

获取通用的样式【css和行内】

getComputedStyle(对象,null).样式名

设置行内样式

对象.style.样式名=“样式值”
对象.style=“background：red；border-radius：50%”

批量操作类名

对象.className=“class类名”
对象.className=“ ”；
对象.classList.add（“”） 添加类
对象.classList.remove（“”） 删除类
对象.classList.toggle（“”） 切换类
​
对象.id=“id名”
​
外部定义一个样式，加到对象身上，参考第四点

操作属性
操作标准属性

已知的，系统自带

对象.属性
例子 ： img.src

自定义属性
获取

对象.getAttrbutte(“name”)

设置

对象.setAttrbutte(“name”,“value”)

操作内容
innerText：不能识别html的标签对
innerHTML: 可以识别html的标签对

对象.innerText=“内容”
对象.innerHTML=“内容”

添加事件

对象.对象事件=function（）{

}
元素的尺寸和位置
对象.offsetWidth:获取元素的真实宽度
对象.offsetHeight:获取元素的真实高度
对象.offsetTop：对象的上边框距离具有定位的父元素的内边框的垂直距离
对象.offsetLeft：对象的左边框距离具有定位的父元素的内边框的水平距离
对象.scrollTop：有滚动条的元素，浏览器滚动时在垂直方向的拉动距离

body的兼容
document.body.scrollTop || document.documentElement.scrollTop

对象.scrollLeft：有滚动条的元素，浏览器在滚动时在水平方向的拉动距离
动态创建标签
let div=document.createElement（“标签名”）

创建的元素放到也面中：
document.body.appendChild（div）
父元素.appendChild（子元素）

BOM： 浏览器对象模型

完成窗口与窗口之间的通信，window对象是其核心对象，

history【前进，后退，刷新】 是一个对象 使用【window.history】
location【地址】
DOM【】
screen【屏幕】
frames[真窗口]
navigation
window对象：
属性
1-1：获取浏览器宽高

a.ie8及以上
window.innerWidth [获取浏览器宽度]
window.innerHeight [获取浏览器高度]
b.ie8以下
document.documentElement.ClientWidth [宽度]
document.documentElement.ClientHeight 【高度】

1-2： 重新获取浏览器宽高

window.οnreset=function () {
NewW=window.innerWidth;
NewH=window.innerHeight;
}

1-3：重新设置浏览器大小

window.οnresize=function（）{

}

1-4：浏览器滚动事件

window.οnscrοll=function （）{

}

2.浏览器左上角距离屏幕左上角的偏移量

window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]

注意：

因为window是核心，可以省略window不写

方法
alert() 弹出框

prompt() 输入框

confirm() 提示框，返回true或flase

close() 关闭页面

open(“url”) 打开页面（“打开的页面的路径【根据本html位置的相对路径】”）

open(“url”,"",“width=300,height=200”);

setInterval（fn，毫秒数）： 隔毫秒数重复不断的执行一个函数fn

方法1
let t =setInterval(fn,3000)
function fn(){
​
}
方法2
setInterval(function(){
​
},1000)

clearInterval（t）： 清除setInterval的时间函数

let t =setInterval(fn,3000)
function fn(){

}
clearInterval（t）

setTimeout（fn，1000） 隔一定的时间只执行一次函数
cleanTimeout（t） 清除时间函数 【用法同上】

获取表单的值

对象.value=
​
清空=“”

history对象
属性：
history.length 用来显示历史记录的长度
方法
history.forward() 前进
history.back()后退
history.go(0) 刷新 【1 前进，-1后退；不常用】
location对象

属性：设计获取当前页面的地址

location.href=“ ” 设置或获取页面地址 设置新值

location.host：主机名+端口号

location.hostname：主机名

location.port：端口号

location.protocol：协议

location.pathname： 路径

location.search： ？后面的查询【搜索】字段
方法

location.reload( ) 重新加载

location.replace（“网页.html”） 页面替换，不会增加历史记录

location.assign（“网页.html”） 页面替换， 能够增加历史记录

事件
事件的添加方式

节点.οnclick=function（e）{
​
}
只能添加一个

节点.addEventListener(“事件【click】”,事件处理程序，事件类型【布尔值】【可以不给】)
可以添加多个事件

将事件加在元素身上， 在js中定义事件的函数

事件的构成

事件源：谁去触发事件谁就是事件源
事件：鼠标事件/键盘事件
事件处理程序：
常用的web端事件
onclick：单击
ondblclick：双击
onmousedown：按下
onmouseup：抬起
onmousemove：鼠标移动
onmouseover：移入
onmouseout：移出
onmouseenter：移入
onmouseleave：移出
oncontextmenu：右击事件【默认事件】

对象.οncοntextmenu=function(e){
e.preventDefault() //阻止浏览器默认右击行为
}

onmousewheel 滚轮滚动事件
移动端事件
ontouchstart：按下
ontouchmove：移动
ontouchend：抬起
事件对象：

用来保存事件触发时的信息

w3c ： 在事件处理程序的形参中
ie ： 在window.event中
​
解决兼容性：let event=e || window.event

鼠标事件对象常用的属性：
clientX : 距离浏览器 X轴 的偏移量 【client设备】
clientY：距离浏览器 Y 轴 的偏移量

从 浏览器的 哪个位置进来

offsetX：距离事件源 X轴 的偏移量
offsetY：距离事件源 Y轴 的偏移量

从 事件源的 哪个位置进来

screenX：距离屏幕 X轴 的偏移量
screenY：距离屏幕 Y轴 的偏移量

从 屏幕的 哪个位置进来

键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
onkeypress键盘按下：按下功能键ctrl shift alt delete esc等不会触发
键盘事件对象常用的属性
keyCode：键盘码
ctrlKey：是否按下了ctrl
shiftKey：是否按下了shift
altKey：是否按下了alt
key：键名
表单事件
oninput：输入事件
onchange：内容发生改变，并且失去焦点
onblur：失去焦点
onfocus：获得焦点
onsubmit：提交表单
onselect：文本选中
窗口事件
onscroll：滚动事件
onload：加载
onresize：重新获取浏览器大小
事件流

当触发一个事件时，由这个事件的容器到整个文档都会按照特定的顺序依次进行触发

顺序：子元素 -》 父元素 【具体的到不具体的】

事件分类
捕获型事件：true【大到小，不具体的事件源到具体的事件源】
冒泡型事件：false【小到大，具体的事件源到不具体的事件源】

浏览器执行事件的顺序：doc的捕获 html的捕获 body的捕获 具体元素的捕获 具体元素的冒泡 body的冒 泡html的冒泡 doc的冒泡

阻止事件流

w3c浏览器
box.addeventListener（“click”，function（event）{
let event=event|| window.event
event.stopPropagation（）
},false）
ie浏览器
box.addeventListener（“click”，function（event）{
let event=event|| window.event
event.stopPropagation（）
event.returnValue=true；
},false）

事件委派

event.target：目标事件源【记录】获取到的是元素/属性：类型：节点；点谁获取到谁

ｅｖｅｎｔ．ｔａｒｇｅｔ．ｃｌａｓｓＮａｍｅ　　事件源的类名

正则
定义

用来描述或者匹配一系列符合某种规则的字符串，规则可以自己定义

作用

数据验证

内容检索

内容替换

内容过滤

正则对象
创建正则对象
实例化对象

let reg = new RegExp(“正则表达式[即规则]”，“模式修正符”)
必须传入字符串

自变量，字面量

let reg=/正则表达式/模式修正符 ； (//代表定界符)

正则对象常用的方法

test（str） 检测正则对象是否能够匹配str ， 返回值 true || false

exec( str ) 检测正则对象是否能够匹配str，如果能够匹配，返回一个拥有特殊属性的数组，如果不能匹配，返回null

let reg = new RegExp(“uek”,“gi”);
let bool=reg.test(“www.sxuek.com”); //bool=true
​

正则表达式
原子

原子：正则表达式最小的内容【只能匹配一位】

\d 匹配 0-9 ;

\D 匹配：除了0-9意外的字符

\w 匹配：数字、字母、下划线

\W 匹配：除了数字字母下划线以外的字符

\s 匹配：空白 \n换行 \r回车 \t 制表符

\S 匹配：除了空白以外的字符

\b 单词的边界

\B 非单词边界

let str=“abc1”
let reg=/\w/g;
reg.test(str)

原子表【只匹配一个】
定义： [ ]

匹配a-c
let str=“abcdef1”
let reg=/[a-c]/g;
reg.test(str)
匹配 [a-z] 匹配a-z
匹配 [a-zA-Z] 匹配a-z和A-Z
匹配 [a-zA-Z0-9] 匹配a-z和A-Z和0-9
匹配 [a-zA-Z\s] 匹配a-z和A-Z和空格

元字符

. 代表所有的字符
| 或者

原子组

相当于变量默认保存在内存中；可以使用\1 \2等方式依次引用（）中的内容

（？： ）可以使原子组不在内存中存储，不可以调用

let str1=“山西优逸客”
let str2=“陕西优逸客”
let reg=/(山西|陕西)优逸客/g；
reg.exec(str1)

let str=“

hello

”
let reg=/<(div)>hello</\1>/g
reg.exec(str);
​
let str=“

div

” //没有变量名
let reg=/<(div)>\1</\1>/g
reg.exec(str);
​
let str=“

山西优逸客-山西

”
let reg=/<(div)>(山西|陕西)优逸客-\2</\1>/g
​
let reg=/<(div)>(?:山西|陕西)优逸客-\2</\1>/g \2不会被引用

数量[手机号/身份证号]

• 0个或者多个 》=0 贪婪
  let phone=“18335219360”;
  let reg=/\d*/g
  reg.exec(phone)

• 1个或者多个 》=1

？ 0个或者一个 吝啬

{11}限制长度为11
{15，18} 长度为 15-18
{6，} 长度为6以及以上

贪婪吝啬 +？ 变成吝啬
*?
+?
{11，}？
{11,20}？

边界判断【限制长度】
^ 以…开始
$ 以…结束
​
let reg=/^(0351)-\d{7}$/

let str1=“hello word”
let reg=/o\b/
​

模式修正符

可以搭配使用 gi mi mg 先后顺序执行

g 全局 global

记录下标，下一个下标位置开始

i 不区分大小写
m 可以换行
正则的使用场所

正则对象

str对象 中的 str.split（正则对象） 拆分

let str=“山西有一棵：1,2.3”
str.split(/[: , .]/)

str对象 中的 str.replace（正则对象） 替换

let str=“山西有课山西有了”
str.replace（/（山西）/g，陕西）

str对象 中的 str.search（正则对象） 查找

let str=“山西有课山西有了”
str.search（/（山西|有一颗）/）

常用的正则

用户名 /¹{3,16}$/密码{/}^{[}a-z0-9_{-}]6,18$/
十六进制值 /^#?([a-f0-9]{6}|[a-f0-9]{3})KaTeX parse error: Got function '\.' with no arguments as subscript at position 22: … /^([a-z0-9_\̲.̲-]+)@([\da-z\.-…/
/²+(.[a-z\d]+)@(\da-z?)+(.{1,2}[a-z]+)+KaTeX parse error: Undefined control sequence: \/ at position 17: … URL /^(https?:\̲/̲\/)?([\da-z\.-]…/
IP 地址 /((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
/^(?😦?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)KaTeX parse error: Undefined control sequence: \/ at position 39: …^<]+)*(?:>(.*)<\̲/̲\1>|\s+\/>)/
删除代码\注释 (?<!http:|\S)//.$
Unicode编码中的汉字范围 /³+$/

日期对象/函数

自定义时间
let ay=new Date(“2018/8/8 12:00:00”)
​
let ay1=new Date(“12:00:00 2018/8/8”)
​
let ay2=new Date(“2018,0,8”) //月份从0开始
获取当前格林尼治时间
let now=new Date() //获取当前格林尼治时间
now.setFullYear(2020) 设置年份
now.setMonth(5) 6月份
now.setDate(26) 26号
now.setHours（12） 12时
now.setMinutes(0) 分
now.setSeconds（0） 秒
now.setMilliseconds（0） 毫秒
​
获取世界协调时间【用法同上】
now.setUTCFullYear()
now.setUTCMonth（）
now.setUTCDate（）
now.setUTCHours（12） 12时
now.setUTCMinutes(0) 分
now.setUTCSeconds（0） 秒
now.setUTCMilliseconds（0） 毫秒
​
​
//获取时间
now.getFullYear() //now.getUTCFullYear()
now.getMonth（）+1
now.getDate（）
now.getDay() 星期
now.getHours()
now.getMinutes()
now.getSeconds()
now.getMilliseconds（0）
​
//获取毫秒数
now.getTime() 1970.1.1.0的毫秒数

---

1. a-z0-9_- ↩︎

2. a-z\d ↩︎

3. \u2E80-\u9FFF ↩︎