JavaScript学习资料整理

1、字符集 ................................................................................................................................ 2 2、 注释 ................................................................................................................................... 2 3、 直接量 ............................................................................................................................... 2 二、 类型、值、函数和变量 ......................................................................................................... 3

1、数据类型 ............................................................................................................................ 3 2、 日期和时间 ....................................................................................................................... 3 3、 转义字符 ........................................................................................................................... 3 4、 字符串的使用 ................................................................................................................... 4 6、输出内容（document.write） ...................................................................................... 5 7、警告（alert 消息对话框） .............................................................................................. 6 8、确认（confirm 消息对话框） ........................................................................................ 6 9、提问（prompt 消息对话框） ........................................................................................ 7 10、打开新窗口（window.open） .................................................................................... 7 11、关闭窗口（window.close） ........................................................................................ 8 12、通过ID获取元素 ............................................................................................................ 8 13、innerHTML 属性 ........................................................................................................... 9 14、改变 HTML 样式 ......................................................................................................... 10 15、显示和隐藏（display属性） ...................................................................................... 11 16、数组 ................................................................................................................................ 12 三、 事件....................................................................................................................................... 13

1、鼠标经过事件（onmouseover） ................................................................................ 13

2、鼠标移开事件（onmouseout） .................................................................................. 14 3、光标聚焦事件（onfocus） ........................................................................................... 15 4、失焦事件（onblur） ...................................................................................................... 16 5、内容选中事件（onselect） .......................................................................................... 17 6、文本框内容改变事件（onchange）............................................................................ 18 7、加载事件（onload） ..................................................................................................... 19 7、卸载事件（onunload） ................................................................................................ 20 四、 内置对象 ............................................................................................................................... 22

1、Date 日期对象 ............................................................................................................... 22 2、提取字符串substring() ................................................................................................. 24 3、Location对象 ................................................................................................................. 25 4、屏幕分辨率的高和宽 ...................................................................................................... 26 5、屏幕可用高和宽度 .......................................................................................................... 26

一、JavaScript基本介绍

1、字符集

区分大小写，即关键字、变量、函数名和所有的标识符都必须采取一致的大小写形式。 2、注释

JavaScript支持两种格式的注释。在行尾”//”之后的文本都会被JavaScript忽略掉。此外，在”/*”和”*/”之间的文本也会当做注释。这种注释可以跨行书写，但不能有嵌套的注释。 3、直接量

指的是程序中直接使用的数据值。比如： 12 //数字 1.2//小数

“hello world” //字符串文本

。。。。。。。。

二、类型、值、函数和变量

1、数据类型

数据类型分为原始类型和对象类型。原

始类型包括数字、字符串和布尔值。JavaScript有两个特殊的原始值：null(空)和underfined(未定义)，它们不是数字、字符串和布尔值。

对象是属性的集合，每个属性都由“名/值对”构成。

变量可以被赋予任何类型的值。使用var关键字来声明变量。不在任何函数内声明的变量称作全局变量，它在JavaScript程序中的任何地方都是可见的。在函数内声明的变量具有函数作用域，并且只在函数内可见。

JavaScript预定义了全局变量Infinity和NaN,用来表示正无穷大和非数字值。

2、日期和时间

JavaScript语言核心包括Date()构造函数，用来创建表示日期和时间的对象。 例：

var later = new Date(2011,0,1,17,10,30)； //2011年1月1日 当地时间5:10:30pm later.getFullYear() //2011

later.getMonth() //0:从1开始计数的月份 later.getDate() //1：从1开始计数的天数

later.getDay() //5：得到星期几，0代表星期日，5代表星期一 later.getHours() //当地时间17:5pm

later.getUTCHours() //使用UTC表示小时的时间，基于时区

3、转义字符 \\n 换行符 \\v 垂直制表符

\\f 换页符 \\” 双引号

\\’ 撇号或者单引号 \\\\ 反斜线

\\xXX 由两位十六进制书XX指定的Latin-1字符 \ 由四位十六进制书XXXX指定的Unicode字符

4、字符串的使用

5、变量

什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某

些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。变量是无所不能的容器，你可以把任何东西存储在变量里，如数值、字符串、布尔值等。

定义变量使用关键字var,语法如下： var 变量名

变量名可以任意取名，但要遵循命名规则:

1.变量必须使用字母、下划线(_)或者美元符($)开始。

2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。 3.不能使用JavaScript关键词与JavaScript保留字。

变量要先声明再赋值，如下： var mychar;

mychar=\"javascript\"; var mynum = 6; 变量可以重复赋值，如下：

var mychar; 注意:

1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。 2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

mychar=\"javascript\"; mychar=\"hello\";

6、输出内容（document.write）

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输

出内容。

第一种:输出内容用“”括起，直接输出\"\"号内的内容。

第二种:通过变量，输出内容

第三种:输出多项内容，内容之间用+号连接。

