css层叠样式表
javascript脚本语言
alert()警告消息框
confirm()确认消息框
prompt()可以输入的弹框

数据类型{
字符串string,
数字number,
布尔Boolean,
对象object,
空null,
未定义undefined
}

数据类型转换{
parseInt()将字符串转化为整型,
parseFloat()将字符串转化为浮点数,
string()在函数中可以将任何类型的值转换为字符串类型,
Boolean()将一个值转换成其对应的Boolean值
}

算数运算符{
+ 加法运算符
- 减法运算符
* 乘法运算符
/ 除法运算符
% 求余数(相当于除与几取其中的余数)
}

一元运算符{
++ 累加 ++在前先加1在运行 ++在后先运行在加1
-- 递减 --在前先减1在运行 –在后先运行在减1
}

关系运算符{
< 小于
> 大于
<= 小于等于
>= 大于等于
== 等于
===绝对等于
!= 不等于
!== 不绝对等于
}

逻辑运算符{
! 非(不)
&& 与(并且)
|| 或(或者)
}

赋值运算符(左边(运算符)右边的在赋值到左边){
*= 乘等于
/= 除等于
%= 模等于
+= 加等于
-= 减等于
<<= 左移位等于
>>= 右移位等于
>>>= 有符号右移位
}

位运算符{
~ 非运算符
& 与运算符
| 或运算符
^ 异或运算符 (相同为0不同为1)
<< 左移位运算符(换成2进制进行移位)
>> 右移位运算符
}

条件运算符{
条件?满足执行:不满足执行 三目运算符
}

