JavaScript基础知识总结

使用JS增加静态页面的动态效果。

JS能做什么？

1. 增强页面动态效果
2. 实现页面与用户之间的实时、动态交互 

什么是变量？

变量是可变的量。变量是用于存储某种/某些数值的存储器。

JS中变量命名是任意的，但仍有一些规则：

1. 必须以字母、下划线、美元符号开头，后面可以跟字母、下划线、美元符号和数字
2. 变量区分大小写
3. JS的关键字和保留字不容许做变量名

关键字：break  else  new  var  case  finally  return  void  catch  for  switch  while  default  if  throw  delete  in  try  do  instanceof  typeof
保留字：abstract  enum  int  short  boolean  export  interface  static  byte  extends  long  super  char  final  native synchronized  class  float  package  throws  const  goto  private  transient  debugger  implements  protected  volatile
double  import  public

操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

什么是数组？

数组变量可以存储多个数据。每个数据值都有一个索引号，索引号从0开始。
创建数组
var myArray = new Array();该语句意思是创建一个新的空数组存储到一个叫myArray的变量中。
数组赋值
数组存储的数据可以是任何类型（数字、字符、布尔值等）
方式一：var myArray = new Array(100,94,87);
方式二：var myArray = [100,94,87];

数组属性length
数组的一个属性length表示数组的长度，也就是数组中数据的个数。

一维数组
上面讲的都是一维数组，只能存储一个类型的多个数据内容。

二维数组
二维数组可以存储多个类型的多个数据内容。
创建二维数组
方式一：

var myArray = new Array();    //先声明一维数组
for(var i=0; i<2; i++){        //定义一维数组长度为2
    myArray[i] = new Array();    //再声明二维数组
    for(var j=0; j<3; j++){        //定义二维数组长度为3
        myArray[i][j] = i+j;    //赋值，每个数组元素的值为i+j
    }
}

方式二：

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

什么是函数？

JS中，函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

什么是事件？

事件是可以被JS侦测到的行为。网页中的每个元素都可以产生某些触发JS函数或程序的事件。

鼠标单击事件onclick

<script>
function add(){
var num1,num2,sum;
num1=5;
num2=6;
sum=num1+num2;
document.write("两数之后"+sum);
}
</script>
<div onclick="add()">测试</div>

鼠标经过事件onmouseover

鼠标移开事件onmouseout

文本框内容改变事件onchange

文本框内容被选中事件onselect

光标聚集onfocus

光标离开onblur

网页导入onload

关闭网页onunload

什么是对象？

JS中所有事物都是对象，每个对象都带有属性和方法。
对象的属性：反映该对象某些特定的性质的。
对象的方法：能够在对象上执行的动作。

JS中内置的对象

Date日期对象
日期对象可以存储任意一个日期，能精确到毫秒数
var Udate = new Date();
返回/设置日期                           get/setDate
返回/设置年份，四位数表示     get/setFullYear()
返回/设置年份                           get/setYear()
返回/设置月份（一月为0递推）get/setMonth()
返回/设置小时                           get/setHours()
返回/设置分钟                           get/setMinutes()
返回/设置秒钟                           get/setSeconds()
返回/设置时间（毫秒单位）     get/setTime()

返回星期方法getDay()（0为星期天递推）

var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]；
var mynum=mydate.getDay();
document.write(mydate.getDay());
document.write("Today is"+weekday[mynum]);

String字符串对象

stringObject.length，返回字符串的长度

var mystr="Hello everyone!";
var len=mustr.length;
confrime(len);

toUpperCase()方法，将小写字符串转换为大写
toLowerCase()方法，将大写字符串转换为小写

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

indexOf(substring,startpos)方法，返回指定的字符串首次出现的位置

• 该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
• startpos是可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
• 如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

split(separator,limit)方法，将字符串分割为字符串数组，并返回此数组。

• separator参数是必须的，意思是从该参数指定的地方分割stringObject
• limit参数不是必须的，意思是可分割的次数

var mystr="www.baidu.com";
document.write(mystr.split("."));

