Javascript笔记

一、如何插入JS
1. 使用，在script.js中写js代码

二、变量
定义变量使用关键字var，语法：var 变量名
命名规则:
(1) 变量必须使用字母、下划线(_)或者美元符($)开始。(2)然后可以使用任意多个英文字母、数字、下划线{(}_{)}或者美元符($)组成。
(3) 不能使用JavaScript关键词与JavaScript保留字

   变量要先声明再赋值、可以重复赋值、在JS中区分大小写、变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号 

三、数组
创建数组语法：var myarray=new Array(); 创建数组的同时，还可以为数组指定长度，长度可任意指定var myarray= new Array(8); //创建数组，存储8个数据。
注意：
创建的新数组是空数组，没有值，如输出，则显示undefined。
虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
数组属性length：JavaScript数组的length属性是可变的，如arr.length=10; ————增大数组的长度
数组赋值：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

四、函数
基本语法如下:
function 函数名()
{
函数代码;
}
function定义函数的关键字。
"函数名"你为函数取的名字。
"函数代码"替换为完成特定功能的代码。
函数调用:直接在需要的位置写函数就ok了
有返回值的函数：
function 函数名()
{
函数代码;
return 返回值；
}

五、常用互动方法
1. 输出内容：document.write
2. 警告：alert(字符串或变量);
3. 确认：confirm(str);————str：在消息对话框中要显示的文本，返回值: Boolean值
4. 消息对话框：prompt(str1, str2);————str1: 要显示在消息对话框中的文本，不可修改；str2：文本框中的内容，可以修改
点击确定按钮，文本框中的内容将作为函数【返回值】，点击取消按钮，将【返回null】
5. 打开新窗口：window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称，由字母、数字和下划线字符组成 返回一个窗口对象
“_top”、"_blank"、"_self"具有特殊意义的名称
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同，name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开；
参数：top=number–窗口顶部离开屏幕顶部的像素数，left=number–窗口左端离开屏幕左端的像素数，width=number–窗口的宽度
height=number–窗口的高度，menubar=yes/no–窗口有没有菜单，toolbar=yes/no–窗口有没有工具条，
scrolbars=yes/no–窗口有没有滚动条，status=yes/no–窗口有没有状态栏
6. 关闭窗口：window.close();—关闭本窗口，<窗口对象>.close();–关闭指定的窗口

六、DOM操作
1. HTML文档可以说由节点构成的集合，三种常见的DOM节点：
(1) 元素节点：、、

等都是元素节点，即标签。
(2) 文本节点:向用户展示的内容，如

