JavaScript 内置对象和使用技巧

Posted 2020-12-29 wanglecn

 实用技巧

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() 把对象的值转换为字符串。
• 所有内置构造函数 都是 全局对象的属性