js内置对象

Javascript对象介绍

JavaScript是基于对象的编程语言，就是由一个一个的对象组成的编程语言，因为以下对象都是JavaScript内置的，所以我们学习这些对象，无非就是学习对象的属性、方法。

 

一、数组对象

常用方法：

1、length：获得数组的元素个数

2、concat()：合并数组生成一个新数组

3、join()：将数组的元素连接成字符串

4、push()：向数组的末尾添加元素

5、pop()：把数组的最后一个元素删除

6、shift()：删除第一个元素

7、unshift()：向数组的开头添加元素

8、reverse（）：颠倒数组的顺序

9、slice(start，end)：截取数组的元素

10、splice(startIndex，deleteCount，values)：

删除数组的元素

参数1：开始的索引位置

参数2：删除的元素个数

参数3：可选，如果有参数3，表示使用参数3的值代替删除的内容

返回值：删除的内容

11、toString() ： 将数组转换成字符串

 

二、字符串对象

常用方法：

1、indexOf()，获得字符在字符串中第一次出现的位置

2、lastIndexOf()，获得字符在字符串中最后一次出现的位置

3、split（），按照分隔符将字符串拆分成数组

参数1：分隔符，按照什么分隔符进行拆分

参数2：可选，限制要几个元素

4、replace（a,b）将a替换成b

5、charAt（index），查找在index这个索引处的字符

6、slice(start，end)，从start开始截取，截取到end这个位置

7、substr(start,length)，从start位置开始截取，截取length个长度

8、toLowerCase()，将字符串转换成小写

9、toUpperCase()，将字符串转换成大写

 

三、数学对象

常用方法：

1、Math.abs() 计算绝对值

2、Math.ceil()，向上取整数

3、Math.floor()，向下取整数

4、Math.round()，四舍五入取整

5、Math.max()，计算最大值

6、Math.min()，计算最小值

7、Math.pow(x,y) 获得x的y次方【幂】

8、Math.sqrt(num) 获得num的平方根

9、Math.random() 取得0-1之间的随机数

 

四、日期对象

通过new Date()获得日期对象

常用方法：

1、日期对象提供了如下方法，获得年月日、时分秒：

getFullYear、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()

2、getDay() 获得星期几

3、getMilliSeconds() 获得时间后面的毫秒数：1000毫秒==1秒

4、getTime()，获得当前的时间戳（单位是毫秒的时间戳） 注意：比一般时间戳多三位

5、toLocaleString()，将日期对象转换成本地的时间格式

6、设置时间：

setFullYear()

setMonth()

setDate()

 

五、正则表达式对象

（1） 定义正则表达式对象：

方法1：new RegExp(正则表达式，模式修正符);

方法2：//模式修正符，没有引号包裹

（2）在php中如果全局匹配使用，preg_match_all

在javascript中，如果全局匹配，使用 模式修正符 g表示

（3）在javascript中，表示中文的范围：[\u4e00-\u9fa5]

（4）在javascript中，不支持逆向预查，支持正向预查

（5）Javascript的正则表达式对象，提供了2个方法，用来检测

 　　test()，检测是否符合规则；是就返回true，否就返回false

　　 exec()，检测是否符合规则，符合就返回匹配的内容，不符合就返回null

 

 

 六、DOM对象

查找DOM节点：

（1） 通过id属性查找：document.getElementById()

（2） 通过标签的名字查找：document.getElementsByTagName()

（3） 通过name属性查找：document.getElementsByName()

（4） 通过class属性查找：document.getElementsByClassName

（5） title、body，由于html文档中只有一个，查找的时候，可以直接这样：

　　document.title ：title标签节点对象

　　document.body：body节点对象

 

DOM节点操作：

1、操作属性：

方法1：DOM对象.属性名

方法2：通过对象方法setAttribute、getAttribute、removeAttribute

2、操作内容

innerText，仅操作文字内容部分

innerHTML，可以操作标签中的html子标签

3、操作样式

方法1：DOM节点对象.style.css样式名，如果css样式是合成词，例如：font-size，background-color，设置css样式时，需要采用小驼峰的规则

方法2：通过className来设置、读取class属性的值

 

DOM节点类型：

DOM将html文档转换成JavaScript对象之后：

标签被当做标签节点，类型是1，

属性部分被当做属性节点，类型是2，

空白部分会被当做是空白节点，类型为3

 

DOM节点之间的关系：

说明：

由于节点之间如果有空白节点的话，不方便获得具体的节点，所以我们通常会先将空白节点删除，再查找

父子关系

childNodes：属性，获得节点下面的所有子节点

firstChild：属性，第一个子节点

lastChild：属性，最后一个子节点

parentNode：属性，获得当前节点的父节点

兄弟姐妹

previousSibling：当前节点的前一个同辈节点，哥哥、姐姐

nextSibling：当前节点的下一个同辈节点，弟弟、妹妹

 

DOM节点添加、删除：

1、添加节点分为2个步骤：

创建标签节点：document.createElement()

确定其位置：appendChild、insertBefore

 2、删除节点的语法：父节点.removeChild(子节点)

 

七、BOM对象

介绍：

BOM浏览器对象模型（Browser Object Model），该模型给我提供了这样的接口：通过JavaScript操作浏览器：

操作地址栏：使用location子对象

操作历史记录：使用history子对象
屏幕：screen

Width：屏幕分辨率宽度

Height：

availdWidth：可用部分宽度（不包括任务栏部分）

availHeight 可用部分宽度（不包括任务栏部分）

获得浏览器的信息：navigator子对象

浏览器的内核名称

浏览器版本

平台的信息

 

1、location子对象：

操作url地址栏，实现跳转

location.href='www.baidu.com'

 

2、history子对象：

操作历史记录（前提是：网页需要先有历史记录，才能通过JavaScript操作前进、后退）

通过JavaScript操作前进、后退，通过：

history对象的方法：

go(-1)，后退1步

go(2)，前进2步

go(0)，刷新页面

back():后退1步

forward()：前进1步

 

3、screen子对象：

获得屏幕分辨率的信息

width

height

availdWidth：可用宽度（去掉任务栏宽度）

availHeight：可用高度（去掉任务栏的高度）

 

4、navigator子对象：

获得浏览器的信息

appName： 返回浏览器内核名称

appVersion： 返回浏览器和平台的版本信息

platform： 返回运行浏览器的操作系统平台

userAgent： 返回由客户机发送服务器的 user-agent 头部的值

 

 八、window对象

介绍：

Window对象是前面我们总结的6个内置对象的父对象，也就是说前面所有内置的对象都是属于window的子对象

 

除了上述的对象、方法之外，window对象还给我们提供了如下方法：

1、confirm：弹出确认框，返回值：如果点击确认返回true，点击取消返回false

2、prompt()：弹出输入框，点击确认返回输入的内容，点击取消返回null

3、setInterval()、clearInterval()设置间隔执行（每隔多少时间执行），类似于定时器、定时炸弹。一旦开启之后，每隔一定的时间执行一次

4、setTimeout()、clearTimeout()设置延迟执行（延迟多少时间之后执行一次）