substring(startPos,stopPos)方法，提取字符串中介于两个指定下标之间的字符。

• startPos参数是必须的，这是一个非负的整数，开始的位置。
• 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
• 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
• 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

var mystr="Hello World!"；
document.write(mystr.substring(6)+ "<br />");
document.write(mystr.substring(0,5) );

substr(startPos,length)方法，从字符串中提取从startPos位置开始的指定数目的字符串。

• 如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
• 如果startPos为负数且绝对值大于字符串长度，startPos为0。

Math对象
Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。

ceil()方法，       对一个数向上取整
floor()方法，     可对一个数进行向下取整。
round()方法，   可把一个数字四舍五入为最接近的整数。
random()方法，可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。

数组对象的方法
concat()，连接两个或更多的数组，并返回一个新的数组，不改变原来的数组。

var myarr=["1","2","3"];
document.write(myarr.concat(4,5));
document.write(myarr);

join(separator)，把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
separator参数是不必须的，意思是指定要使用的分隔符，如果省略该参数，则使用逗号作为分隔符。

pop()        删除并返回数组的最后一个元素
push()      向数组的末尾添加一个或更多元素，并返回新的长度
reverse()  颠倒数组中的元素的顺序，该方法会改变原来的数组，而不会创建新的数组。

shift()        删除并返回数组的第一个元素
slice(star,end)  从某个已有的数组返回选定的元素

• star是必须的参数。这会返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
• 该方法并不会修改数组，而是返回一个子数组。
• 可使用负值从数组的尾部选取元素。
• 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

sort(方法函数)，对数组的元素进行排序

• 如果不指定<方法函数>，则按unicode码顺序排列。
• 如果指定<方法函数>，则按<方法函数>所指定的排序方法排序，但一定是函数。

splice()                删除元素，并向数组添加新元素
toSource()           返回该对象的源代码
toString()             把数组转化为字符串，并返回结果
toLocaleString()  把数组转化为本地字符串，并返回结果
unshift()               把数组的开头添加一个或多个元素，并返回新的长度
value()                 返回数组对象的原始值

window对象

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