条件语句{
If(条件语句){
条件成立执行语句
}//备注:if语句可以嵌套if语句

if(条件语句){
满足执行语句
}else if(条件语句){
满足执行语句
} else{
不满足上面的条件的情况下执行的语句
}

switch(一个可变的量)
{
case 条件://备注:如果变量等于条件
满足运行的代码
break;
case 条件://备注:如果等于条件
执行代码
break;
default:
不满足的执行代码
}

循环语句{//备注:循环体是可以嵌套使用的
While循环
var i=1;
while(i<=10)
{
document.write("hello world!<br/>");
i++;
}

do while循环(至少执行一次条件不成立也会执行一次在结束)
var i=1;
do{
document.write("hello world!<br/>");
i++;
}while(i<=10);

For循环
for(var i=0;i<10;i++){
document.write("hello world!<br/>");
}
}

Break语句会立即退出循环，强制继续执行循环后面的语句，结束本层循环。

continue语句仅用于循环语句。虽然也是立即退出循环，但退出循环后会从循环的顶部继续执行，结束本次循环进行下一次。

删除对象的属性(delete)
var obj={a:3,b:4}
delete obj.a;
也可以根据键值删除对象下的属性。

对象的便利(for(var a in 对象名))
var obj={a:1,b:3};
for(var str in obj){
console.log(obj[str]);
}

函数的声明
函数关键字 + 函数名 + (){
语句函数体_
}

function Fn(){
}

函数表达式Var fn = function(){
}

函数的调用
函数名字();

函数的参数
Fubction fn(形参){
}
Fn(实参)

return return语句会终止函数的执行并返回函数的值

匿名函数的声明 {
var box=function(num1,num2){
retrun num1+num2;
}//:备注 利用return 返回

var obj={
name:”zhangsan”,
fire:function(num1,num2){
var s=num1+num2;
return s;
}
}//备注:利用属性属性值 return把值返回到属性值上面
}

构造函数
var box=new Function('num1','num2'
,'retun num1+num2');//num1,num2参数，
最后的字符串是函数体

函数的自调用
var s=0;
(functiion(){
s=4+5
})();

清空函数
函数名=null
对象下的函数删除是delete 对象名下面的函数函数

`数组{
Length(0) 长度为0就是清空数组
Concat() 连接两个数组并返回结果
Join() 元素通过指定的分隔符进行分割
pop() 删除并返回数组的最后一个元素
push() 像元素的末尾添加元素并返回新的长度
reverse() 颠倒元素中的顺序
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回固定的元素(复制数组)
splice() 删除元素并向数组添加新的元素
unshift() 向数组的开头添加一个或多个元素并返回新的长度
sort() 对数组的元素进行排序
}

数组乱序arr.sort(function){
return Math.random()-0.5
}
数组排序arr.sort(function(a,b){
return a-b||b-a//备注:a-b正序b-a倒叙
})
对象排序arr.sort(function(a,b){
return a(对象名)-b(对象名)
})

some()对数组元素进行判断遇真返回
every()遇假返回
forEach(匿名函数) //备注:遍历 相当于for 没有返回值
arr.forEach(function(item,index,array){
item 表示数组中的数据
index 表示下标
array 表示遍历的数组
})
map() //备注:映射 遍历数组---修改数组---返回数组
arr.map(function(item,index,array){

})

math的方法{
abs()返回数字的绝对值
floor()向下取整
max()取最大值
min()取最小值
random() 随机数
ceil()向上取整
round()四舍五入
sqrt(x)返回数的平方根
pow(x,y) 返回 x 的 y 次幂。
}

字符串的方法{
charCodeAt()返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
}

NaN 非数字值。

var date=new Date()获取时间对象
时间的获取方法{
Date() 返回当日的日期和时间。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
}
时间的设置方法{
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
}
//--------------------------------------------------------------------------------------------
50、数学对象
(1) 概念：数学对象不需要定义，他们的方法都是静态方法！（是唯一一个不需要定义的对象，可以直接用） String.fromCharCode
① Math.min()
② math.max()
③ Math.min.apply( null,数组 )
④ Math.max.apply( null,数组 )
⑤ Math.abs( num ) 获取num的绝对值，num代表一个数组
⑥ Math.pow( m,n ) 获取m的n次方
⑦ Math.sqrt( m ) 计算m的平方根
(2) 取整的方法
① Math.ceil( ) 向上取整
② Math.floor( ) 向下取整，相当于parseInt( )；
③ Math.round( ) 四舍五入
(3) 获取随机数
① Math.random( ) 获取【0，1）之间的随机小数 0<=num<1
(4) 重点：如何获取任意区间的整数值
function rand( min , max ){
return Math.round( Math.random( ) * ( max - min ) + min );
}
51、日期时间对象 Date
(1) 日期定义：
var d = new Date();//显示当前的系统时间

方法：
toLocaleString() 转成日期字符串格式显示，显示年月日时分秒
toLocaleDateString() 显示日期

getFullYear() 获取年份
getMonth() 获取月份 范围：0--11 使用时需要+1
getDate() 获取日期
getDay() 获取星期 范围：0--6 0：表示星期日
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒
getTime() 获取毫秒值，从1970年1月1日午夜，到现在时间的毫秒值
52、自定义时间
var str = “1997-01-10”;
方案一：
var d = new Date( str );
方案二：
var d = new Date( Date.parse( str ) );
Date.parse( str ) 静态方法，获取1970年1月1日午夜到当前字符串中所显示的时间的毫秒值
53、时间差
getTime()
当前系统时间：var now = new Date();
定义你的生日：var birth = new Date( “1997-01-10” ); 时间默认为早上08：00：00
时间差：
Math.abs( now.getTime() - birth.getTime() );

自定义时间 了解：
new Date ( 2018,12,8 ); getFullYear()结果是 2019 getMonth()结果是 0
54、设置时间（cookie生存期的问题）
setFullYear()
setMonth()
setDate()
setTime()

设置几天后的日期 设置日期
d.setDate( d.getDate() + 2 );
d.setTime( d.getTime() + 2 * 1000 * 3600 *24 );
//----------------------------------------------------------------------------------------------
nodeName"节点名称"{
元素节点的节点名称是标签名称
文本节点的节点名称永远是文本#text
注释节点的 nodeName 永远是 #comment
}
nodeValue（节点值）{
文本节点，nodeValue 属性包含文本。
元素节点nodeValue不可用
注释节点nodeValue包括注释内容
}
nodeType（节点类型）{
元素 1
属性 2
文本 3
注释 8
文档 9
}

定时器

var timer = setInterval() 有两个参数 --- 连续执行 timer 表示定时器名称

第一个参数：要执行的任务 --- 函数
第二个参数：任务间隔时间 （毫秒）

用法一：
setInterval(function(){ .... },1000)

用法二、
setInterval( fun , 1000 );
定时器任务：
function fun(){
}

clearInterval( 定时器名称 ) ---- 停止连续执行的定时器

var timer = setTimeout(); 参数和 用法 同setInterval() --- 只执行一次 （一般用于延时）
clearTimeout() --- 停止定时器

定时器特点：需要等待页面中所有程序都执行完毕后才执行定时器的内容

toLocaleString() 将日期时间对象转成 本地时间格式 ，字符串形式

BOM --- browser object model 浏览器对象模型

浏览器对象模型

document....navigator 叫做window对象的属性 或 window对象的内置对象
window.document.getElementById()

26、window对象：窗口对象
说明：
1、 window对象的属性和方法调用时可以省略 window.
2、所有的window对象的属性和方法都属于全局的属性和全局方法
3、全局变量和全局的方法（自定义函数）都属于window对象

27、window对象的属性 和 方法：

三个对话框：
alert() 弹出一个对话框
confirm() 弹出一个带有确定和取消按钮的对话框，点击确定返回true，点击取消返回false
prompt() 输入框对话框 点击确定返回输入的内容，点击取消返回null
这三个对话框都有阻塞浏览器其它功能的执行
两个定时器：
setInterval() clearInterval()
setTimeout() clearTimeout()

一个弹出窗口 open()

28、location 地址对象

页面跳转：
location.href = "url" 设置路径 获取路径 ： location.href
location = "url"
location.replace("url") 跳转后页面不可以实现后退效果 将当前页面内容覆盖了

29、history 历史对象

前进 ：　history.go(1) / history.forward()
后退 ：　history.go(-1) / history.back()
刷新 ： history.go(0)

30、document 文档对象

要做事，先找人（页面元素）
write() 浏览器打印信息
----------------------
查找元素的方法：
getElementById() 通过给定的id查找元素 结果是唯一

getElementsByTagName() 根据给定的标签名查找元素 得到是一个集合 （伪数组） 即便找到一个元素，也要加一个下标 0

getElementsByName() 根据给定的name值找元素 （用于表单）

getElementsByClassName() 根据给定的类名 查找元素 （ie6不可用）

querySelector(); 根据给定的选择器查找元素 结果唯一 参数是一个选择器
querySelectorAll() ; 得到是一个集合 （伪数组） 即便找到一个元素，也要加一个下标 0 参数是一个选择器

document.body
document.title
document.head
document.documentElement (指的是html元素)

31、操作元素

操作元素属性（标签上的属性）
获取元素的属性 （读）
元素.属性名
设置元素的属性 （写）
元素.属性名 = 值
操作元素样式（style内的样式）
获取元素样式：
元素.style.样式名
设置元素样式：
元素.style.样式名 = 值
元素.style.cssText = "值"
元素.className = "class名"
操作元素内容
普通标签 ：
获取元素的内容：
元素.innerHTML 得到元素内部所有内容（包括内部标签）
元素.innerText (火狐不兼容 元素.textContent) 得到纯文本数据
元素.outerHTML 得到元素内部及其该元素本身的所有内容
设置元素内容:
元素.innerHTML = 值 识别网页标记
元素.innerText = 值 (火狐不兼容 元素.textContent) 将值中的标签作为纯文本显示
元素.outerHTML = 值 改变元素本身
表单标签:
获取 : 元素.value
设置 : 元素.value = "值"

节点种类

html元素是dom的根节点
所有的html元素 都叫做 元素节点
所有的HTML元素的内容 文本节点
所有的html元素的属性 属性节点一切都是节点

节点关系

父节点：parentNode
下一个兄弟节点： nextElementSibling （高版本浏览器） nextSibling（低版本浏览器）
前一个兄弟节点： previousElementSibling
第一个孩子节点: firstElementChild
最后一个孩子节点： lastElementChild

所有孩子 ： childNodes
children

访问节点 ： getElmentBy....

35、children 和 childNodes区别（扩展）

children 得到所有的元素节点
childNodes 会得到元素节点和文本节点的集合 （会将页面中的回车作为文本节点）

通过 nodeType 值确定节点的类型：
值为 1 元素节点
值为 2 属性节点
值为 3 文本节点

nodeName 或 tagName 得到标签的名称

36、offset家族属性

offsetWidth/offsetHeight
用法：　　某元素.offsetWidth 获取结果 ： 内容宽度 + padding + border

clientWidth / clientHeight
用法： 某元素.clientWidth 获取结果 ：内容宽度　+ padding

offsetWidth 和 obj.style.width 区别：
1、前者 获取结果类型number 后者结果类型string ，使用时一定要 parseInt
2、前者 可以获取任意样式值 后者只能获取行内样式值
3、前者 只能读数据 ，不能写数据 ， 后者 可读写
obj.offsetWidth = 1000 错误

offsetLeft : 获取某元素中离他最近的具有定位的父级元素的左偏移 ， 如果父级中没有定位的元素，默认相对于body的左偏移
offsetTop ： 同上 上偏移

37、scroll 家族

scrollLeft 获取滚动条水平方向滚走的距离
scrollTop （最火） 获取滚动条 垂直 方向滚走的距离

滚动条事件 获取页面向上滚走的距离
window.onscroll = function(){
兼容火狐和谷歌浏览器的写法：
获取页面滚走的距离：
var sTop = document.body.scrollTop || document.documentElement.scrollTop;
}

设置页面滚走距离 ：
document.body.scrollTop = document.documentElement.scrollTop = 值

1、event对象---事件对象

事件对象：当触发 onclick, onkeyup ,.........这些事件时，会产生一个事件对象event。
不同事件产生的事件对象对应的属性不同
谷歌浏览器 ： window.event 事件参数 evt
火狐 或 ie ： window.event

事件对象兼容：
evt || window.event 先兼容高版本浏览器 evt为事件参数

2、鼠标事件对象的坐标属性

clientX / clientY 距离 window窗口的 横坐标 和 纵坐标
pageX / pageY 距离文档 窗口的 横坐标和 纵坐标 ，没有竖向滚动条时，pageY = clientY ，出现了竖向滚动条，pageY = clientY + scrollTop
offsetX / offsetY 距离目标对象的 内部偏移（左偏移 和 上偏移）
screenX / screenY 距离 屏幕 窗口的 横坐标和 纵坐标

3、button属性(扩展)

判断点击的是 左键 滚轮 右键？
高版本浏览器 ： 左键--0 滚轮 -- 1 右键---2
低版本浏览器 :(IE678) 左键 -- 1 滚轮 -- 4 右键---2

4、鼠标右键菜单 阻止

兼容写法：
e.preventDefault ? e.preventDefault() : e.returnValue = false;

5、键盘事件对象的属性 keyCode

键盘事件：onkeydown onkeyup onkeypress
keyCode属性： 获取键盘的按键值
回车键的keyCode：13

6、事件流

当事件发生时，从子元素向父元素触发 或 从父元素向子元素触发的过程，叫做事件流。
事件流有两种模式：
事件冒泡 ： 从子元素向父元素触发 small --- big --- body --- document --- window
事件捕获 ： 从父元素向子元素触发 window --- document --- body --- big --- small

7、事件冒泡

当事件发生时，同样的事件会再父元素上触发，这个过程就成为事件冒泡
并不是所有的事件都会产生冒泡问题 ： 比如 onload onfocus onblur

阻止事件冒泡兼容：
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

8、事件绑定方法

1、 <input onclick = "fun()">
2、 document.getElementById().onclick = function(){

}
3、 obj.addEventListener("事件",事件处理程序) 注意：这里的事件不加 on

9、事件监听

通过 addEventListener 方式为元素绑定事件成为事件监听
好处： 可以为相同元素 添加 多个同样事件 （执行顺序：从上到下执行）

addEventListener和onclick等事件绑定的区别 : 可以为同样元素绑定多个同样的事件

10、事件捕获

通过事件监听方法 实现事件捕获
addEventListener（事件,事件处理程序,true） 第三个参数 默认是false---冒泡

11、事件委托

委托： 让别人去做
事件委托： 将事件添加到 某些元素的父级元素上，委托这个父级元素来执行这个事件
委托的好处 ：提高程序的性能　　　
　为动态创建的元素添加事件时，不需要考虑代码书写位置 ，可以写在动态创建的函数体外部 　
　　　　　　　
委托实现方式：
obj.onclick = function(){...}
obj.addEventlistener("click",function(){})

委托实现的原理：
利用事件冒泡（捕获也可以）机制，将事件添加到父级元素上 （这里的父级一般是离它最近的直接父级元素）

获取目标元素 ：e.target || e.srcElement

12、json对象

什么是json？ javascript object notation
中文含义： javascript 对象表示法
json作用：　　存储数据　　
json定义： json对象是一种轻量级的数据交换格式。

json格式定义：
var json = { "":"" }
严格的json模式 键一定要用 双引号
json格式由 键值对 组成的 ， 每一个键对应的值 可以是任意类型 多个键值对之间用逗号间隔
一个json对象中可以有多个键值对

例如：
var json = { "name":"jack", "age" :　20 } 定义时直接赋值

var json = {}; 先定义后赋值
json.name = "jack";
json.age = 20

json数据的读取：
json对象.键
json对象["键"]

json对象的遍历： 必须用 for... in

13、拖拽

拖拽思路：
1、拖拽的前提是 鼠标按下左键 这里需要 onmousedown
鼠标 按下时 ，记录 鼠标相对于目标元素的 内部偏移量 offsetX 和 offsetY
var disx = e.offsetX;
var disy = e.offsetY
2、要想让盒子在鼠标按下时 跟随鼠标移动 需要 给文档添加一个 onmousemove事件（在鼠标按下时添加）
obj.onmousedown = function(){
....
document.onmousemove = funct(){ ... }
}
3、停止拖拽，需要鼠标抬起事件 抬起时 需要停止拖拽 ，取消移动事件 document.onmousemove = null
obj.onmouseup = function(){
document.onmousemove = null
}

获取窗口的宽度和高度：
window.innerWidth / window.innerHeight (窗口的内部宽度)
window.outerWidth / window.outerHeight ( 包括浏览器的工具栏的高度 )

14、正则表达式对象

qq：必须是数字
手机号必须是数字 13..
邮箱 ： 24333@qq.com
正则作用 ： 校验 （前端往往会有大量的工作需要校验，通过正则可以大大的提高工作效率）
15、正则表达式的定义

var reg = / /修饰符;
修饰符 ：
i ：　　 不区分大小写
g ：　　全局查找

16、特殊字符

test（） 方法
用法： reg.test(str) 通过该方法校验str是否符合reg的规范，如果符合，就返回true，否则返回false

特殊字符
d : 表示 0--9 之间的任意一个数字
D : 表示 非数字
^ : 表示正则表达式开始
$ : 表示正则表达式的结束
{n}:n是正整数 表示其前面紧挨着的字符只能出现n次
{m,n} : m<n m n 都是正整数 表示其前面紧挨着的字符至少出现m次 至多出现n次
{m,} 表示其前面紧挨着的字符至少出现m次

w ： 表示 一个单词字符 （字母或数字或 _ 中的任意一个字符）
W : 表示非 字母、数字、下划线中的任意一个字符

[ ] : 表示括号中的任意一个字符
[a-z] : 表示a-z中的任意一个字符
[0-9] 等价 d

[^a-z] : 非a-z中的任意一个字符

s : 表示空白字符 （空格、tab）
S: 表示非空白字符

* ： 表示 {0,} 表示其前面紧挨着的字符至少出现0次，至多无数
+ : 表示 {1,} 表示其前面紧挨着的字符至少出现1次，至多无数
? : 表示 {0，1} 表示其前面紧挨着的字符至少出现0次，至多1次
| : 表示或者 一般和() 连用
. : 表示任意一个字符
: 转义字符 一般用来对正则中的 特殊单个字符进行转意 \ ---- .-----.

[u4e00-u9fa5]: 表示任意一个中文字符

17、严格模式
在程序或函数的开头处 加一个 “use strict”
严格模式下的要求 ：
1、变量必须用var定义
2、八进制被禁用
3、arguments与形参不同
4、函数必须声明在程序的最顶端

18、let 关键字 let 块级作用域
let 声明变量
let 不允许重复声明变量
let 必须在某个{ } 内部使用
let 在函数体的内部 不能实现 变量提升
暂时性死区 ： 通过let方式声明的变量 变量声明之前该变量不可用 这种现象就称作 暂时性死区
在函数体内部 不能通过let方式声明和形参相同的变量
let 应用 ： 获取下标（选项卡）

19、this 指向改变（下面的几个方法在es5中就已经出现过）
this含义--当前对象 ： 指事件的调用者 或 方法的调用者
改变匿名函数的this指向 ： bind(this指向的对象)
apply() 或 call() 改变非匿名函数的this指向 函数名.apply( 函数体内部this指向对象 )

20、for...of
for...of 和 for ... in 区别 ：
前者遍历值
后者遍历键

21、const 关键字

定义常量的关键字
一般为了和变量区分 常量定义用大写字母
常量一旦被定义，就不能重复更改常量值
const PI = 3
PI = 3.14 报错

22、字符串模板 （解决字符串拼接）
解析字符串中的变量 使用 ${ }
` ` 字符串模板
字符串模板中 既可以识别变量 又可以识别函数

23、 箭头函数 用来改变匿名函数的写法

定义 ： () => { }
带有参数 ： (参数) => { 函数体 }
带有返回值 ： ()=>{ return 返回值 }

24、 解构赋值 ： 解析结构进行赋值

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/wangwenjie98/p/11599216.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。