【常用函数使用总结】js

来源：互联网发布：qt usb通信 linux api 编辑：程序博客网时间：2024/06/14 03:05

参考手册：http://www.w3school.com.cn/jsref/dom_obj_document.asp

绿色字：思路或写法

蓝色字：关键地方或重点

红色字：俩个差不多的，标一个字符方便区分和观看

橙色字：注意

语言基础

数据类型：

示例：

类型转换：

伪对象概念：

javascript是一门很有意思的语言，即便是基本类型，也是伪对象，所以他们都有属性和方法。
变量a的类型是字符串，通过调用其为伪对象的属性length获取其长度

作用域：

1、定义在函数外面，就是全局变量

2、定义在函数内部，就是局部变量；只在此函数中生效，其他函数或在外部不能访问

多种形态：

+ 具备多态特征
当两边都是数字的时候，表现为算数运算符
当任意一边是字符串的时候，表现为字符串连接符

错误处理：

打印之殇：

事件：

在手册中的位置：和感觉差不多

1、onclick=”test()” //单击事件

2、onmouseover=”test()” //鼠标放上事件

3、onmouseout = “test()” //鼠标移开事件

4、onfocus=”test()” //鼠标聚焦事件

5、onblur=”test()” //鼠标失焦事件

6、onload=”test()” //加载事件

在页面加载完成后，立即发生，同时执行被调用的程序

7、onunload=”test()” //卸载事件

关闭浏览器标签的弹出事件

注意：不同浏览器对onunload事件支持不同

8、onchange=”test()” //内容（文件）改变事件

9、onselect=”test()” //内容（文本）选中事件，事件本身相当于是属性节点，可操作文本节点，需写在元素节点上

10、onpopstate //浏览器后退按钮时触发的事件

思路：这些事件相当于是html中元素的属性(也就是说相当于属性节点)，需写在元素节点上

js对象

JavaScript中的对象是有着属性和方法的一种特殊数据类型。

技巧：带括号的是方法（方法一般需要传参，参数写括号里）

不带括号的是属性。

对象的属性：对象的某些特定性质（如长度等）

对象的方法：对象上执行的动作（如表单的提交Submit，时间的获取getYear等）

JavaScript 提供多个内建对象，比如String、Date、Array等等，使用对象前先定义（其实有些不new直接使用也可以，只是如时间不new不方便进行操作，如设置新时间，需要根据当前时间对象来进行操作），如下使用数组对象：

第一步：先定义对象

var object =new Array(); //使用new关键字定义对象或者 var object =[];

第二步：操作对象

访问属性或访问方法，使用点.进行调用（如 object.join();

书写思路：对象（此处的对象是new完之后，赋给的变量）.split();）

字符串对象函数

在手册中的位置：注意：不需要创建（new）

1、对象.split(separator,limit); //把字符串分隔成数组。

参数：separator 以什么分割；limit 分割次数

注意：用空字符串 ("") 进行分割，每个字符之间都会被分割

2、对象.splice(); //截取字符串

3、对象.toUpperCase(); //转换为大写

4、对象.toLowerCase(); //转换为小写

5、对象.charAt(); //返回执行位置的字符串

参数：下标数字

注意：1.字符串中第一个字符的下标是0。最后一个字符的下标为字符串长度减一（string.length-1）。2.如果参数index不在0与string.length-1之间，该方法将返回一个空字符串。

6、对象.indexOf(); //首次出现的位置。要检索的字符串值没有出现，则该方法返回 -1。

7、对象.substring(); //根据指定下标截取字符串

8、对象.substr(); //根据执行下标截取字符串，第2个参数为截取长度

9、对象.length; //获取字符串的长度

数学对象函数

在手册中的位置：注意：不需要创建（new）

1、Math.ceil(); //向上取整

2、Math.floor(); //像下取整

3、Math.round(); //四舍五入

4、Math.random(); //返回0-1之间的随机数。Math.random()*10，0-10之间的随机数

数组对象函数

在手册中的位置：注意：不需要创建（new）

1、对象.length； //数组长度

2、对象.sort(可以指定排序方法); //排序（参考慕课js进阶3-8和7-22）。

注意：1.如果不指定<排序方法函数>，则按unicode码顺序排列。

2.如果指定<排序方法函数>，则按<排序方法函数>所指定的排序方法排序

3、对象.concat(); //将多个数组合并成1个新数组。

注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

4、对象.join(); //使用分隔符，转换成字符串

5、对象.push(); //向数组的末尾添加一个或多个元素，并返回新的长度

示例：

5、对象.reverse(); //倒序输出数组。

