JS
- 使用对象.事件 = 函数 => 来绑定响应函数
- 它只能同时为一个元素一个事件绑定一个响应函数
- 不能绑定多个，否则后面会覆盖前面的
- 使用addEventListener()可同时为一个元素的相同事件同时绑定多个响应函数
- 当事件被触发时，响应函数按绑定顺序执行 this是被绑定对象
- 参数：1.事件的字符串，不要on 2.回调函数 3.是否在捕获阶段触发事件，需要一个布尔值，一般传false
- IE8中用attachEvent()来绑定事件
- 参数：1.事件的字符串，要on 2.回调函数
- 后绑定先执行 this是window
- function bind(obj,eventStr,callback){} => 用来为指定元素绑定响应函数
事件的传播
- 微软公司认为事件由内向外传播 => 冒泡阶段
- 网景公司认为事件由外向内传播 => 捕获阶段
W3C综合方案，将事件传播分为三个阶段
- 捕获阶段 => 从最外层祖先元素，向目标元素进行事件捕获，但默认此时不会触发事件
- 目标阶段 => 事件捕获到目标元素，捕获结束，开始在目标元素上触发事件
- 冒泡阶段 => 事件从目标元素向祖先元素传递，依次触发祖先元素上的事件
-
onwheel => 鼠标滚轮滚动事件，会在滚轮滚动时触发
-
event.deltaY => 可以获取鼠标滚轮滚动方向，上为-300，下为300
-
当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
-
event.preventDefault() => 取消默认行为
-
onkeydown => 按键被按下（一直按则不断触发）
-
onkeyup => 按键被松开 绑定给一些可以获取焦点的对象或document
-
在onkeydown中取消默认行为，则输入内容不会出现在文本框
-
element.clientWidth，element.clientHeight => 可以获取元素的可见宽度和高度，包括内容区和内边距，不带px，返回一个数字，直接进行计算。只读的，不能修改
-
element.offsetWidth，element.offsetHeight => 获取元素的整个宽度和高度，包括内容区、内边距和边框
-
element.offsetParent => 用来获取当前元素的定位父元素，最近的开启定位的祖先元素，若无则body
-
element.offsetLeft，element.offsetTop => 当前元素相对于其定位父元素的水平/垂直偏移量
-
element.scrollWidth，element.scrollHeight => 获取元素的滚动宽度和高度
-
element.scrollLeft，element.scrollTop => 获取水平/垂直滚动条滚动的距离
-
当scrollHeight - scrollTop == clientHeight || scrollWidth - scrollLeft == clientWidth => 说明垂直/水平滚动条到底了
-
onscroll => 该事件会在元素的滚动条滚动时触发
-
onmousemove => 该事件将在元素中鼠标移动时被触发
事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
- 在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标、滚轮方向、按下的键
- clientX和clientY => 用于获取鼠标在当前可见窗口的坐标
- pageX和pageY => 用于获取鼠标相对于当前页面的坐标
事件的冒泡（Bubble）
- 所谓的冒泡 指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素相同事件也会触发
- 在开发中大部分冒泡有用，如果不希望发生冒泡事件可通过事件对象来取消冒泡
- event.cancelBubble = true
事件的委派
- 指将事件统一绑定给元素的共同祖先元素，当后代元素事件触发时，一直冒泡到祖先元素
- 从而通过祖先元素的响应函数来处理事件
- 利用冒泡，通过委派可以减少事件绑定次数，提高程序的性能
- target
- event中的target表示的触发事件的对象
-
在事件的响应函数中，响应函数是给谁绑定的，this就是谁
-
获取body标签 => document.body 保存body的引用
-
获取html根标签 => document.documentElement 保存html根标签
-
document.getElementsByTagName(“*”) <=> document.all代表页面中所有元素
-
根据元素的Class属性查询一组元素节点对象 => document.getElementsByClassName()
-
document.querySelector() => 需要一个选择器字符串作为参数，可根据CSS选择器查询，只返回一个元素
-
document.querySelectorAll() => 获取一组元素（数组形式）
-
document.createElement() => 用于创建一个元素节点对象，参数为标签名，返回创建好的对象
-
document.createTextNode() => 用于创建一个文本节点对象，参数为文本内容，返回新节点
-
父节点.appendChild(子节点) => 向一个父节点中添加一个新的子节点
-
父节点.insertBefore(新节点,旧节点) => 在指定子节点前插入新的子节点
-
父节点.replaceChild(新节点,旧节点) => 使用指定子节点替换已有子节点
-
父节点.removeChild(子节点) => 删除一个节点
-
常用：子节点.parentNode.removeChild(子节点)
-
使用innerHTML也可以完成DOM的增删改的相关操作
-
一般结合使用
-
可通过在响应函数最后return false来取消默认行为
-
for循环会在页面加载完成后立即执行，而响应函数会在超链接被点击时才执行
-
当响应函数执行时，for循环早已执行完毕
-
修改元素样式：元素.style.样式名 = 样式值
-
CSS的样式名中含有- 比如background-color 这种名称在JS中是不合法的
-
需要修改为驼峰命名法
-
通过style属性设置的样式都是内联样式，有较高优先级，但不及!important
-
读取元素样式：元素.style.样式名
-
通过style设置和读取的都是内联样式
-
获取元素的当前显示的样式：元素.currentStyle.样式名（只有IE支持）只能读，不能改
-
若无设置，则返回默认值
-
其他浏览器：getComputedStyle() window方法 只能读，不能改
-
参数：1.要获取样式的元素 2.可传递一个伪元素，一般传null
-
返回一个对象，封装了当前元素对应的样式
DOM(Document Object Model) 文档对象模型
- 文档节点、元素节点、属性节点、文本节点
- 事件：用户和浏览器之间的交互行为，比如：点击按钮、鼠标移动、关闭窗口
- onload事件会在整个页面加载完成之后才触发
- 为window绑定一个onload事件
- 通过document对象调用
- .getElementById() => 通过id属性获取一个元素节点对象
- .getElementsByTagName() => 通过标签名获取一组
- .getElementsByName() => 通过name属性获取一组
- innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性无用
- 元素.属性名 class要用元素.className访问
元素节点的子节点
- .getElementsByTagName() => 返回当前节点的标签名后代节点
- .childNodes => 表示当前节点的所有子节点（包括文本节点）标签间空白也算文本元素
- .firstChild => 表示当前节点的第一个子节点（包括空白文本节点）
- .lastChild => 表示当前节点的最后一个子节点
- .children => 可以获取当前元素的所有子元素
- .firstElementChild => 获取当前元素的第一个子元素
获取父节点和兄弟节点
-
.parentNode => 表示当前节点的父节点
-
.previousSibling => 表示当前节点的前一个兄弟节点（包括文本节点） .prebiousElementSibling
-
.nextSibling => 表示当前节点的后一个兄弟节点（包括文本节点） .nextElementSibling
-
.innerText => 用于获取元素内部的文本内容 和innerHTML类似，自动去除html
-
文本框的value属性值，就是文本框中填写的内容
正则表达式
创建正则表达式的对象
- new RegExp(“正则表达式”,“匹配模式”) => 匹配模式(i 忽略大小写 g 全局匹配)
- 方法 test()
- 检查一个字符串是否符合正则表达式规则 符合返回true 不符合返回false
使用字面量创建正则表达式
-
var 变量 = /正则表达式/匹配模式
-
或者：|
-
[]中也是或 =>
[a-z][A-Z][A-z]=>任意字符 -
[^] => 除了
-
split() => 可根据正则表达式拆分（默认全局）
-
search() => 可根据正则表达式搜索（只第一个，不能全局）
-
match() => 根据正则表达式，从字符串中提取内容，封装到数组中返回，默认提取一个，可设多个匹配模式
-
replace() => 将字符串中指定内容替换为新内容 参数：1.被替换内容 2.新的内容 默认只换一个，可将第一个参数设为正则表达式
-
量词：只对前边一个起效
-
{n} => 出现n次
-
{m,n} => 出现m~n次
-
{m, } => 出现m次以上
-
+=> 至少一个={1, } -
*=> 0个或多个 = {0,} -
? => 0个或1个 = {D,1}
-
^ => 表示开头
-
$ => 表示结尾
-
. => 表示任意字符
-
\ => 作为转义字符
-
\w => 任意字母、数字、_
-
\W => 除了任意字母、数字、_
-
\d => 任意数字
-
\D => 除了数字
-
\s => 空格
-
\S => 除了空格
-
\b => 单词边界
-
\B => 除了单词边界
JS方法
包装类（将基本数据类型数据转换为对象）
- String()
- Number()
- Boolean()
使用
- 方法和属性只能添加给对象，不能添加给基本数据类型
- 对基本数据类型的值去调用属性和方法时
- 浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法
- 调用完之后，再将其转换为基本数据类型
字符串的方法
- charAt() => 可以返回字符串中指定位置的字符，根据索引获取指定的字符
- charCodeAt() => 获取指定字符的Unicode编码
- String.formCharCode() => 可以根据字符编码去获取字符
- indexof() => 该方法可以检索一个字符串中是否含有指定内容，返回第一次出现的索引，若无则返回-1，第二个参数，指定开始查找位置
- lastIndexof() => 从后往前
- substring() => 用来截取字符串，与slice()类似，不接受负值，自动改为0，且两个参数会自动调整位置（第一个大于第二个）
- substr() => 开始位置+截取个数
- split() => 可以将一个字符串拆分成一个数组
- toLowerCase() => 把字符串转换为小写
- toUpperCase() => 把字符串转换为大写
函数方法
-
call() 和 apply()
-
当时函数调用call()和apply()都会调用函数执行
-
当调用call()和apply()可将一个对象指定为第一个参数
-
此时这个对象将成为函数执行时的this
-
call()方法可以将实参在对象之后一次传递
-
apply()方法需要将实参封装到一个数组中统一传递
-
在调用函数时，浏览器传递两个隐含的参数
- 函数的上下文对象this
- 封装实参的对象arguments
- arguments是一个类数组对象，可通过索引操作数据，也可获取长度（arguments.length）
- 所有传递的实参都在arguments中保存
- 即使不定义形参，也可通过arguments使用实参（用索引）
- 有一个属性叫做callee，对应一个函数对象，就是当前正在指向的函数对象
Date对象
- 在JS中使用Date对象来表示一个时间
- 实参、字符串、月份/日/年 时：分：秒
- getDate()、getDay()、getMonth()、getFullYear()、getTime()
- Date.now()
Math
- Math和其它对象不同，它不是一个构造函数
- 它属于一个工具类，不用创建对象
- Math.ceil() => 向上取整
- Math.floor() => 向下取整
- Math.round() => 四舍五入
- Math.random() => 生成0-1之间随机数
- Math.pow(x,y) => 返回x^y
基本数据类型（栈内存）
- String
- Number
- Boolean
- Null
- Undefined
引用数据类型（堆内存）
- Object
数组方法
- slice() => 可用来从数组中提取指定元素，不会改变原数组，截取到新数组中返回
- 参数：1.开始位置索引（包含） 2.结束位置索引（不包含） 索引为负，-1，倒数第一个
- splice() => 可用来删除数组中的指定元素，会改变原数组，并将被删除元素返回
- 参数：1.开始位置索引 2.删除个数 3及以后 插入元素
- concat() => 可连接两个或多个数组，并将新数组返回，不会改变原数组
- join() => 可以将数组转换为一个字符串，并将字符串返回，不会改变原数组，可指定连接符，默认为,
- reverse() => 用来反转数组，直接修改原数组
- sort() => 排序数组，按照Unicode编码排序，改变原数组，添加回调函数指定排序规则
- 根据返回值决定位置，大于0交换位置，小于0不变，等于0两数相等，不变
- 数组前面：unshift()=>增加 shift()=>删除
- 数组后面：push()=>增加 pop()=>删除
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