window对象方法：
alert()显示带有一段消息和一个确认按钮的警告框
prompt()显示可提示用户输入的对话框
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
open()打开一个新的浏览器或查找一个已命名的窗口
close(）关闭浏览器窗口
print()打印当前窗口的内容
focus()把键盘焦点基于一个窗口
blur()把键盘焦点从顶层窗口移开
moveBy() 可相对窗口的当前坐标把它们移动指定的像素
moveTo()把窗口的左上角移动到一个指定的坐标
resizeBy()按照指定的像素调整窗口的大小
resizeTo()把窗口的大小调整到指定的宽度和高度
scrollBy()按照指定的像素值来滚动内容
scrollTo()把内容滚动到指定的坐标
setInterval()每隔指定的事件执行代码
setTimeout()在指定的延迟时间之后来执行代码
clearInterval()取消setInterval()的设置
clearTimeout()取消setTimeout()的设置

JavaScript 计时器对象

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：

• 一次性计时器：仅在指定的延迟时间之后触发一次。
• 间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法:
setInterval()每隔指定的事件执行代码
clearInterval()取消setInterval()的设置
clearTimeout()取消setTimeout()的设置
setTimeout()在指定的延迟时间之后来执行代码

计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:setInterval(代码,交互时间);
参数说明：

1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：clearInterval(id_of_setInterval)
参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。

计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:setTimeout(代码,延迟时间);
参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:clearTimeout(id_of_setTimeout)
参数说明:id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的
history对象与特定的window对象关联。
语法：window.history.[属性|方法]
注意：window可以省略。

History对象属性
length,返回浏览器历史列表中URL数量

History对象方法
back(),加载history列表中的前一个URL
forward(),加载history列表中的下一个URL
go(),加载history列表中的某个具体的页面

Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:location.[属性|方法]

location对象属性
hash,设置或返回从#开始的URL
host,设置或返回主机名和当前URL的端口号
hostname,设置或返回当前URL的主机名
href,设置或返回完整的URl
pathname,设置或返回当前的URL的路径部分
port,设置或返回当前的URL端口号
protocol,设置或返回当前URL的协议
search,设置或返回从?开始的URL

location对象方法
assign(),加载新的文档
reload(),重新加载当前文档
replace(),用新的文档替换当前文档

Navigator对象
navigator对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本

Navigator对象的属性
appCodeName,浏览器代码名的字符串表示
appName,返回浏览器的名称
appVersion,返回浏览器的平台和版本信息
platform,返回运行浏览器的操作系统平台
userAgent,返回由客户发送服务器的user-agent头部的值

userAgent返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

screen对象
screen对象用于获取用户的屏幕信息。
语法：window.screen.属性
screen对象属性:
availHeight,窗口可以使用的屏幕高度,单位像素
availWidth,窗口可以使用的屏幕宽度
colorDepth,用户浏览器表示的颜色位数,通常为32位
pixelDepth,用户浏览器表示的颜色位数,通常32位
height,屏幕的高度
width,屏幕的宽度

屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。

• screen.height 返回屏幕分辨率的高
• screen.width 返回屏幕分辨率的宽

注意:

• 单位以像素计。
• window.screen 对象在编写时可以不使用 window 这个前缀。

屏幕可用高和宽度

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

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

什么是DOM？

节点属性:
nodeName,返回一个字符串,其内容是给定节点的名字
nodeType,返回一个整数,这个数值代表给定节点的类型
nodeValue,返回给定节点的当前值

遍历节点树的方法
childNodes,返回一个数组,这个数组由给定元素节点的子节点构成
firstChild,返回第一个子节点
lastChild,返回最后一个子节点
parentNode,返回一个给定节点的父节点
nextSibling,返回给定节点的下一个子节点
previousSibling,返回给定节点的上一个节点

DOM操作的方法
createElement(element),创建一个新的元素节点
createTextNode(),创建一个包含着给定文本的新文本节点
appendChild(),指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore(),将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild(),从一个给定元素中删除一个子节点
replaceChild(),把一个给定父元素里的子节点替换成另外一个节点

getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id属性。
注意:

• 因为文档中name 属性不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
• 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:document.getElementsByTagName(Tagname)
说明:

• Tagname是标签的名称，如p、a、img等标签名。
• 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

getAttribute()方法
通过元素节点的属性名称获取属性的值.
语法：elementNode.getAttribute(name)
说明:

• elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
• name：要想查询的元素节点的属性名字

setAttribute()方法
setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
说明：

• name: 要设置的属性名。
• value: 要设置的属性值。

注意：

• 把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
• 类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用函数

节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
nodeName : 节点的名称
nodeValue ：节点的值
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

访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

访问子节点的第一个和最后一项
firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。 
lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。 

访问父节点parentNode
获取指定节点的父节点
语法：elementNode.parentNode
注意:父节点只能有一个。

访问兄弟节点
nextSibling属性可返回某个节点之后紧跟的节点(处于同一树层级中)
语法:nodeObject.nextSibling
若无此节点,则该属性返回null
previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling  
说明：如果无此节点，则该属性返回 null。

插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点
语法:appendChild(newnode)
参数:newnode：指定追加的节点。

插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
参数:

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

删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:nodeObject.removeChild(node)
参数:node ：必需，指定需要删除的节点。

替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 
语法：node.replaceChild (newnode,oldnew ) 
参数：

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

注意: 

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

创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
参数:tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)
参数：data : 字符串值，可规定此节点的文本。

浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

对于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

不同浏览器都适用的兼容方案:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight | |document.body.clientHeight;

网页尺寸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元素中内容实际占用的高度和宽度。

网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
值
offsetHeight = clientHeight + 滚动条 + 边框。
浏览器兼容性

var w= document.documentElement.offsetWidth || document.body.offsetWidth;
var h= document.documentElement.offsetHeight || document.body.offsetHeight;