1，js是一时间驱动为和核心的一门语言。
事件的三要素：事件源，事件，事件驱动程序
代码的书写步骤如下：
-
（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
-
（3）书写事件驱动程序：关于DOM的操作
<body> //基本实现方法！！
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
以上是必须记忆的指令方法！
也就是在div.onclick时使用的指令，onclick是一个点击后效果链接方式
1.事件源的获取方式；
1，var div = doucment.getElementById（id） //最简单的获取方式之一，通过id获取事件源 2，var div = doucment.getElementByTagName（“p”）//按照标签名字获取事件源 3,var div = doucment.getElenmentByClassName（“class”）//按照类名选取事件源
2.绑定事件的方式
方式一：直接绑定匿名函数
<script>
var k.onclick = function(){
console.log("呵呵")
}
//直接将匿名函数中的事件赋予事件源
</script>
方式二：单独定义函数后，再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fu;
function fu(){
console.log(2333)
}
}//此方法绑定需要注意对于函数名的区分
</script>
方法三：行内绑定：
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
//在行内直接增加onclick的方法进行获取函数
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
3.事件驱动程序！重点！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
function $(id){
return document.getElementById(id)
}
$('box').onclick = function(){
this.style.width = '200px';
this.style.height = '200px';
this.style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
简单的点击触发事件，粉色方框点击后变为红色并且放大
需要注意的要点：
1，在js中写属性值时，需要用引号
2，属性名在js和style中表现方式不同，在js中需要使用驼峰体所有的——后面的都第一个字符需要大写
onload事件，当页面的文本和图片标签加载完毕后，触发onload事件。
js的加载是和html同步运行的，而onload也会加载，但会还是会等待html加载完毕后触发行为。
事件例子 广告栏的关闭：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 100%;
height: 100px;
background-color: pink;
cursor: pointer;
display: block;
float: right;
}
#yc{
float: right;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
function $(id){
return document.getElementById(id)
}
$('yc').onclick = function(){
$('box').style.display = "none";
}
}
</script>
</head>
<body>
<div id = "box"><a id = "yc">X<a>
</div>
</body>
</html>
//控制关闭图片
2，图片的img悬停显示和关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 50%;
height: 400px;
display:block;
background : url('../第一天/timg.gif') no-repeat;
}
</style>
<script type="text/javascript">
window.onload = function(){
function $(id){
return document.getElementById(id)
}
$('box').onmouseover = function(){
$('box').style.background = "url(../第一天/taidi.gif) no-repeat";
}
$('box').onmouseout = function(){
$('box').style.background = "url(../第一天/timg.gif) no-repeat";
}
}
</script>
</head>
<body>
<div id = "box">
</div>
</body>
</html>
两张背景图片的改变方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 500px;
height: 333px;
display:block;
/*background : url('../第一天/timg.gif') no-repeat;*/
}
</style>
<script type="text/javascript">
window.onload = function(){
function $(id){
return document.getElementById(id)
}
$('box').onmouseover = function(){
$('yc').src = "../第一天/timg.gif";
}
$('box').onmouseout = function(){
$('yc').src = "../第一天/taidi.gif";
}
}
</script>
</head>
<body>
<div id = "box"><img id="yc" src="../第一天/taidi.gif">
</div>
</body>
</html>
直接修改图片的src方式！
4，重点，什么是DOM，
1，DOM就是文本对象模型，DOM为文档提供了结构化表示，为js操作html元素而制作定的一个规范。
2，在DOM的视野中所有的数据都是一个个节点中的，并且组成一熟状图
在html中，一切都是节点：
1，元素节点：html标签
2，文本节点：标签中的文字
3，属性节点：标签的属性
而DOM就是用来找到元素节点并且对元素节点进行增删改查，并且重要的是对时间的触发响应：事件源、时间、事件的驱动程序！
获取事件元的方法：
var div1 = document.getElementById("box1");
//id 获取事件源
var div2 = document.getElementByTagName("hhee");
//标签名字获取事件源
var div3 = document.getElementByClassName("34567")
//按照类名获取事件源
3，父级节点的获取：
节点.parentNode 此为父级节点获取方式！
后一个元素节点：
1，nextSibling在火狐、谷歌、ie9+ ：都是值得下一个节点，并且包含所有的标签和空文档和换行节点。因此下一个节点为空一样显示空，在ie678中显示下一个元素节点
2，nextElementSibling在火狐、谷歌、ie9+ ：显示下一个元素节点的，标签！
经常另种获取方法利用 | |表示！
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
previous：前一个元素
（1）previousSibling：
-
-
火狐、谷歌、IE9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。
-
IE678版本：指前一个元素节点（标签）。
-
（2）previousElementSibling：
-
- 火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
5，获取单个字节点：
1，第一个字节点 | 第一个子元素节点：
1，firstChild：第一个子节点，节点中的第一个子节点，此节点为父级节点
ie678中使用
2，firstElementChild：第一个元素子节点，节点中的第一个子节点，此节点为父级节点
ie678以上使用
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
2，最后一个子节点 | 最后一个元素节点
1，lastChild：最后一个子节点
2，lastElementChild：最后一个元素子节点
6，获取所有的子节点：
（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。
-
- 火狐 谷歌等高本版会把换行也看做是子节点。（了解）
用法：
子节点数组 = 父节点.childNodes; //获取所有节点。
（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】
-
- 它只返回HTML节点，甚至不返回文本节点。
- 在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。
虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
用法：（用的最多）
子节点数组 = 父节点.children; //获取所有节点。用的最多。
6，DOM节点的操作；
1，创建节点：也就是创建标签
新的标签（元素节点） = doument。cerateElement（“标签名”）；
创建节点后，节点会在控制台显示，一般会配合插入节点使用，将创建的节点插入到某个子节点或者父节点的附近。
2。插入节点：
都会找到父节点，然后插入到其中，于子节点并列
1，父节点.appendchild（节点名）；
2，父节点.insertBefore（新的子节名，被插的子节点）
如果被插的子节点为null，那么他将在父节点的最后插入
3，删除节点：
1,父节点.removechild（子节点）；
2,自己.parentNode.removechild(自己)
4，复制节点：
格式如下：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。
7.。设置节点的属性：
1，元素节点.属性；元素节点[属性]；
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意，是className，不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class
console.log(myNode["title"]);
</script>
</body>
2，方法二，
元素节点.getAttribute("属性名称")；
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class"));
console.log(myNode.getAttribute("title"));
2，设置节点的属性值：
老方法：
$(id).src = " ******"
推荐方法：
元素节点.setAttribute（属性名，新的属性值）；
$(id).setAttribute("src","******") 次方法配合循环使用，味道更佳！
3.删除节点属性值；
元素名.removeAttribute(属性名)；
1，模态框案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
html,body{
height:100%;
}
#box{
width: 100%;
height: 100%;
background-color: red;
}
#p1{
position: relative;
width: 400px;
height:200px;
top: 100px;
line-height: 200px;
text-align: center;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
width: 40px;
height:30px;
top: 0;
right: 0;
line-height: 30px;
text-align:center;
background-color: green;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oTT = document.getElementById("tt");
var oDiv = document.createElement("div");
var oP = document.createElement("p");
var oSpan = document.createElement("span");
//添加标签中的属性
oDiv.id = "box";
oP.id = "p1";
oSpan.id = "span1";
oP.innerHTML = "这是文本输入框";
oSpan.innerHTML = "X";
oDiv.appendChild(oP);
oP.appendChild(oSpan);
oTT.onclick = function(){
this.parentNode.appendChild(oDiv);
}
oSpan.onclick = function(){
oTT.parentNode.removeChild(oDiv);
}
}
</script>
</head>
<body>
<button id="tt">弹出</button>
</body>
</html>
思路：创建新的标签，在点击按钮的时候，新的标签插入body中显示，当关掉时就把标签删除
2，简易写字板：
3，js模拟选择其中的hover
4，tab栏选项卡
5，购物车
暂时跳过：一回来写！