注意：该方法会改变原来的数组，而不会创建新的数组。

6、对象.slice(); //截取数组中的元素。

时间日期对象函数

在手册中的位置：注意：需要new

思路：先获取对象，后设置（操作函数）

1、new Date(); //返回的是星期、月、日、年、时、分、秒、时区。

注意：(火狐浏览器)不同浏览器，时间格式有差异

2、对象.getFullYear(); //获取年份

3、对象.setFullYear(); //设置年份

4、对象.getMonth(); //获取月份(0 ~ 11)

5、对象.setUTCMonth(); //设置月份(0 ~ 11)

6、对象.getDav(); //获取星期(0 ~ 6)

7、对象.getDate(); //获取一个月中的某一天 (1 ~ 31)

8、对象.setUTCDate(); //设置一个月中的某一天 (1 ~ 31)

9、对象.setTime(); //设置时间

10、对象.toString(); //把Date对象转换成字符串

全局函数

在手册中的位置：

1、number(); //转化成数字

2、parseInt(); //将字符串解析（转化）为数字

3、parseFloat() //解析一个字符串并返回一个浮点数。

浏览器window（BOM）

写法：一般都是window.xxx

window对象：

在手册中的位置：

window对象是BOM的核心，window对象指当前的浏览器窗口。

1、window.open(); //打开一个新窗口（除了它，其他window都可以省略）

2、

历史记录：

在手册中的位置：

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：window.history.[属性|方法]

注意：window可以省略。

location：

在手册中的位置：

获取和设置关于url的一些信息

location.reload(); //重新加载此文档，效果如同刷新按钮

ngavigatir:

在手册中的位置：

关于浏览器的信息：通常用于检测浏览器与操作系统的版本

screen:

在手册中的位置：

获取用户显示器信息

HTML DOM对象

DOM（文档对象模型）是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。

示例：有dom的是这样

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1.元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2.文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

DOM：

在手册中的位置：注意：属于window对象(window可以不写)

1、window.document.getElementById(); //返回一个对象的引用,只有一个

2、window.docuemnt.getElementsByName(); //返回对象的集合（类似数组，可以像数组一样访问）因为同一个name名的属性可能有多个（参考慕课9-2）

3、window.document.getElementsByTagName(); //返回标签名（就是html的所有标签如input、select、p）对象的集合。可以像数组一样访问

2和3的区别是：2是操作标签中的neme属性（属性节点）。3是操作标签（元素节点）

Element:

在手册中的位置：

1、getAttribute(); //获取元素节点中属性的值

2、setAttribute(); //设置元素节点中属性的值（无该属性，则新建）

3、childNodes //获得子节点

4、firstChild //访问第一个子节点。

注意：属性返回‘childNodes’数组的第一个子节点（相当于是childNodes[0]）。如果选定的节点没有子节点，则该属性返回 NULL。

5、lastChild //访问最后一个子节点

6、parentNode //访问父节点

7、nextSibling //访问，同一级别中，某个节点的下一个节点。

注意：无此节点，则该属性返回 null

8、previousSibling //访问，同一级别中，某个节点的上一个节点。

注意：无此节点，则该属性返回 null

9、nodeName;nodeValue;noneType; //节点属性

9.1、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName与标签名相同
2. 属性节点的 nodeName是属性的名称
3. 文本节点的 nodeName永远是#text
4. 文档节点的 nodeName永远是#document

9.2、nodeValue 属性：节点的值

1. 元素节点的 nodeValue是 undefined或null
2. 文本节点的 nodeValue是文本自身
3. 属性节点的 nodeValue是属性的值

9.3、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

思路：先获得对象，在获得节点（子、父、兄弟...），在操作节点（获取节点值、类型、名称）

10、appendChild(); //【增】插入节点（思路：先创建才可插入）

11、insertBefore(newnode,node); //【增】在已有的子节点前插入一个新的子节点

12、removeChild(node); //【删】从子节点列表中删除某个节点。

注意：如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

参数：node //必须有，要删除的节点

13、replaceChild(newnode,oldnew); //【改】替换元素节点

参数：

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象

14、createElement(“tagName”); //创建元素节点，返回一个element对象

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中

15、createTextNode(data); //创建文本节点，返回新创建的text文本

参数：

data : 字符串值，可规定此节点的文本

16、className //获取或设置class属性值

17、获得浏览器窗口的尺寸，不包括浏览器上部工具栏和滚动条

18、网页尺寸

HTML对象

在手册中的位置：

思路：通过操作属性来达到某种特殊效果（如慕课9-4全选的checked属性）。

阅读全文

0 0