JavaScript笔记
声明：学习慕课网https://www.imooc.com/learn/10课程后进行的笔记摘抄整理。
1.变量必须要以字母、下划线或者美元符号开头，后面可以跟字母、下划线、美元符号和数字。
2.变量名区分大小写。
3.变量的声明
var 变量名； （如果要声明多个变量需要用逗号隔开）
4.变量的赋值
可以在声明的时候赋值
var 变量名=*** ；或者直接 变量名=***；
变量可以是数值、字符串、布尔值等；
如果变量储存的内容是字符串那么需要用“”将字符串括起来；
5.创建数组：
var 数组名=new Array( ); ----------------此语句声明了一个叫【数组名】的数组，可以在（）里面指定数组的长度，但即使指 定了长度，数组也是可以变长的，也就是说仍然可以将数组存储在规定长度之外。
如果创建的数组是空数组，没有值，如果将其输出，则显示undefined;
6.数组赋值
（1）一个一个成员赋值： eg: 数组名[0]="张三"；数组名[1]=2;
（2）创建数组时候赋值：
第一种方法：
var 数组名 =new Array(66,63,55,222,56); 数组成员之间用逗号隔开。
第二种方法：
var 数组名 = [66,63,55,222,56 ]; //直接输入一个数组，称“字面量数组”
7. 向数组中增加一个新变量
数组名[5]=88;//如果数组存储了5个数据，增加一个数据的操作；
8.使用数组元素
用索引号使用 eg：数组名[5]
数组属性：数组名.length //获得数组的长度；数组名.Length=10 //强制修改增大数组的长度
数组方法：
① concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法：arrayObject.concat( array1,array2,...,arrayN )
注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
我们创建一个数组，将把 concat() 中的参数连接到数组 myarr 中
② join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：arrayObject.join(分隔符)分隔符如果省略默认是逗号
③ reverse() 方法用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
④ slice() 方法可从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
2. 该方法并不会修改数组，而是返回一个子数组。
注意：1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
⑤ sort()方法使数组中的元素按照一定的顺序排列。
语法: arrayObject.sort(方法函数)
1.如果不指定<方法函数>，则按unicode码顺序排列。
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
按照数值的大小对数字进行排序，就必须使用一个排序函数
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
运行结果：
80,16,50,6,100,1
1,6,16,50,80,100
9. if语句
if（ 判断条件）
{
条件成立执行语句；
}
else if（判断条件）
{
条件成立执行语句；
}
else if（判断条件）
{
条件成立执行语句；
}
else if（判断条件）
{
条件成立执行语句；
}
else
{
否则 执行以下语句；
}
10. switch语句
switch( 表达式)
{
case 值1：//如果表达式的值是 值1 则执行代码块1
执行代码块1；break； //执行代码块1结束后break退出循环
case 值2： //如果表达式的值是 值2 则执行代码块2
执行代码块2；break；
case 值3：//如果表达式的值是 值3 则执行代码块3
执行代码块3；break；
………
default：
与case 值1、case 值2………case 值n 不同时执行的代码
}
switch必须赋初始值，值与每个case值匹配。
11.for循环
for ( 初识化变量；循环条件；循环迭代)
{
循环语句；
}
12.while循环
while（判断条件）
{
循环语句
}
13. do while 循环
do
{
循环语句
}
while (判断条件)；
14. Break; 跳出当前循环；
continue；跳出这一次循环接下来的操作，接着循环 。
15. 定义函数
function 函数名(参数1，参数2…..)//参数与参数之间用逗号隔开，参数不需要声明
{
函数体
return ***；//这条语句可以用来返回值
}
直接写函数名便可进行调用
16. 事件
（1）鼠标单击事件（onclick）：当网页上点击鼠标时，就会发生该事件，同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
eg:<input name="button" type="button" value="点击提交" οnclick="add2( )">
//当鼠标点击button按钮时，就会调用onclick()函数。
（2）鼠标经过事件（onmouseover：鼠标经过事件，当鼠标移到一个对象上时，该对象就出发onmouseover事件，并且执行onmouseover事件调用的程序。
eg:<input name="button" type="button" value="点击提交"οnmοuseοver="add2()">
//当鼠标经过“确定”按钮时，触发onmouseover事件，调用函数add2()；
（3）鼠标移开事件（onmouseout）:当鼠标移开当前对象时，执行onmouseout调用的程序
eg:<input name="button" type="button" value="登陆" οnmοuseοut="message()" >
//当鼠标移动到“登陆”按钮上，然后再移开时，触发onmouseout事件，调用函数message()
（4）光标聚焦事件（onfocus）当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
eg：<input name="username" type="teext" value="请输入姓名！"οnfοcus="message()">
//当将光标移到文本框内时，即焦点在文本框内，触发onfocus事件，并且调用函数message()
（5）失焦事件（onblur）onblur和onfocus是相对事件，当光标离开当前获得的聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
eg:<input name="username" type="text" value="请输入用户名" onblu="message（）">
//当前光标在用户文本框内的时候，触发onblur事件，同时执行调用函数message（）；
（6）内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
eg:<input name="username" type="text" value="请输入用户名"οnselect=“message”>
//当被选中文本框内的文字时，触发onselect事件。
（7）文本框内容改变事件（onchange）通过改变文本框的内容触发onchage事件，同时执行被调用的程序。
eg：<input name="username" type="text" value="请输入用户名"οnchange=“message()”>
//当改变用户文本框内的文字后，触发onchange事件
（8）加载事件 事件会在页面加载完成后，立即发生，同时执行被调用的程序。
加载页面时，触发事件，事件写在<body>标签内。
eg: <body onLoad=“message()”>
（9）卸载事件（onunload）
当用户退出页面时（页面关闭，页面刷新等），触发onUnload事件，同时执行被调用的程序
eg：window.οnunlοad=message() ; //当推出页面时候，调用函数message（）；
17. 对象
JavaScript中所有事物都是对象，如：字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作，例如：表单的“提交”，时间的“获取”
JavaScript提供多个内建对象，比如String\Date,Array等等，使用对象前先定义，如下使用数组对象。
（1）使用对象：
使用日期对象：
var 日期对象名= new Date( );
使用数组对象：
var 数组名 = new Array( ); //使用new关键字定义对象
或者 var 数组名 =[ ]；
（2）访问对象属性的语法：
数组名.数组属性 （用 · 来获取）eg:数组名.length 获取数组的长度
（3）访问对象的方法:
object.method() eg:使用string对象的toUpperCase()方法来将文本转换为大写：
var my="hello world";//创建一个字符串
var request=my.toUpperCase(); //使用字符串对象方法
上述代码执行后，request的值是：HELLO WORLD
18. Date 日期对象
日期对象可以存储任意一个日期，并且可以精确到毫秒数
（1）定义一个时间对象： var Udate=new Date();
注意：使用关键字new,Date()的首字母必须大写。
使Udate成为日期对象，并且已有初始值=当前时间（当前电脑系统时间）
（2） 如果要自定义初始值： var d=new Date(2012,10,1); var d=new Date('Oct 1,2012');
（3）访问方法语法： “<日期对象>.<方法>”
|
方法名称 |
功能描述 |
|
get/setDate() |
返回/设置日期 |
|
get/setFullYear() |
返回/设置年份，用四位数表示 |
|
get/setYear() |
返回/设置月份 |
|
get/setMonth() |
返回/设置月份 0：一月….11：十二月，所以加一 |
|
get/setHours() |
返回/设置小时，24小时制 |
|
get/setMinutes() |
返回/设置分钟数 |
|
get/setSeconds() |
返回/设置秒钟数 |
|
get/setTime() |
返回/设置时间（毫秒为单位） |
getDay()返回的是0-6的数字，0表示星期天，如果要返回相对应的“星期“通过数组完成，getDay返回数组的索引确定星期几。
get/setTime()返回/设置时间，单位毫秒数。
19. 字符对象
（1）使用字符串对象：
直接赋值法：eg: var mystr="I love JavaScript!"
（2）访问字符串对象的属性length：
StringObject.length;//返回该字符串的长度
（3）访问字符串对象的方法：
①toUpperCase( )方法来将字符串所有小写字母转换为大写。
② toLowerCase( )方法来将字符串所有大写字母转换成小写。 语法：stringobject.toLowerCase();
③charAt( )方法可以返回指定位置的字符 语法 ：stringObject.charAt( index )
注意：
1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
3.一个空格也算一个字符。
④indexOf( )方法可以返回某个指定的字符串值在字符串中首次出现的位置。
语法stringobject.indexOf(substring,startpos)
参数说明： substring:必须，是规定需检索的字符串值
startpos:可选的整数参数，规定在字符串中开始检索的位置，它的合法取值使0到
stringobject.length-1，如果省略，则从字符串的首字符开始检索。
indexOf是区分大小写的，如果要检索的字符串没有出现，则该方法返回-1。
⑤split( )方法将字符串分割成为字符串数组，并返回此数组
语法： stringobject.split(separator,limit)
参数说明： separate：必须。从（该参数指定的地方->separate）分割stringObject
limit:可选参数。分割的次数，如果设置该参数，返回的子串不会多于这个参数指定 的数组，如果没有此参数为不限制次数。
如果把空字符串用作separate，那么stringobject中的每个字符之间都会被分割
⑥substring()方法用于提取字符串中介于两个指定下标之间的字符。 语法：stringObject.substring( startPos,stopPos )
参数说明： startPos：必须，一个非负的整数，表示开始位置
stopPos：可选，一个非负的整数，结束位置，若省略，那么返回的字串会一直到达字符串对象的结尾。
注意：
1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减 start。
2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
⑦substr()方法从字符串中提取从startPos位置开始的指定数目的字符串 语法： stringObject.substr( startPos,length )
参数说明： startPos：必须，要提取的字串的起始位置。必须是数值。
Length：可选。提取字符串的长度，如果省略，返回从起始到字符串末尾的字符
注意：
1.如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
2.如果startPos为负数且绝对值大于字符串长度，startPos为0。
20. Math对象
（1）Math 对象属性：
（2）Math 对象方法：
（3）使用Math对象的属性和方法：
eg:
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与 Date,String对象的区别。
①ceil() 方法可对一个数进行向上取整。
语法:Math.ceil(x)
参数x: 必须有且必须为一个数值
注意：它返回的是大于或等于x，并且与x最接近的整数。
②floor() 方法可对一个数进行向下取整。
语法: Math.floor(x)
注意：返回的是小于或等于x，并且与 x 最接近的整数。
③round() 方法可把一个数字四舍五入为最接近的整数。
语法: Math.round(x) x必须是数字
④random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：Math.random();
注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。
21.window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
22. JavaScript 计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
（1）计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
（2）计时器方法：
计时器setInterval( 代码，交互时间 )；从执行时，从载入页面后每隔指定的时间执行代码
交互时间，周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）
语法： setInterval（代码，交互时间）；
eg：调用函数格式（假设有一个clock（）函数）： setInterval(clock,1000)或者setInterval（“clock()”,1000）;
23. History 对象
语法： window.history.[属性|方法] 注意，window.可以省略
History对象属性： length: 返回浏览器历史列表中的URL数量
History对象方法： back()加载history列表中的前一个URL
forword（）加载history列表中的下一个URL
go(number)加载history列表中的某个具体的页面
number指的是返回当前页面之后浏览过的第三个历史页面。
24. location对象 用于获取或者设置窗体的URL，并且可以用于解析URL 语法： location.[属性|方法]
location 对象属性：
location 对象方法:
25. Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:
26. userAgent
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法
navigator.userAgent
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器)
27. screen对象用于获取用户的屏幕信息。
语法： window.screen.属性
（1）对象属性:
（2）屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
（3）屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。
28. HTML文档可以说由节点构成的集合
DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
节点属性:
遍历节点树:
以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
DOM操作:
注意:前两个是document方法。
29. getElementsByName()方法 返回带有指定名称的节点对象的集合。
语法： document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
区别getElementByID,getElementsByName,getElementsByTagName
方法总结如下:
注意：方法区分大小写
30. getAttribute()方法 通过元素节点的属性名称获取属性的值。
语法： elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
31. setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法： elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
32. 节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
33. 访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
34. 访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。
35. 访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
36. 插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法: appendChild(newnode)
参数: newnode：指定追加的节点。
37. 插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法: insertBefore(newnode,node);
参数: newnode: 要插入的新节点。
node: 指定此节点前插入节点。
38. 删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法: nodeObject.removeChild(node)
参数: node ：必需，指定需要删除的节点。
39. 替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法： node.replaceChild (newnode,oldnew )
参数： newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
40. 创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
参数: tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
41. 创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)
参数：data : 字符串值，可规定此节点的文本。
42. 浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
43. 网页尺寸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;
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
44. 网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
45.网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
1. 区分大小写
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。