目录
了解JavaScript
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
参考地址：http://www.w3school.com.cn/js/js_intro.asp
JavaScript基本语法
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
<p id="demo"></p>
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符
空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。
参考地址：http://www.w3school.com.cn/js/js_statements.asp
https://www.cnblogs.com/john-sr/p/5716345.html
JavaScript内部对象
参考地址：https://www.cnblogs.com/cyjy/archive/2017/02/22/6428908.html
http://www.w3school.com.cn/js/js_objects.asp
JavaScript的DOM
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
实例
本例查找 id="intro" 元素：
var x=document.getElementById("intro");通过标签名查找 HTML 元素
实例
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：
实例
var x=document.getElementsByClassName("intro");- 常用方法:
- 获取节点：
- document.getElementById(idName) //通过id号来获取元素，返回一个元素对象
- document.getElementsByName(name) //通过name属性获取id号，返回元素对象数组
- document.getElementsByClassName(className) //通过class来获取元素，返回元素对象数组（ie8以上才有）
- document.getElementsByTagName(tagName) //通过标签名获取元素，返回元素对象数组
- 获取/设置元素的属性值：
- element.getAttribute(attributeName) //括号传入属性名，返回对应属性的属性值
- element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值
- 创建节点Node：
- document.createElement("h3") //创建一个html元素，这里以创建h3元素为例
- document.createTextNode(String); //创建一个文本节点；
- document.createAttribute("class"); //创建一个属性节点，这里以创建class属性为例
- 增添节点：
- element.appendChild(Node); //往element内部最后面添加一个节点，参数是节点类型
- elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
- 删除节点：
- element.removeChild(Node) //删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
- 常用属性:
- 获取当前元素的父节点 ：
- element.parentNode //返回当前元素的父节点对象
- 获取当前元素的子节点：
- element.chlidren //返回当前元素所有子元素节点对象，只返回HTML节点
- element.chilidNodes //返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
- element.firstChild //返回当前元素的第一个子节点对象
- element.lastChild //返回当前元素的最后一个子节点对象
- 获取当前元素的同级元素：
- element.nextSibling //返回当前元素的下一个同级元素 没有就返回null
- element.previousSibling //返回当前元素上一个同级元素 没有就返回null
- 获取当前元素的文本：
- element.innerHTML //返回元素的所有文本，包括html代码
- element.innerText //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
- 获取当前节点的节点类型：node.nodeType //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。
- 设置样式：element.style.color=“#eea”; //设置元素的样式时使用style，这里以设置文字颜色为例。
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<body onload="checkCookies()">onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
</body>参考地址：http://www.w3school.com.cn/js/js_htmldom.asp
http://www.w3school.com.cn/js/js_htmldom_html.asp
http://www.w3school.com.cn/js/js_htmldom_css.asp
http://www.w3school.com.cn/js/js_htmldom_events.asp
http://www.runoob.com/js/js-htmldom.html
https://www.cnblogs.com/Ry-yuan/p/6918155.html
BOM
浏览器对象模型 (BOM)
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
参考地址：http://www.w3school.com.cn/js/js_window.asp
http://www.runoob.com/js/js-window.html
https://www.cnblogs.com/2010master/p/5824215.html
自定义函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
描述 JavaScript 中定义函数的几种方式:
JavaScript 中，有三种定义函数的方式：
1、函数语句：即使用 function 关键字显式定义函数。如：
function f(x){
return x;
}2、函数定义表达式：也称为“函数直接量”。形如：
var f = function(x){return x;};3、使用 Function() 构造函数定义，形如：
Var f = new Function(“x”,”return x;”);参考地址：http://www.w3school.com.cn/js/js_functions.asp
http://www.runoob.com/js/js-function-definition
https://blog.csdn.net/u012396955/article/details/53929937
全局函数
| 函数 | 描述 |
|---|---|
| decodeURI() | 解码某个编码的 URI。 |
| decodeURIComponent() | 解码一个编码的 URI 组件。 |
| encodeURI() | 把字符串编码为 URI。 |
| encodeURIComponent() | 把字符串编码为 URI 组件。 |
| escape() | 对字符串进行编码。 |
| eval() | 计算 JavaScript 字符串，并把它作为脚本代码来执行。 |
| isFinite() | 检查某个值是否为有穷大的数。 |
| isNaN() | 检查某个值是否是数字。 |
| Number() | 把对象的值转换为数字。 |
| parseFloat() | 解析一个字符串并返回一个浮点数。 |
| parseInt() | 解析一个字符串并返回一个整数。 |
| String() | 把对象的值转换为字符串。 |
| unescape() | 对由 escape() 编码的字符串进行解码。 |
参考地址：http://www.runoob.com/jsref/jsref-obj-global.html
事件处理
参考地址：https://www.linuxidc.com/Linux/2016-12/13796