一、简单认识JavaScript（JS）
1.JavaScript是一种直译性的脚本语言。
2.JavaScript作用
1）操作html页面内容
2）响应用户操作，如页面某个元素变化等
3）验证数据，如ajax，后台数据交互等
3.JavaScript和java没有关系
4.jQuery是JavaScript代码组合的一堆代码，是一个注重特效的插件
二、书写JS代码
1.js代码写在<script></script>标签里或单独的js文件中。
2.<script></script>任意地方都可以放，一般放在head或body结束之前，但要注意加载顺序。
3.script标签一般会加上标签属性type="text/javascript"或language="javascript"，HTML5新规则下可以什么都不用加。
4.外部引入js文件，后缀“.js”，<script src="文件路径"></script>
三、JS代码书写注意事项
1.js严格区分大小写，js常采用驼峰命名法
2.标点符号都是英文的半角符号
3.代码要缩进，缩进要对齐
四、JS里的系统弹窗
每个浏览器弹窗不一样。
1.alert("内容");只有一个“确定”选项，调试时常用
2.confirm("你确定吗？");两个选项“确定”和“取消”
3.prompt("请输入内容：");弹出文本框，用户可以输入内容，有两个选项“确定”和“取消”
五、JS注释
1.单行注释：//注释内容
2.多行注释：/* 注释内容 */
六、JS获取页面元素节点或标签和修改内容
1.通过id获取元素
1）document.getElementByid("id名称");
2）修改方法：document.getElementByid("id名称").innerHTML = "添加内容";
这里需要注意的是innerHTML是可读可写的，即可以获取元素内容，也可以写内容。
2.通过class获取元素，class名称不唯一，所以获取的是一个集合
1）document.getElementsByClassName('class名称');
2）修改方法：document.getElementsByClassName('class名称')[0].innerHTML = "添加内容”;
3.通过css选择器获取属性，比较常用，且兼容性比较好，兼容IE8及以上版本
1）document.querySelector("css选择器");
2）修改方法：document.querySelector("css选择器").innerHTML = "添加内容”;
4.返回选择器对应的数据集合
1）document.querySelectorAll("css选择器");
2）修改方法：document.querySelectorAll("css选择器")[0].innerHTML = "添加内容”;
5.通过标签获取标签对应的数据集合
1）document.getElementByTagName("标签名");
2）修改方法：document.getElementByTagName("标签名")[0].innerHTML = "添加内容”;
6.通过name获取属性，返回的是集合，name一般标签支持不一样，如表单比较常见
1）document.getElementByName("name");
注意点：除了getElementByid前面必须是document外，其他的获取元素方法都是可以迭代使用的即前面不一定是document。
七、往标签后面追加东西
1.document.write("内容");，该内容是可以解析的。
2.document.getElementByid("id名称").innerText = "内容";，该内容是不会被解析的。
注意：如果js代码写在head里面，并且涉及到文档标签时，浏览器会报错，这时就需要事件来处理，如外部引用的js文件。
1）当文档加载完成后触发的事件
window.onload = function() {
document.getElementByid("id名称").innerText = "内容";，
} ;
2）注意，当浏览器触发window.onload时，意味着文档流已经关闭
此时document.write("内容");方法在文档流关闭之前可以正常显示；在文档流关闭之后，会把整个HTML替换成一个字符串即直接覆盖整个文档。所以不建议在window.onload里使用该方法。
八、JS事件
事件有很多种类，有鼠标事件、键盘事件、表单事件、系统事件。
更多JavaScript 事件可以参考手册：http://www.w3school.com.cn/jsref/jsref_events.asp
1.获取元素，推荐使用getElement方法，效率较高。
2.给元素注册事件，即注册一个反馈机制。
书写格式：
document.getElementById('box').onclick = function () {};
解释：鼠标单击后触发的事件，注意后面以分号结束。
3.初识事件
onclick 单击事件
ondblclick 双击事件
onmouseover / onmouseenter 移入事件
onmouseout / onmouseleave 移出事件
九、函数
1.匿名函数
function() {}
2.有名函数
function 函数名() {}
3.有名函数调用
1）事件函数
document.getElementById('box').onclick = function1;
function function1() {}
注意：调用函数时不要加括号。
2）js文件中函数自执行
function1();
注意：调用函数时要加括号和分号。
3）标签中
<div id="box" onclick="function1();"></div>
注意：调用函数时要加括号和分号。
十、this和变量
1.this指代当前触发事件的对象。
2.定义变量：var
3.变量命名规则：
1）禁止关键词、保留字
2）只允许数字 、字母 、“_”、 "$"，不能数字开头
3）严格区分大小写
4）通常要求见名之意
示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style> 11 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;} 12 *{margin: 0; padding: 0;} 13 ol,ul{list-style: none;} 14 a{text-decoration: none; color: inherit;} 15 html{background: #ccc;} 16 #container{ 17 width: 50px; 18 height: 50px; 19 padding: 50px; 20 background: deeppink; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="container"></div> 26 <script> 27 var oBox = document.getElementById('container'); 28 29 oBox.onclick = function () { 30 this.innerHTML = 'Hello World！'; 31 }; 32 33 oBox.onmouseover = function () { 34 this.innerHTML = '鼠标移入了！'; 35 }; 36 37 oBox.onmouseout = function () { 38 this.innerHTML = ""; 39 }; 40 </script> 41 </body> 42 </html>
结果：
十一、牛刀小试
示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;} 8 *{margin: 0; padding: 0;} 9 ol,ul{list-style: none;} 10 a{text-decoration: none; color: inherit;} 11 div{ 12 width: 100px; 13 height: 100px; 14 margin: 50px; 15 background: #ccc; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="box1"></div> 21 <div id="box2"></div> 22 <script type="text/javascript"> 23 document.getElementById("box1").onclick = function() { 24 document.getElementById("box1").innerHTML = "这是box1"; 25 document.getElementById("box2").innerHTML = "你点击了box1"; 26 }; 27 document.getElementById("box2").onclick = function() { 28 document.getElementById("box2").innerHTML = "这是box2"; 29 document.getElementById("box1").innerHTML = "你点击了box2"; 30 }; 31 </script> 32 </body> 33 </html>
结果：
