个人笔记
链接样式
链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
1 . a:link - 正常，未访问过的链接
2 . a:visited - 用户已访问过的链接
3 . a:hover - 当用户鼠标放在链接上时
4 . a:active - 链接被点击的那一刻
CSS 背景属性用于定义 HTML 元素的背景。
CSS 属性定义背景效果:
1 . background 简写属性，作用是将背景属性设置在一个声明中。
2 . background-color 设置元素的背景颜色。
3 . background-image 把图像设置为背景。
4 . background-repeat 设置背景图像是否及如何重复。
5 . background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
6 . background-position 设置背景图像的起始位置。
过渡动画 transition(复合属性)
1 . transition-property:all;让什么属性可以出发动画
2 . transition-duration:毫秒数; 动画执行的时长
3 . transition-timing-function:属性值;动画轨迹函数 linear(匀速) ease-in(快) ease-out(慢)
4. transition-delay:毫秒数;动画延迟时间 规定动画从何时开始
自执行动画
animation: name duration timing-function delay iteration-count direction fill-mode;(复合属性) -自执行动画要配合 @keyframes 动画名 { } 使用
1 . animation-name: 属性值 ; 动画名称 建议驼峰式命名
2 . animation-duration : 毫秒数 ; 动画时长 几秒内完成动画
3 . animation-timing-function : 属性值 ; 动画轨迹函数 linear(匀速) ease-in(快) ease-out(慢)
4 . animation-delay : 毫秒数 ; 动画延迟时间 规定动画从何时开始
5 . animation-iteration-count : 属性值 ; 动画次数(一般为数字) infinite(无限次)
6 . animation-direction : 属性值 ; 动画方向 alternate(往返运动)
7 . animation-fill-mode : 属性值 ; 规定动画结束时候的状态 forwards(停留在结束时候的位置) backwards(停留在开始位置)
8 . 特殊: animation-play-state: 属性值 ; 动画运动状态 paused(暂停) running(运动)
变形 transform (只可使用复合属性 否则后写的覆盖前写的)
1 . transform : rotate(数字 deg) 旋转角度 多少度就顺时针旋转多少度
2 . transform : skew(数字 deg) 倾斜度 多少度就是 多少 deg
3 . transform : translate(像素 , 像素) 位移 第一个参数为水平方向 第二个参数为垂直方向
4 . transform : scale(比例) 等比缩放
input 的 type 类型
1 . url 生成一个 url 输入框
2 . tel 生成一个只能输入电话号码的文本框
3 . search 生成一个专门用于输入搜索关键字的文本框
4 . range 生成一个拖动条，通过拖动条
5 . color 用来创建一个用户使用的颜色选择器
6 . time 生成第一个时间选择器
7 . datetime 生成一个 UTC 的日期时间选择器
8 . datetime-local 生成一个本地化的日期时间选择器
9 . date 显示一个日期输入区域，可同时使用日期选择器，结果值包括年，月，日，不包括时间
10. month 生成一个月份选择器
11. week 生成一个选择的几周的选择器
12. email 生成一个 E-mail 输入框
13. number 生成一个只能输入数字的输入框
input 属性：
1 . placeholder 简短的提示信息
2 . autocomplete 快速输入，一般浏览器提供了自动补全的功能选择
3 . autofocus 当浏览器打开这个页面时，这个表单控件会自动获取焦点
4 . list 为文本框指定一个可用的选项列表，当用户在文本框中输入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
5 . pattern 用于验证表单输入的内容
6 . novalidate 当提交表单的时候不会其进行验证
7 . required 必需在提交之前填写的字段
8 . spellcheck 拼写检查，为 input，textarea 等元素新增属性
9 . formenctype 规定在发送到服务器之前应该如何对表单数据进行编码
10. formtarget 带有两个提交按钮的表单，会提交到不同的目标窗口
11. multiple 一次上传多个文件
12. maxlength 用于规定文本区域的最大字符数
13. wrap 是否包含换号符
逻辑非！
一元运算符
算术运算
比较运算符
相等运算符
逻辑与&&
逻辑或||
赋值运算符
添加：
push 向数组尾部添加 改变原数组 返回添加后数组的长度
unshift 向数组头部添加 改变原数组 返回添加后数组的长度
删除：
pop 删除最后一个数组项 改变原数组 返回被删除的数组项
shift 删除第一个数组项 改变原数组 返回被删除的数组项
万能删除法：
splice 可以删除多个数组项 改变原数组 返回的是被删除的数组项组成的新数组
数组名.splice(start，lenght，xx ，xx ，xx)
start: 从何处开始进行动作(下标）；
lentht: 删除的长度； 为0时返回空数组；
xx 添加的内容；
排序:
reverse 用于数组反转 会改变原数组
srot 改变原数组 语法: 数组名.srot(function(a,b){return a-b})
a-b 升序排列 b-a 降序排列
合并
concat 链接两个或多个数组 不会改变原数组
截取
slice 截取数组 不改变原数组
语法 数组名.slice(start,end) 包含开始下标，不包含结束下标
查找元素
indexOf( ) 查找某个指定的值在数组中首次出现的位置 返回下标 不改变原数组
语法 数组名.indexOf("要搜索的数组项") 没找到返回-1
lastIndexOf 查找某个指定的值在数组中首次出现的位置 返回下标 不改变数组
语法 数组名.lastIndexOf("要搜索的数组项"）没找到返回-1
分隔符
join( ) 转字符串
括号里添加分隔符
如果分隔符省略，则默认以逗号分隔
分隔符是空字符串 则输出一个字符串
————————————————————————————————————————————————
查找：
charAt() 返回指定位置的字符 括号里写下标 返回指定下标对应的子字符串
indexOf() 返回指定子字符串首次出现的位置 【从前往后找】 返回数值 没找到返回-1
语法 字符串名.indexOf(查找的字符串，从哪里开始找)
lastIndexOf() 返回指定子字符串最后出现的位置【从后往前找】 返回数值 没找到返回-1
语法 字符串名.laseIndexOf(查找的字符串，从哪里开始找)
操作：
replace() 替换 返回替换后的字符串
语法：str.replace(要替换掉的，替换上的)
toUpperCase() 转字符串为大写 返回转换后的字符串
tuLowerCase() 转字符串为小写 返回转换后的字符串
截取：
slice() 截取 返回被截取的部分 支持负值 负数从后往前数 ！！！不能倒着截取
语法：字符串名.slice(开始下标，结束下标) 1-4 只返回1，2，3 不写结束下标直接截到最后
substr() 截取 返回被截取的部分
语法：字符串名.substr(开始下标，截取长度) 截取长度不能为负数 不传入长度直接截到最后
substring() 截取 返回被截取的部分 不支持负值 会自动把负数和NaN转换为0
语法：字符串名.substring(开始下标，结束下标) 1-3 只返回1 ，2 不写结束下标直接截到最后
合并：
concat() 合并 可以拼接字符串
语法：字符串名，concat(要合并的字符串) 不会改变原来的字符串 返回拼接后的新字符串
转字符串为数组：
split() 将字符串转化未数组
语法：字符串名.split("") 返回的是一个数组 空格里内容为分隔符
括号里什么都不写 ，把所有字符串变成一个数组项
随机公式
Math.floor(Math.random()*(最大值-最小值+1)+最小值)
事件：通过某种方式触发的一个程序； 浏览器交互的瞬间。
事件的三要素：
1.事件源： 绑定的dom源
2.事件类型： 触发的方式
3.事件处理程序： 触发后执行的动作
绑定的方式：
1.HTML的事件处理程序
2.DOM0级的绑定方式
3.DOM2级的绑定方式
事件对象的概念及注意：
1.事件对象是封装了所有事件中的属性和方法的一个集合（对象）
2.事件对象以参数的形式传入到事件处理程序中、
3.事件对象的兼容语句 e || window.event
事件对象的属性:
1.e.keyCode 键盘编码
2.e.clientX，e.clnetY 获取事件在可视区的坐标
3.e.pageX，e.pageY 获取事件在页面中的坐标
4.e.offsetX，e.offsetY 以元素的左上角为原点，鼠标在元素中的坐标
5.e.stopPropagation 在标准浏览器下阻止冒泡和捕获
6.e.cancelBubble = true 在IE浏览器下阻止冒泡
7.e.preventDefault 在标准浏览器下阻止默认行为
8.e.returnValue = flase 在IE浏览器下阻止默认行为
9.e.target 在标准浏览器下获取被点击的元素
10.e.srcElement 在IE浏览器下获取被点击的元素
事件类型
1.onclick 点击事件
2.oncontextmenu 右击事件
3.ondblclick 双击事件
4.onmouseover 鼠标移上事件
5.onmouseout 鼠标移出事件
6.onmousemove 鼠标移动事件
7.onmousedown 鼠标按下事件
8.onmouseup 鼠标弹起事件
9.onmousewheel 鼠标滚轮事件 e.wheelDelta 返回正负值 可以判断向上还是向下滚
10.onkeydown 键盘按下事件
11.onkeyup 键盘弹起事件
12.onkeypress 键盘事件（按下时触发）（只有数字和字母可以触发）
13.onchange 改变事件
14.oninput 事件（只要文本框的值发生改变，就会触发）
15.onfocus 获取焦点事件
16.onblur 失去焦点事件
17.window.onload 预加载事件 （浏览器把所有标签加载完成后再触发这个事件）
18.onselect 选中事件
19.onscroll 滚动事件
20.onreset 重置事件 表单重置后发生的事件
HTML 的事件处理程序
语法：
on+事件类型作为HTML的属性名，执行程序作为属性值（this指的是被绑定的元素）
DOM0 级的绑定方式
语法：
1.通过 . 的形式绑定 例：dom . onclick = function （） {执行事件}
2.通过[ ]的形式绑定 例： dom[“onclick”] = function （） {执行事件}
3.通过函数的引用 例： dom . onclick = 函数名 （函数名不用加括号）
DOM0 级的接触绑定方式
dom.onlick = null （手动清空，解除绑定事件）
DOM2 级的绑定方式
标准浏览器下
语法：dom.addEventListeren（“事件类型”，执行程序，布尔值）
注意：
1.这种语法的事件类型不用加on
2.执行程序可以是回调函数，也可以是函数名
3.默认值为false 代表冒泡状态 true代表捕获状态
事件冒泡：由最具体的元素到最不具体的元素的执行顺序
div——>body——>html——>document
事件捕获：由最不具体的元素到最具体的元素的执行顺序
document——>html——>body——>div
解除绑定的方式
语法：dom.removeEventListeren（“事件类型”，执行程序，布尔值）
注意：参数要与绑定时保持一致；
回调函数作为执行程序时，不可以进行解除绑定；
this指的是被绑定的元素
IE浏览器下
语法：dom.attachEvent（“on加事件类型”，事件处理程序）
这里的this指的是全局对象window
解除绑定的方式
语法：dom.detachEvent(“on加事件类型”，事件处理程序）
同上 回调函数作为执行程序时，也不可以进行解除绑定；