• …
• 中的JavaScript、DOM、CSS等文本。
  (3) 属性节点:元素属性，如 JavaScript DOM 中 标签的链接属性href=“http://www.imooc.com”。
  2. 通过ID获取元素：document.getElementById(“id”)————获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法
  (1) innerHTML 属性用于获取或替换 HTML 元素的内容。语法：Object.innerHTML
  Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。注意书写，innerHTML区分大小写。
  (2) 改变 HTML 元素的样式：语法:Object.style.property=new style;
  Object是获取的元素对象，基本属性表（property）:backgroundColor/height/width/color/font/fontFamily/fontSize
  (3) 设置对象显示和隐藏：display属性。语法：Object.style.display=“value”，value=none（隐藏）/ block（显示为块级元素）
  (4) 控制类名：className属性设置或返回元素的class 属性。语法：object.className =“classname”
  (5) 恢复为原始设置 object.removeAttribute(“style”);
  3. document.getElementsByName(“name”)：通过name获取元素，返回带有指定名称的节点对象的集合，因为文档中的 name 属性可能不唯一，
  所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素，和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
  4. getElementsByTagName()方法返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
  语法:
  document.getElementsByTagName(“Tagname”)
  Tagname：是标签的名称，如p、a、img等标签名
  和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始
  5. getAttribute()方法：通过元素节点的属性名称获取属性的值。
  语法：elementNode.getAttribute(“name”)
  elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
  name：要想查询的元素节点的属性名字
  6. setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
  语法：elementNode.setAttribute(“name”,“value”)
  name: 要设置的属性名。
  value: 要设置的属性值。
  7. 节点属性：在文档对象模型 (DOM) 中，每个节点都是一个对象，DOM 节点有三个重要的属性 nodeName 、nodeValue 、 nodeType
  (1) nodeName 属性: 节点的名称，是只读的，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 是属性的名称
  文本节点的 nodeName 永远是 #text， 文档节点的 nodeName 永远是 #document
  (2) nodeValue 属性：节点的值，元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue 是文本自身， 属性节点的 nodeValue 是属性的值
  (3) nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
  元素类型 节点类型
  元素 1
  属性 2
  文本 3
  注释 8
  文档 9
  8. childNodes:访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
  语法：elementNode.childNodes
  firstChild:属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
  语法：node.firstChild
  lastChild: 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
  语法：node.lastChild
  parentNode:获取指定节点的父节点
  语法：elementNode.parentNode
  9. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中），语法：nodeObject.nextSibling；如果无此节点，则该属性返回 null。
  previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中），语法：nodeObject.previousSibling ；如果无此节点，则该属性返回 null。
  10. appendChild()：在指定节点的最后一个子节点列表之后添加一个新的子节点。
  语法:appendChild(newnode)
  newnode：指定追加的节点，
  如：var otest = document.getElementById(“test”);
  var newnode = document.createElement(“li”);
  newnode.innerHTML = “PHP”;
  otest.appendChild(newnode);
  11. insertBefore()：在已有的子节点前插入一个新的子节点
  语法:insertBefore(newnode,node);
  newnode: 要插入的新节点。
  node: 指定此节点前插入节点。
  12. removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
  ！！！注意：把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
  语法:nodeObject.removeChild(node)
  node ：必需，指定需要删除的节点
  13. replaceChild() 实现子节点(对象)的替换。返回被替换对象的引用。
  语法：node.replaceChild (newnode,oldnew )
  newnode : 必需，用于替换 oldnew 的对象。
  oldnew : 必需，被 newnode 替换的对象。
  14. createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
  语法：document.createElement(tagName)
  tagName：字符串值，这个字符串用来指明创建元素的类型。
  15. createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
  语法：document.createTextNode(data)
  data : 字符串值，可规定此节点的文本。
  16. 获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
  对于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文档的标签
  • document.body.clientHeight
  • document.body.clientWidth
  17. 获取网页内容高度和宽度 document.documentElement.scrollHeight或document.body.scrollHeight
  针对IE、Opera:
  scrollHeight 是网页内容实际高度，可以小于 clientHeight。
  针对NS、FF:
  scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
  // scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
  18. offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
  offsetHeight = clientHeight + 滚动条 + 边框。
  浏览器兼容性
  var w= document.documentElement.offsetWidth || document.body.offsetWidth;
  var h= document.documentElement.offsetHeight || document.body.offsetHeight;
  19. scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容
  scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容
  offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
  offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置
  offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

  七、事件
  1. 事件是可以被 JavaScript 侦测到的行为
  2. 主要事件：
  onclick：鼠标单击事件； onmouseover：鼠标经过事件； onmouseout：鼠标移开事件；
  onchange：文本框内容改变事件； onselect：文本框内容被选中事件； onfocus：光标聚焦事件；
  onblur：光标离开； onload：网页导入； onunload：关闭网页
  除onload事件外都是以属性的方法触发，onload使用方法：
  

  八、对象
  JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
  对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
  对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
  1. History 对象：从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
  语法：window.history.[属性|方法]
  属性：
  length：返回浏览器历史列表中的url数量
  方法：
  back()：加载history列表中的前一个url
  forward：加载history列表中的下一个url
  go：加载history列表中的某个具体的页面
  2. Location对象：location用于获取或设置窗体的URL，并且可以用于解析URL。语法：location.[属性|方法]
  属性：
  hash：设置或返回从#号开始的url（锚）
  host：设置或返回主机名和当前URL的端口号
  hostname：设置或返回当前URL的主机名
  port：设置或返回当前URL的端口号
  href：设置或返回完整的URL
  pathname：设置或返回当前URL的路径部分
  protocol：设置或返回当前URL的协议
  search：设置或返回从（？）开始的的URL（查询部分）
  属性方法：
  assign()：加载新的文档
  reload()：重新加载当前文档
  replace()：用新的文档替换当前文档
  3. Navigator 对象：包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
  对象属性：
  appCodeName：浏览器代码名的字符串表示
  appName：返回浏览器名称
  appVersion：返回浏览器平台和版本信息
  platform：返回浏览器的操作系统平台
  userAgent：返回客户机发送服务器的user-agent头部的值

  	## 标题