1 从页面中获取元素
document.getElementById() 根据ID的值
document.getElementsByTagName() 根据标签名
document.getElmenntsByClassName() 根据class的值
document.getElementsByName() 根据name属性的值
document.querySelector(css选择器) 返回满足条件的第一个 元素对象
document.querySelectorAll(css选择器) 返回所有满足条件元素组成的 类数组对象
2 给元素绑定事件
先获取元素
ele.onclick = function(){
}
获取元素的类数组对象， 遍历，挨个给每个元素绑定事件
3 修改元素的CSS样式
ele.style.css属性名
ele.style.background
ele.style.border
ele.style.backgroundColor
ele.style['background-color']
4 设置元素的class值
ele.className 可以赋值，也可以获取
ele.classList.add(‘值’) 添加一个class值
ele.classList.remove(‘值’) 删除一个class值
ele.classList.toggle(‘值’) 自动切换一个class值(有就删除，没有就添加)
5 事件
onclick 单击
ondblclick 双击
oncontextmenu 右击
onmouseover/onmouseenter 鼠标悬浮到元素上
onmouseout/onmouseleave 鼠标离开元素
onmousemove 鼠标在上面移动
onmousedown 鼠标的按键按下
onmouseup 鼠标的按键抬起
6 JS定时
单次定时
setTimeout(fn, delay)
clearTimeout() 清除定时
多次定时
setInterval(fn, dealy)
clearInterval() 清除定时
JavaScript 内置对象
1 Number
1.1 属性
- MAX_VALUE JS可以表示的最大的数字
- MIN_VALUE JS可以表示的最小的数字
1.2 方法
- toFixed(length) 指定保留长度的小数
- toExponential() 用科学计数法表示
- toPrecision(length) 要求数字按照指定长度显示 整数+小数
- toString(number) 把数字转换为字符串 可以按照指定的 进制 返回
2 String
2.1 属性
- length 字符串长度
2.2 方法
- charAt(index) 返回指定位置的字符
- concat(string) 连接字符串
- indexOf(str) 返回小字符串在字符串对象中第一次出现位置 -1表示不存在
- lastIndexOf() 返回小字符在字符串中最后一次出现的位置
- substr(start, length) 截取字符串 省略长度截取到结束
- substring(start, end) 截取字符串, 省略结束位置 一直到最后
- slice(start, end) 与substring 一模一样
- split(char) 把字符串分割为数组
- toUpperCase() 把字符串转为大写
- toLowerCase() 把字符串转为小写
- match() 匹配字符串 可用正则
- search() 查找字符串 可用正则
- replace(旧, 新) 替换字符串可用正则，替换 只能替换一次
- charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
- String.formCharCode() 从字符编码创建一个字符串。
3 Array
3.1 创建数组
- 使用直接量
[] - 构造函数方式
new Array()
var list = [item1, item2, item3 ...]
var list = new Array()
3.2 数组特点
- 索引必须连续
- 如果索引不连续，会产生稀疏数组
3.3 数组的遍历(迭代)
- for 循环遍历
-
for (var i = 0; i < arr.length; i ++) {
arr[i]
} - for...in 循环
-
for (var i in arr) {
arr[i]
} - for...of 循环
-
推荐 数组方法 forEach
arr.forEach(function(val, index){
})
3.4 数组元素的添加和删除
添加
- 为新索引赋值
- 利用数组长度,在数组尾部插入新元素
-
list.push() 最后面
list.unshift() 最前面
list.splice(位置,0,新值) 指定位置
删除
-
改变数组长度
-
list.pop() 删除最后 返回删除的元素
-
list.shift() 删除第一个 返回删除的元素
-
list.splice(位置,删除的个数) 指定位置删除指定个数
-
运算符 delete
设置修改
list[index] = value
list.splice(位置，删除个数,值1,值2...)
3.5 数组对象属性
- length 数组长度 元素个数
3.6 数组对象方法
-
splice()
删除指定位置指定个数的元素
替换指定位置指定个数的元素
添加指定位置的元素
返回 被删除的元素组成的数组 -
reverse() 翻转数组
-
sort() 数组排序
-
push() 和 pop() 在数组的最后添加或删除元素
-
unshift()和shift() 在数组的最前面添加或删除元素
-
toString() 和 toLocalString() 把数组转换为字符串
-
join() 把数组的元素拼接成字符串
-
slice() 截取数组中的一部分,返回新的数组 slice(start, end)
-
concat() 合并多个数组
-
indexOf() 搜索数组中的元素，并返回它所在的位置。
-
lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
-
forEach() 遍历 循环
-
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
-
filter() 检测数值元素，并返回符合条件所有元素的数组。
-
every() 检测数值元素的每个元素是否都符合条件。
-
some() 检测数组元素中是否有元素符合指定条件。
-
reduce() 将数组元素 索引值从低到高 进行组合 reduceRight() 将数组元素 索引值从高到低进行组合
5 Function
5.1 属性
-
prototype 原型
-
length 形参的数量，形参的长度。
5.2 方法
- apply(对象, 数组) 在调用函数（方法）的同时，改变函数内this的指向
- call(对象，参数,参数2...) 在调用函数（方法）的同时，改变函数内this的指向
- bind() 返回一个作为方法调用的函数
6 Math
6.1 属性
- MATH.PI 返回圆周率（约等于3.14159）。
6.2 方法
- abs(x) 返回数的绝对值。
- sqrt(x) 返回数的平方根。
- pow(x,y) 返回 x 的 y 次幂。
- ceil(x) 对数进行上舍入。
- floor(x) 对数进行下舍入。
- round(x) 把数四舍五入为最接近的整数。
- max(x,y) 返回 x 和 y 中的最高值。
- min(x,y) 返回 x 和 y 中的最低值。
- random() 返回 0 ~ 1 之间的随机数。
取随机数
0~9
Math.floor(Math.random() * 10)
6~13
Math.floor(Math.random() * 8) + 6
7 Date
7.1 方法
- getYear() 请使用 getFullYear() 方法代替。
- getFullYear() 从 Date 对象以四位数字返回年份。
- getMonth() 从 Date 对象返回月份 (0 ~ 11)。
- getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
- getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
- getHours() 返回 Date 对象的小时 (0 ~ 23)。
- getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
- getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
- getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
- getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
- getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
- getUTC.... 标准时区
- set...
- setUTC...
- toTimeString() 把 Date 对象的时间部分转换为字符串。
- toDateString() 把 Date 对象的日期部分转换为字符串。
- toUTCString() 根据世界时，把 Date 对象转换为字符串。
- toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
- toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
- toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
8 RegExp
8.1 属性
- global RegExp 对象是否具有标志 g。
- ignoreCase RegExp 对象是否具有标志 i。
- lastIndex 一个整数，标示开始下一次匹配的字符位置。
- multiline RegExp 对象是否具有标志 m。
- source 正则表达式的源文本。
8.2 方法
- exec() 检索字符串中指定的值。返回找到的值，并确定其位置。
- test() 检索字符串中指定的值。返回 true 或 false。
String对象的方法
search() 第一次匹配到的位置，匹配不到 -1
match() 同r.exec()
replace() 替换，默认只替换一个，正则全局匹配
9 JSON
9.1方法
- JSON.parse() 解析json格式的字符串
- JSON.stringify() 序列化对象 数组 或 原始值
10 Global
10.1 属性
- NaN
- InFinity
10.2 方法
- escape() 对字符串进行Unicode编码。
- unescape() 对由 escape() 编码的字符串进行解码。
- encodeURI() 把字符串编码为 URI。 对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”不进行编码
- decodeURI() 解码某个编码的 URI。
- encodeURIComponent() 把字符串编码为 URI 组件
- decodeURIComponent() 解码一个编码的 URI 组件。
- eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
- isFinite() 检查某个值是否为有穷大的数。
- isNaN() 检查某个值是否是数字。
- parseInt() 解析一个字符串并返回一个整数。
- parseFloat() 解析一个字符串并返回一个浮点数。
- Number() 把对象的值转换为数字。
- String() 把对象的值转换为字符串。
- 所有内置构造函数 都是 全局对象的属性