HTML
HTML概述
系统架构
B/S架构
Browser/Server 浏览标记: 优先级 2
C/S架构
Client/Server 客户端/服务器
W3C（world wide web）
世界万维网联盟（制定了HTML的规范）
HTML是超文本标记语言（标记：标签 使用大量标签；超文本：流媒体、图片、声音等）
HTML基础
基本标签
1、<!doctype html> html5语法（解释文档类型）
（！加tab 可自动生成）
html不区分大小写
meta charset=“utf-8”浏览器采用xxx字符集打开
2、换行 <br >
3、水平线<hr>
4、font标签 字体标签
6、实体符号（以&开始 以；结束）
< < 小于号 > >大于号
 空格
表格（table）
<table border='1px' width='100px' height='100px'>//可以设置样式
<thead>//表头
<tr>//行
<th>//单元格 列
<input type="checkbox" id="all">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="one">//表格内容
<tr>//行
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
</tbody>
</table> 1、单元格合并
行合并 rowspan=“” 删下不删上（同一行）
列合并 colspan=“”（不同行）
2、th标签(标题单元格 居中加粗)
thead、tbody、tfoot(非必须 便于js的编写)
背景
background：url（路径）
图片 img src=“”
超链接
标记: 优先级 1
<a href=“路径/本地地址”talent=""></a>
href hot reference 热引用
talent:_blank新窗口
_self
_top
_parent
作用：
1、通过超链接从浏览器向服务器发送请求
B---请求（request）-----S
S---响应（response）-----B
超链接提交的数据是固定的
列表
标记: 优先级 2
表单（form）
标记: 优先级 1
概述
1、作用：收集用户信息。提交数据给服务器
2、<form action="请求路径"></from>
3、action 作用：指定提交数据给哪个服务器（请求路径中的端口对应的服务器）
格式： action？name=value&name=value&name=value
标记: 优先级 1
有name才能提交
标记: 优先级 1
method 属性（超链接 默认get）
get：信息会显示在浏览器地址栏上
post：不会---
input 输入框
标记: 优先级 1
下拉列表
标记: 优先级 1
select（选择）
option value=”“
multiple=”multiple“ size=”下拉列表显示个数“
子主题 3
input type=”submit/button“ name=”“
submit 提交表单数据
button 普通按钮
reset 重置清空
radio 单选按钮
file 选择文件
text 文本
password 密码
checkbox 复选框
标记: 优先级 1
单选按钮必须要有value
标记: 优先级 1
hidden 在网页上不显示 但还是会提交
标记: 优先级 1
value控件
readonly和disabled
都不能修改 但disabled不提交数据
控件maxlength和minlength
设置文本框数字
文本域 textarea
没有value
表单验证
标记: 优先级 1
h5新增类型：
标记: 优先级 1
设置表单元素必填 required
如何使用正则 pattern
提交表单时不验证 novalidate/formnavalidate
子主题 2
元素的id属性
标记: 优先级 1
在html文档当中。任何元素（节点）都有id属性，id属性是该节点的唯一属性，不能重复
标记: 优先级 1
作用：便于获取元素、节点
javascript通过id获取节点对象来进行增删改查
HTML文档是一棵树，叫DOM树（document）。
树上有节点，每个节点都有唯一的id。
标记: 优先级 1
div和span
标记: 优先级 1
概述
可以称为图层/盒子，方便布局
div独占一行 块级元素
span不会
盒子套盒子
可以通过x坐标和y坐标进行定位
标记: 优先级 1
CSS
CSS概述
层叠样式表
三大特性
层叠性
标记: 优先级 2
继承性
可以继承的样式
文本 字体 段落 颜色
标记: 优先级 1
text-
font-
line-
color
优先级
标记: 优先级 1
权重
继承/* 0
元素选择器 1
类选择器/伪类选择器 10
id选择器 100
行内样式 style=“”1000
！important 无穷大
a链接 不参与继承
权重会叠加 但不会进位
是一种标记语言 美化html 实现结构和样式分离
标记: 优先级 1
CSS基础
标记: 优先级 1
元素显示模式
标记: 优先级 1
块元素
div h p ul ol li dl dt dd table tr form 等元素
标记: 优先级 1
独占一行
标记: 优先级 2
可以设置宽高 内外边距
标记: 优先级 1
宽度默认是父级元素的100%
标记: 优先级 1
当块级元素的宽度超过父元素宽度时 不会自动换行
标记: 优先级 1
行内元素
a span em strong
标记: 优先级 1
默认宽度是本身内容宽度
标记: 优先级 1
一行可以有多个元素
标记: 优先级 2
行内元素只能放文本或者其他行内元素（a除外）
标记: 优先级 1
行内块元素
img input th td
标记: 优先级 2
可以实现块级元素在同一行 但中间会有缝隙
标记: 优先级 1
默认宽度为本身内容宽度
标记: 优先级 2
宽高 行高 内外边距可以设置
标记: 优先级 2
转换模式 display
标记: 优先级 1
block
inline
inline-block
标记: 优先级 2
css语法规范
标记: 优先级 1
选择器
标记: 优先级 1
作用：选择标签
分类
基础选择器
标记: 优先级 1
标签选择器 例如：div span等
标记: 优先级 1
类选择器 例如：.box等
标记: 优先级 1
id选择器 例如：#box
标记: 优先级 2
只能出现一个 不能同名
搭配js使用
通配符选择器 *
标记: 优先级 2
复合选择器
标记: 优先级 1
由两个或三个基础选择器组合
分类
后代选择器 ul li
标记: 优先级 1
子选择器 div>p 选择元素1最近一级子元素
标记: 优先级 2
并集选择器 div, span, p
标记: 优先级 1
伪类选择器
链接伪类
标记: 优先级 1
声明顺序：LVHA
：link
：visited
：hover //鼠标经过
：active //点击
标记: 优先级 2
结构伪类
：focus 用于获得焦点的表单元素（input）
标记: 优先级 1
一条或多条声明
css文本属性
标记: 优先级 2
color
常见颜色英文
rgb代码
常用十六进制 #000000//黑色
标记: 优先级 1
常用颜色
#000黑
#FFF白
#808080灰色
#FF0000红色
#008绿色
#0000FF蓝色
#FFFF00黄色
#00FFFF青色
标记: 优先级 2
text-align 文本对齐
只作用于块级元素 可继承 让块级元素内行内元素实现居中（不一定是文字）
标记: 优先级 1
text-decoration 文本装饰
none
underline
overline//上划线
line-through//删除线
text-indent 首行缩进
line-height 行高
css背景
标记: 优先级 1
background-color
background-image：url（）
background-repeat
background-position：x，y
background：颜色 图片 平铺 滚动 位置（可省略）
rgba（0， 0， 0， 0.x）透明度
标记: 优先级 1
background-attachment：srcoll/fixed
css边框、阴影
标记: 优先级 1
border-radius：左上角 右上角 右下角 左下角 圆角边框
盒子阴影 box-shadow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 默认为外部阴影（outset）inset 为内部阴影
文字阴影 text-shadow：水平阴影 垂直阴影 模糊距离 阴影颜色
css布局
标记: 优先级 1
1、核心：用CSS来摆放盒子位置
2、布局流程
标记: 优先级 2
确定版心（可视区）
标记: 优先级 1
网页的主体内容
清除内外边距
标记: 优先级 2
分析页面的行列模块
标记: 优先级 2
制作结构
css初始化
标记: 优先级 1
相同样式 并集选择器
3、元素的隐藏和显示
标记: 优先级 1
display：none 隐藏元素
标记: 优先级 1
不保留位置（脱标）
visibility：hidde/visible
标记: 优先级 1
保留位置
block 显示元素/块级元素
css字体
标记: 优先级 2
font-family
font-size
font-weight
font-style：normal/italic斜体
CSS的定位机制
标记: 优先级 1
普通流（标准流/文档流)
标记: 优先级 2
总结重点：竖向上布局找标准流 横向上布局找浮动 空间上布局找定位
标记: 优先级 1
浮动
标记: 优先级 1
1、会脱离标准流，不占位置，会影响标准流（漂在标准的上面）
标记: 优先级 1
2、设置为行内块元素可实现块级元素在同一行，但是盒子之间会有间隙
标记: 优先级 1
特性：浮 漏 特
标记: 优先级 1
首页创建包含块的概念。
就是说，浮动的元素总是和最近的父元素对齐，但不会超过内边距（padding和border）的范围
标记: 优先级 1
浮动的位置和上一个元素有关。
上一个元素有浮动，则浮动为顶部对齐
上一个元素为标准流，则对上一个元素的底部对齐
标记: 优先级 1
如果要实现一行对齐，则盒子内的所以元素都要设置浮动
标记: 优先级 2
块级元素和行内元素添加浮动之后，具有行内块的特性
标记: 优先级 1
行内块特性：
一行可以放多个
有宽度和高度
盒子大小由内容决定
标记: 优先级 1
父级元素不方便给高度的情况
标记: 优先级 1
清楚浮动的影响
浮动元素不占有位置，父亲没有高度，因此，下一个元素会浮上来，所以要清楚浮动带来的影响
标记: 优先级 1
方法
额外标签法
标记: 优先级 1
在浮动盒子后面添加一个空盒子 .clear
父级添加overflow
标记: 优先级 1
overflow：hidden/auto
会触发bfc
atfer伪元素清除浮动
标记: 优先级 1
.xx：after{
content:
dispaly:block
height:0
visibility:hidden
clear:both
}
.xxx {
*zoom:1;* ie6 7才能执行
//为了兼容性
}
双伪元素清除浮动
标记: 优先级 1
.xx：after .xx:before{
content:
dispaly:table
}
.xx:after {
clear:both
}
.xx{
*zoom:1;
}
作用
让块级元素在一行显示
标记: 优先级 1
定位
标记: 优先级 1
css position属性
static 自动 标准流 无影响 left等偏移属性不影响
用来清除定位
flxed 固定
绝对定位和固定定位也和浮动类似
标记: 优先级 1
1、行内元素添加绝对或者固定定位（脱标） 可以直接设置高度和宽度
2、块级元素添加绝对或者固定定位 如果不给宽度 默认大小时内容的大小
脱标的盒子不会触发外边距塌陷（绝对定位 固定定位）
标记: 优先级 1
绝对定位（固定定位）会完全压住盒子
标记: 优先级 1
relative 相对
标记: 优先级 1
相对于自己的定位来移动位置
保留原位置 继续占有 不脱离标准流
标记: 优先级 1
absolute 绝对
标记: 优先级 1
以父亲为标准，如果父亲没有定位，则以文档（浏览器）为标准
标记: 优先级 1
完全脱离标准流 不占有位置
标记: 优先级 1
margin auto 居中无效
标记: 优先级 2
会转换为行内块元素
子绝父相
标记: 优先级 1
只要 子级是绝对定位，父级是绝对或者相对都可以
标记: 优先级 1
子绝父相
子绝父绝
绝对定位的盒子水平垂直居中
标记: 优先级 1
水平居中
先left 50%
再margin left 减一半
垂直居中
先top 50%
再margin top 减一半
可以先设置top和bottom为0
fixed 固定定位
标记: 优先级 1
脱离标准流 不占位置 不随着滚动条滚动
标记: 优先级 1
会转换为行内块元素
一定要写宽和高 除非有内容撑开
以浏览器的可视窗口为参照移动
标记: 优先级 1
叠放次序z-index
标记: 优先级 2
作用：调整重叠定位元素的堆叠顺序
取值：正负0 默认值为0
z-index：2
只有加了定位属性才有该属性
sticky 粘性定位
可以认为是相对定位和固定定位的混合
以浏览器的可视窗口为参照移动
标记: 优先级 1
会占有原先的位置
标记: 优先级 1
盒子模型
标记: 优先级 1
边框 border
标记: 优先级 1
border：width style color
border-style
标记: 优先级 1
none
solid 单实线
标记: 优先级 2
dashed 虚线
dotted 点线
border-collcapse
：collcapse//合并边框
标记: 优先级 1
控制相邻单元格的边框
盒子实际大小=内容区大小 +内边距大小+边框大小+外边距大小
标记: 优先级 2
外边距 margin
标记: 优先级 1
让块级元素水平居中
标记: 优先级 1
有宽度
标记: 优先级 2
margin：0 auto
行内元素和行内块元素水平居中
标记: 优先级 2
给父元素添加：text-align：center
标记: 优先级 1
外边距合并
标记: 优先级 1
注：内边距没有合并一说
浮动的盒子不会发生外边距合并
标记: 优先级 2
相邻块元素垂直外边距的合并
标记: 优先级 1
大的外边距覆盖小的
标记: 优先级 1
嵌套块元素垂直外边距的塌陷
标记: 优先级 1
外边距的效果显示在父元素之上
标记: 优先级 1
浮动、固定和绝对定位的盒子不会有塌陷问题
标记: 优先级 2
内边距 padding:上 右 下 左
标记: 优先级 1
会撑大盒子大小
可结合精灵图用于制作可根据大小变化的导航栏
标记: 优先级 1
内容
高级技巧
标记: 优先级 1
鼠标样式
cursor
default 默认
pointed 小手
move 移动
text 文本
轮廓 outline
去除轮廓线
outline：0/none；
标记: 优先级 1
防止文本拖拽
textarea resize：none；
精灵图（sprites）
标记: 优先级 1
作用：为了减少服务器接受和发送请求的次数 提高页面的加载速度
核心：将网页中一些小背景整合到一张大图中
标记: 优先级 1
使用：移动背景图片位置以控制显示区域 background-position
移动的距离就是这个目标图片的x和y坐标
一般都是往上往左移动 所以一般坐标都是负数（右边走时正值 左边走时负值）
标记: 优先级 1
滑动门
标记: 优先级 1
核心技术：
精灵图和padding撑开盒子
一般用来制作导航栏
div》ul》li》a》span》
设置a和span为行内块元素，只设置高度不设置宽度
标记: 优先级 1
a设置背景左侧 padding
span设置右侧 padding撑开
剩下的由文字内容撑开
标记: 优先级 2
2D变形
标记: 优先级 1
变形 transform
标记: 优先级 1
移动：translate（x,y）x和y都为负值 以父级的位置为准
translateX（x）
如果是百分比 以自己的宽度为准
旋转rotate（deg）
正值为顺时针 向左
负值为逆时针 向右、
设置旋转中心点
transform-origin：四个角 left top 等
精准的可用px
缩放：scale（x，y）可以只写一个参数 宽和高都缩放
倾斜 skew（x，y）正值为左倾斜，负值为向右倾斜
写在hover里面
过渡 transition
标记: 优先级 1
transition：宽度/高度/所有属性 width/height/all 花费时间 duration //必写
标记: 优先级 1
不要写在hover里面
标记: 优先级 1
运动曲线 timing-function（一般为ease 慢慢减速 ease-in 加速 ease-out 减速 linear 匀速）
标记: 优先级 2
delay 何时开始
3D变形
标记: 优先级 1
透视 perspesctive
标记: 优先级 1
原理：近大远小
添加父元素
视距越大 效果越不明显
translate3d（x，y，z）
标记: 优先级 1
translateZ是物体到屏幕的距离 Z是来控制物体近大远小的
透视知识一种展示形式 Z的值越接近透视设置的值 物体就越大
backface-visibilty：hidden 不是正面对象屏幕 就隐藏
标记: 优先级 2
animation 动画
标记: 优先级 1
定义动画
@keyframes 动画名称{
from/0% {
transform：transtionX/Y（）
}
to/x%{
}
}
标记: 优先级 1
引用动画
animation：动画名称 时间 （必写）
曲线 （ease） 何时开始（0） 播放次数（1） 是否反方向（normal/reverse/alternate）
标记: 优先级 2
多组动画
用百分比完成
标记: 优先级 1
伪元素after和before
类元素选择器 .xxx
伪类选择器 ：hover/active(点击)
是选取对象
伪元素选择器 ：：after
标记: 优先级 1
是插入一个元素（标签 盒子）只不过是行内元素 span a
标记: 优先级 1
鼠标经过出现边框 首先转换为block元素
再用绝对定位实现不占位置
标记: 优先级 1
box-sizing：border-box 把padding和margin算入width
伸缩布局
标记: 优先级 1
固定宽度
min-width
max-width
display：flex
标记: 优先级 1
控制盒子的先后顺序 order
默认为0 数字越大 越后（可以为负值）
正序方式排序
排列方向 flex-diretion
标记: 优先级 1
flex-diretion：
column 列排放
row 行排放
row-reverse 水平翻转
标记: 优先级 1
子元素排列顺序
标记: 优先级 1
justify-content x轴对齐
标记: 优先级 1
flex-start
flex-end
center
标记: 优先级 2
space-between 两端对齐 中间留空隙
标记: 优先级 2
space-around 相当于给每个盒子加了margin
标记: 优先级 1
align-items y轴对齐(单行)
标记: 优先级 1
flex-start
flex-end
center
标记: 优先级 1
stretch 相当于height：100%
标记: 优先级 1
是否换行 flex-wrap
nowrap 不换行/不换列
标记: 优先级 1
wrap 换行/换列
标记: 优先级 2
wrap-reverse 翻转
排列方向 换不换行
标记: 优先级 1
flex-flow：
flew-direction flew-wrap
align-content 堆栈 对齐（多行）
标记: 优先级 1
flex-start
flex-end
center
标记: 优先级 1
stretch 相当于height：100%
space-between 两端对齐 中间留空隙
space-around 相当于给每个盒子加了margin
标记: 优先级 1
盒子模型布局稳定性
标记: 优先级 1
优先使用： width>paading>margin
宽度剩余法 高度剩余法
按高度or宽度来设置盒子里面设置小盒子大小
padding
有宽度会撑大盒子
块级元素会继承父元素的宽度 此时 子元素没有宽度 不会被padding撑大
标记: 优先级 1
css box-sizing 新属性
content-box 会影响盒子大小
border-box 不会
盒子溢出 overflow
标记: 优先级 2
visible 默认的 超出显示
auto 自动 超出就有滚动条
标记: 优先级 1
hidden 超出隐藏
JavaScript
标记: 优先级 1
编程语言：用来控制计算机的一系列指令 有固定的格式和词汇
标记: 优先级 2
汇编语言
高级语言
与标记语言的区别：
标记语言不用于向计算机发出指令 常用于格式化和链接 是用来被读取的 是被动的
编程语言有很强的逻辑和行为能力
标记: 优先级 1
历史：创始人-布兰登-艾奇
标记: 优先级 3
前端语言：处理界面//只能在浏览器运行 不能在后端处理数据
后端语言：处理数据
前端（浏览器）——http协议——后端（服务器）
标记: 优先级 1
三部分组成：ECMAScript 是js的标准
//语言核心：ES5和ES6
DOM 操纵HTML
BOM操作浏览器
标记: 优先级 1
书写位置：1、在body中的script标签内书写
2、保存为.js文件 在body末尾声明
标记: 优先级 2
ECMAScript
标记: 优先级 1
数据类型
标记: 优先级 1
基本数据类型
值类型
标记: 优先级 1
没有字符型 string是基本类型
String（）内置函数 转换为字符串
标记: 优先级 2
返回的一般是值 数据本身
标记: 优先级 1
Number 数字型 默认0
//可以不同进制表示 并在控制台中转换为十进制
二进制前面加0b 八进制前面加0 十六进制前面加0x
标记: 优先级 1
即可以保存整数 也可以保存小数
标记: 优先级 2
范围：Number.MAX//MIN_VALUE
特殊值：+-Infinity无穷大/小
NaN是一个值 不是类型 非数字 不自等即 NaN == NaN //false
0除以0的结果是NaN
标记: 优先级 1
isNaN（）用来判断非数字 true/false
标记: 优先级 1
String 字符串型
标记: 优先级 1
有引号的就叫字符串型‘’or“”
标记: 优先级 2
嵌套 单引号包裹双引号
标记: 优先级 2
字符串转义字符 \ 在引号里面使用
\n 换行
\\斜杠\
\' “单引号or 双引号
\t tab缩进
\b 空格 blank
标记: 优先级 1
用+来拼接字符串
空字符串 var str=”“
标记: 优先级 2
变量名+空字符串 可将此变量变为字符串类型
标记: 优先级 1
只要有字符串类型的拼接 最后结果就是字符串
标记: 优先级 1
变量名.length 表示字符串的长度
标记: 优先级 2
Boolean
标记: 优先级 2
只有 true（1）和false（0）两个值
标记: 优先级 1
Udefined
标记: 优先级 2
声明变量未赋值
标记: 优先级 2
和数字相加 结果是NaN
标记: 优先级 1
Null
标记: 优先级 1
空值
和数字相加 返回数字
标记: 优先级 1
typeof运算符
标记: 优先级 1
检测值或变量的类型
标记: 优先级 1
是运算符 不是函数 不需要加（）
标记: 优先级 2
检测null的类型为object
标记: 优先级 1
prompt取过来的值是字符型的
标记: 优先级 1
三个特殊的引用类型
Boolean
String
Number
控制台颜色
蓝色：数字型
灰色 underlined /null
黑色 字符串类型
浅蓝色 布尔型
标记: 优先级 2
字面量
在源代码中一个固定值的表示法 表示如何表达这个值
标记: 优先级 2
复杂数据类型
标记: 优先级 1
Object 对象
Array 数组
Function 函数
RegExp 正则表达式
Date
Map
Symbol
JS函数
标记: 优先级 1
语句的封装 方便代码块被重复使用
标记: 优先级 1
函数的定义与调用
标记: 优先级 2
命名函数：function 函数名（形参名 ）{语句块}
标记: 优先级 1
函数表达式：var 函数变量 = function（）{}；
标记: 优先级 2
调用： 函数名（）；
函数的参数和返回值
标记: 优先级 1
Js只有值传递 没有引用传递
对于复杂类型的传递 传递的不是引用 而是变量里面的值（引用的地址）
标记: 优先级 1
return 返回值 即退出函数 结合 if使用 一般不需要再写else
标记: 优先级 2
函数重载
标记: 优先级 1
arguments 表示他接受到的实参列表是一个类数组对象
function fun () {
console.log(arguments);
}
fun(1,2,3,1,2)
类数组对象：所有属性均为从0开始的自然数序列，并且有length属性，和数组类似可以用方括号书写下标访问对象的某个属性值 但是不能调用数组的方法
标记: 优先级 1
参数个数不同形成重载 arguments.length 不同 参数个数即不同
标记: 优先级 2
构造函数
标记: 优先级 1
function Star（）{this.xx=xx
this.sing = fucntion(xx){}
}
标记: 优先级 1
var ldh = new Star（xx）//对象的实例化
new //在内存中创建一个空对象
this 指向整个对象
执行代码
返回新对象
标记: 优先级 2
利用构造函数创建对象的过程就叫对象的实例化
标记: 优先级 2
new Date（） 方法 用来获取当前时间
标记: 优先级 1
时间戳 当前时间距离 1970 1 1 号
的毫秒数
标记: 优先级 1
date.valueOf()
date.getTime()
标记: 优先级 2
H5新增 Date.now（）
标记: 优先级 1
方法 var date1 = +new Date（）
标记: 优先级 1
没有参数就返回当前时间（可带参数）
标记: 优先级 1
getFullYear（）返回当前年份
getMonth（） 返回的月份小1 （0-11）
getDate（） 返回日期
getDay（）返回星期几 0 1 2 3.。。
getHours（）
getMinutes（）
getSecos()
把属性和方法封装到函数中 泛指某一类
标记: 优先级 1
JS面向对象
标记: 优先级 1
是一个具体的事物 是一组无序的相关属性（特征 名词）和方法（行为 动词）的集合
保存一组信息
标记: 优先级 1
是引用类型值 复杂数据类型 object
标记: 优先级 1
== 和 === 没有区别 都是比较值和类型是否相同
比较为是否为内存中的同一个对象
标记: 优先级 1
创建对象
标记: 优先级 2
var obj={
x:xx,
y:xx,
hi:function(){
xxxx;
}
}
var obj = new object(); //创建了一个空的对象
对象的属性
标记: 优先级 1
访问属性 对象名.key
标记: 优先级 1
如果属性名以变量形式或者字符串存储 必须使用方括号访问
键值：属性名（key）和属性值（value）
标记: 优先级 2
key为字符串格式
对象的方法
标记: 优先级 1
某个属性值是函数 则被成为方法
key：function（）{}
调用：对象名.方法名（）
对象的遍历
标记: 优先级 1
for..in
for( k in 对象名){}
k //属性名
obj【k】//属性值
标记: 优先级 2
JS内置方法
标记: 优先级 1
sort（） 数组排序 这个方法的参数可以是函数
标记: 优先级 2
Math.abs（）绝对值
标记: 优先级 2
Math.floor(Math.random() * (max - min - 1)) + min
math对象产生随机整数
标记: 优先级 1
xxx instanceof Array 检测是否所谓数组
Array.isArray（）
标记: 优先级 2
JS作用域
标记: 优先级 1
代码名字（变量）在某个范围内起作用和效果
伪类提高程序的可靠性和减少命名冲突
标记: 优先级 2
es6之前 全局作用域 局部作用域
标记: 优先级 2
Js中没有块级作用域
全局作用域 ：整个script标签
局部：在函数内部
全局变量和局部变量
标记: 优先级 1
全局变量：在全局作用域下
在浏览器关闭时才会销毁 比较占内存
局部变量：在局部作用域下 函数的形参也是局部变量
在程序执行完毕时就会销毁
如果没有用var声明 默认是全局变量
标记: 优先级 2
JS数组
标记: 优先级 1
概念：用来存储一组相关值的类型
复杂引用类型
标记: 优先级 2
定义 var arr=new Array（内容）
var arr = 【】
var arr = new Array（长度）
标记: 优先级 2
若更改的数组项超过length-1 则会自动创造该项
即 js数组可以动态扩容
标记: 优先级 1
访问数组项 数组名【下标】不存在就返回underfined
数组长度 arr.length
更改数组值 arr[x]=x
增加数组项 arr[arr.length]=xx
标记: 优先级 2
数组的遍历
标记: 优先级 1
var arr=[1,2,3,4];
for (var i=0;i < arr.length;i++){
console.log(arr[i]);
}
var arr=['a','b','c'];
for (var i in arr){
console.log(i);
console.log(arr[i]);
}
标记: 优先级 2
i 是计数器 当索引号使用 arr【i】是数组第i个数组元素
标记: 优先级 1
冒泡排序
标记: 优先级 1
是一种排序算法 重复的走访过要排序的数列 一次比较两个元素 如果顺序错误就交换
直到不需要再交换为止
标记: 优先级 2
数组排序
标记: 优先级 1
翻转排序 reverse（）
标记: 优先级 2
冒泡排序 sort（）
标记: 优先级 1
arr.sort(function(a,b){
return a-b;//升序排列
b-a//降序排列
}
)
数组转换字符串
标记: 优先级 2
toString（）
join（’分隔符‘）
根据位置返回字符
标记: 优先级 1
charAt（index）返回指定位置的字符
str（index） h5新增 获取指定位置的字符
charCodeAt(index) 获取指定字符的ASCIII（index索引号）
用来判断按了哪个键
常用对象 方法
标记: 优先级 1
push（xx） 在数组末尾加入新项 参数xx就是要加入的值
标记: 优先级 1
pop（） 用来删除数组的最后一项
标记: 优先级 2
unshift（） 在数组头部加入新项
标记: 优先级 1
splice（）截取字符
标记: 优先级 1
subString（第几个开始，要删除个数） 截取字符串
标记: 优先级 1
数组中查找给定元素的第一个索引（如果不存在返回-1 存在则返回索引号）
indexOf（要查找的字符‘，【开始的位置】）//从第一个开始查找
lastIndecOf（） //末尾开始查找
标记: 优先级 1
replace（） 替换字符 只替换第一个字符
标记: 优先级 2
JS基础
标记: 优先级 1
输出语句 内置函数（“参数”）；or 内置函数.方法（“”）；
标记: 优先级 2
输入语句 prompt（）；
标记: 优先级 1
alert(“”)//弹出警告框
标记: 优先级 1
console.log(“”)//控制台输出
变量
标记: 优先级 1
计算机语言中能储存计算结果或能表示值的抽象概念
即存储数值的容器
作用：保存数据
本质：变量是内存里的一块空间 用来存储数据
声明变量就是去内存申请空间
标记: 优先级 1
定义变量：var a=“”；//变量的初始化
关键字 变量名=“变量值”；
标记: 优先级 2
改变变量的值
a=“”；
赋值=
标记: 优先级 1
a = b//把b赋值给a
变量/函数/对象的属性等的合法命名
标记: 优先级 1
只能由字母、数字、 _、$组成 但不能以数字开头
标记: 优先级 1
不能是关键字或者保留字
标记: 优先级 1
变量名大小写敏感 a和A是不同变量
标记: 优先级 2
一般为驼峰命名法（java）
下划线命名法：c c++ python golang sql
标记: 优先级 3
变量的默认值
标记: 优先级 3
没有赋值 undefined
标记: 优先级 2
常见错误
标记: 优先级 2
不用var定义 直接赋值 不会引发错误 但是会产生作用域问题（为全局变量）
标记: 优先级 1
使用strict模式：如果没有用var定义 不会被视为全局变量 会运行错误
“use strict”放在js代码的任意一行
标记: 优先级 1
变量声明提升：可以提前使用一个稍后声明的变量 而不会引发异常
//js特有 一般不使用
标记: 优先级 2
数据类型转换
标记: 优先级 1
转换为字符串
1、toString（）变量名.toString
2、String（变量名）强制转换
3、加号拼接空字符串//隐式转换
标记: 优先级 1
转换为数字型
标记: 优先级 1
parseInt（）得到的只能是整数
可去除单位
标记: 优先级 1
先将参数转换为字符串 再转为整数
parseFloat（） 转换为浮点数
标记: 优先级 1
js（- * /）隐式转换 利用算数运算隐式转换为数值型
标记: 优先级 2
Number（’字符串‘） //字符串不支持表达式
但可以直接放一个表达式
标记: 优先级 1
转换为布尔型
代表空、否定的值会转换为false 例如 0 null NaN undefined
标记: 优先级 1
其余都会true
字符串类型常用的内置方法
标记: 优先级 1
charAt(编号) 得到指定位置字符
substring（a,b）提取子串 左闭右开 从a开始到b（不包括b）
substr（a,b）从a开始 长度为b
slice（a,b） 从a开始到b（不包括b）可以是负数 表示倒数
标记: 优先级 1
toUpperCase（）将字符串变为大写
toLowerCase（）将字符串变为小写
indexOf()检索字符串
返回某个指定的字符串值在字符串中首次出现的位置
如果没有出现 返回-1
标记: 优先级 1
trim（）删除首尾空格
trimStart（）删除首部空格
trimEnd(）删除尾部空格
运算符
标记: 优先级 1
用于实现赋值 比较 算数运算等
标记: 优先级 3
算数运算符
标记: 优先级 1
隐式类型转换：如果参与运算的某操作数不是数字类型 js会自动转换为数字型
标记: 优先级 2
加减乘除取余（%）
标记: 优先级 1
浮点数直接运算会有误差
标记: 优先级 2
不能直接比较浮点数
标记: 优先级 1
表达式
标记: 优先级 1
表达式
标记: 优先级 1
由操作数（数字 变量等）和运算符组成的式子
标记: 优先级 1
任何表达式都会有返回值
标记: 优先级 1
2=1+1
自赋值运算符
标记: 优先级 1
前置递增运算符 ++age 先自加后返回
标记: 优先级 2
后置递增运算符 age++ 先返回后自加
标记: 优先级 2
作用：让代码更简洁
比较运算符
标记: 优先级 2
== 等于 默认转换数据类型 只要求值相同
===全等 要求数据类型和值都要相同
逻辑运算符
进行布尔值运算 返回值也是布尔值 经常用于判断运算
&& 逻辑与
子主题 3
流程控制
标记: 优先级 1
循环
标记: 优先级 1
for循环
标记: 优先级 1
双重for循环 外层循环一次 里层全部循环
先分析 再写代码
while循环
标记: 优先级 2
while（）{}
do{
}while（判断条件）
判断
标记: 优先级 1
switch（变量/表达式）{
case：
break；
default：(可不写)
}
标记: 优先级 1
三元表达式：
条件表达式 ？ 表达式1：表达式2
标记: 优先级 2
if（测试条件）{
}else if {
}else{
}
标记: 优先级 1
基本包装类型
标记: 优先级 2
把简单数据类型包装成复杂数据类型
从而拥有属性和方法
DOM
标记: 优先级 1
基本概念
标记: 优先级 1
Document Object Model 文档对象模型 是Javascript操作文档的接口
标记: 优先级 2
可以将HTML文档表示为文档树 整个文档就对应一个document对象
标记: 优先级 1
处理可扩展标记语言的编程接口
标记: 优先级 1
document 对象nodeType 属性值为9 //即document 节点
标记: 优先级 1
所有标签都是元素 element
所有内容都是节点 node
标记: 优先级 1
文档document 元素element 节点node 都是对象
标记: 优先级 1
子主题 5
操作元素
标记: 优先级 1
修改元素
标记: 优先级 1
修改元素内容 （可读写）
标记: 优先级 1
innerHTML = ’‘
从起始位置到终止位置的内容 去除html标签 空格和换行也会去掉
标记: 优先级 1
innerText
保留html标签的内容 空格和换行也保留
标记: 优先级 2
修改元素属性
标记: 优先级 1
元素名.属性 = ’‘
标记: 优先级 1
获取元素
标记: 优先级 1
getElementbyId() 通过id获取元素
标记: 优先级 1
getElementsByTagName（） 通过标签获取指定标签名的对象的集合（返回时数组 如果没有整个标签 则返回一个空的伪数组）
标记: 优先级 1
h5新增 getElementByClassName() 通过类名获取
标记: 优先级 2
querySelector（）返回指定选择器的第一个元素 需要加符号 . #
标记: 优先级 1
querySelector All（） 返回指定标签的所有元素
标记: 优先级 1
获取特定标签
body document.body
html document.documentElement
标记: 优先级 2
修改元素样式
标记: 优先级 1
element.style 行内样式修改
修改元素单个样式
标记: 优先级 1
element.className = 'classname'
修改元素的className 适合多个样式 会覆盖原来的类名
element.className = '原类名 classname'
多类名选择器 可保留原类名
标记: 优先级 1
子主题 1
获取元素的属性值
标记: 优先级 1
element.属性名
主要是内置属性
element.getAttribute（’属性名‘）
自定义属性
设置元素的属性值
标记: 优先级 2
element..属性名 = ’‘
element.setAtrribute（’属性名‘，值）
自定义属性
标记: 优先级 2
data-开头
节点操作
标记: 优先级 1
子主题 1
事件基础
标记: 优先级 1
事件三要素
事件源 什么被触发
事件类型 是按钮还是其他
事件处理程序 函数赋值
标记: 优先级 1