第四种:输出HTML标签，并起作用，标签使用“”括起来。

7、警告（alert 消息对话框）

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如

果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。 alert输出内容，可以是字符串或变量，与document.write 相似。 语法:

alert(字符串或变量);

8、确认（confirm 消息对话框）

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。 语法:

confirm(str); 参数说明:

str：在消息对话框中要显示的文本返回值: Boolean值 返回值:

当用户点击\"确定\"按钮时，返回true 当用户点击\"取消\"按钮时，返回false

注: 通过返回值可以判断用户点击了什么按钮

9、提问（prompt 消息对话框）

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

语法:

prompt(str1, str2);

参数说明：

str1: 要显示在消息对话框中的文本，不可修改 str2：文本框中的内容，可以修改

返回值:

1. 点击确定按钮，文本框中的内容将作为函数返回值 2. 点击取消按钮，将返回null

10、打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。窗口名称：可选参数，被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。

2.\"_top\"、\"_blank\"、\"_selft\"具有特殊意义的名称。 _blank：在新窗口显示目标网页 _self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。 4.name 不能包含有空格。参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表:

例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

注意：运行结果考虑浏览器兼容问题。

11、关闭窗口（window.close）

close()关闭窗口 用法：

window.close(); //关闭本窗口 或

<窗口对象>.close(); //关闭指定的窗口

例如:关闭新建的窗口。

注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。

12、通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯

一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。 语法:

document.getElementById(“id”)

结果为null或[object HTMLParagraphElement]

若要得到标签中的值，则需要改为：document.getElementById(“id”).innerHTML;

13、innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。 语法:

Object.innerHTML。 注意:

1.Object是获取的元素对象，如通过document.getElementById(\"ID\")获取的元素。 2.注意书写，innerHTML区分大小写。

我们通过id=\"con\"获取

元素，并将元素的内容输出和改变元素内容，代码如下:

结果:

14、改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？ 语法:

Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById(\"id\")获取的元素。 基本属性表（property）:

注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。 看看下面的代码:

改变

元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

Hello World!

结果:

15、显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。 语法：

Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById(\"id\")获取的元素。 value取值:

看看下面代码:

16、数组

JavaScript数组的length属性是可变的。 数组随元素的增加，长度也会改变，如下:

var arr=[98,76,54,56,76]; // 包含5个数值的数组 document.write(arr.length); //显示数组的长度5 arr[15]=34; //增加元素，使用索引为15,赋值为34 alert(arr.length); //显示数组的长度16 二维数组

一维数组，我们看成一组盒子，每个盒子只能放一个内容。 一维数组的表示: myarray[ ]

二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。 二维数组的表示: myarray[ ][ ]

注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。 1）二维数组的定义方法一

var myarr=new Array(); //先声明一维

for(var i=0;i<2;i++){ //一维长度为2 myarr[i]=new Array(); //再声明二维 for(var j=0;j<3;j++){ //二维长度为3

myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j } }

注意: 关于for 循环语句，请看第四章4-5 。 将上面二维数组，用表格的方式表示:

2）二维数组的定义方法二

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]

3）赋值

myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。 说明: myarr[0][1] ,0 表示表的行，1表示表的列。

三、事件

1、鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

现实鼠标经过\"确定\"按钮时，触发onmouseover事件，调用函数info()，弹出消息框，代码如下:

运行结果:

2、鼠标移开事件（onmouseout）

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

当把鼠标移动到\"登录\"按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:

运行结果:

3、光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

onfocus 是元素『获取焦点事件』. 光标停留只能触发 mouseover『鼠标移入事件』, 并不能触发『获取焦点事』, 首先, 有『获取焦点事件』的元素有 a, input , button 等. 并不是所有的元素都有这个事件；其次, 触发这个事件的动作不仅仅是鼠标点击. 还包括 tab 键切换等动作.

运行结果：

4、失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

运行结果：

5、内容选中事件（onselect）

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

如下代码,当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。

运行结果：

6、文本框内容改变事件（onchange）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

如下代码,当用户将文本框内的文字改变后，失去聚焦（点击鼠标按钮），弹出对话框“您改变了文本内容！”。

运行结果：

对比：

要文本改变就立即弹出对话框就要用onkeydown事件。这个onchange按我的理解准确的说是指文本域内容发生改变后才触发的。你在输入时，文本域是“正在改变中”，办法完毕blur后才算是改变后。

7、加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。 注意：1. 加载页面时，触发onload事件，事件写在标签内。 2. 此节的加载页面，可理解为打开一个新页面时。

如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

运行结果：

7、卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

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

如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。

运行结果：（IE浏览器）

编程练习：

+

- * /

四、内置对象、DOM对象

1、Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。 定义一个时间对象 :

var Udate=new Date();

注意:使用关键字new，Date()的首字母必须大写。

使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。 如果要自定义初始值，可以用以下方法：

var d = new Date(2012, 10, 1); //2012年10月1日 var d = new Date('Oct 1, 2012'); //2012年10月1日 我们最好使用下面介绍的“方法”来严格定义时间。 访问方法语法：“<日期对象>.<方法>” Date对象中处理时间和日期的常用方法：

返回星期方法:

getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:

注意：以上代码是在2014年3月7日，星期五运行。 结果: 5

今天是：星期五

返回/设置时间方法:

get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

如果将目前日期对象的时间推迟1小时，代码如下:

结果:

当前时间：Thu Mar 6 11:46:27 UTC+0800 2014 推迟一小时时间：Thu Mar 6 12:46:27 UTC+0800 2014 注意:1. 一小时 60 分，一分 60 秒，一秒 1000 毫秒

2. 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”

2、提取字符串substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。 语法:

stringObject.substring(starPos,stopPos)

参数说明:

注意：

1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。

2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。 3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。 使用 substring() 从字符串中提取字符串，代码如下： 运行结果: JavaScript love

3、Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。 语法:

location.[属性|方法]

location对象属性图示:

location 对象属性：

location 对象方法:

4、屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意:

1.单位以像素计。

2. window.screen 对象在编写时可以不使用 window 这个前缀。 我们来获取屏幕的高和宽，代码如下:

5、屏幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。 注意:

不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度，代码如下：

注意:根据屏幕的不同显示值不同。

6、getElementsByName()方法

返回带有指定名称的节点对象的集合。 语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。 注意:

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。 看看下面的代码:

运行结果:

7、getElementByID,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。 2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(\"小孩\")。 把上面的例子转换到HTML中，如下:

音乐 input标签就像人的类别。 name属性就像人的姓名。 id属性就像人的身份证。 方法总结如下:

注意：方法区分大小写

通过下面的例子(6个name=\"hobby\"的复选项，两个按钮)来区分三种方法的不同: 音乐 登山 游泳 阅读 打球 跑步

1. document.getElementsByTagName(\"input\")，结果为获取所有标签为input的元素，共8个。 2. document.getElementsByName(\"hobby\")，结果为获取属性name=\"hobby\"的元素，共6个。 3. document.getElementById(\"hobby6\")，结果为获取属性id=\"hobby6\"的元素，只有一个，\"跑步\"这个复选项。 例：

8、getAttribute()方法

通过元素节点的属性名称获取属性的值。 语法：

elementNode.getAttribute(name) 说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。 2. name：要想查询的元素节点的属性名字 看看下面的代码，获取h1标签的属性值：

运行结果:

h1标签的ID ：alink

h1标签的title ：getAttribute()获取标签的属值

9、节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ： 1. nodeName : 节点的名称 2. nodeValue ：节点的值 3. nodeType ：节点的类型

1）、nodeName 属性: 节点的名称，是只读的。 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document 2）、nodeValue 属性：节点的值

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

3）、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9

10、访问父节点parentNode

获取指定节点的父节点 语法：

elementNode.parentNode 注意:父节点只能有一个。

看看下面的例子,获取 P 节点的父节点，代码如下:

运行结果:

parentNode 获取指点节点的父节点 DIV 访问祖节点:

elementNode.parentNode.parentNode 看看下面的代码:

运行结果:

parentNode获取指点节点的父节点 DIV

注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

11、插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。 语法:

appendChild(newnode) 参数:

newnode：指定追加的节点。

我们来看看，div标签内创建一个新的 P 标签，代码如下:

运行结果:

HTMLJavaScriptThis is a new p

12、插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。 语法:

insertBefore(newnode,node); 参数:

newnode: 要插入的新节点。 node: 指定此节点前插入节点。

我们在来看看下面代码，在指定节点前插入节点。

运行结果:

This is a new p JavaScript HTML

注意: otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);

13、删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。 语法:

nodeObject.removeChild(node) 参数:

node ：必需，指定需要删除的节点。 我们来看看下面代码，删除子点。

运行结果:

HTML删除节点的内容: javascript

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。 如果要完全删除对象，给 x 赋 null 值，代码如下:

14、替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 语法：

node.replaceChild (newnode,oldnew ) 参数：

newnode : 必需，用于替换 oldnew 的对象。 oldnew : 必需，被 newnode 替换的对象。 我们来看看下面的代码:

效果: 将文档中的 Java 改为 JavaScript。 注意:

1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。 2. newnode 必须先被建立。

15、创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法：

document.createElement(tagName) 参数:

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

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

我们来创建一个按钮，代码如下：

效果：在HTML文档中，创建一个按钮。

我们也可以使用setAttribute来设置属性，代码如下：

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。 当点击这个文本框时，会弹出对话框“This is a text!”。

16、网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。 一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。 二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。 三、浏览器兼容性

var w=document.documentElement.scrollWidth || document.body.scrollWidth;

var h=document.documentElement.scrollHeight || document.body.scrollHeight; 注意:区分大小写