JavaScript进阶学习-webAPI（总结）

小咪咪 2023-05-22 04:39 9阅读 0赞

# webAPI #

## DOM ##

### 概念 ###

JS分三个部分：

ECMAScript标准：js的基本语法

DOM：Document object model —文档对象模型—操作页面的元素

BOM: Browser object model —>浏览器对象模型—操作的是浏览器

### DOM文档对象模型 ###

### 文档 ###

把一个HTML文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象

### XML ###

文件也可以看成是一个文档，侧重于存储数据

### HTML ###

展示信息，展示数据的；文件看成是一个文档，那么这个文档看成是一个对象，文档中的所有的标签都可以看成是一个对象

页面中的每个标签，都是一个元素（element），每个元素都可以看成是一个对象

### 案例体验 ###

//点击操作：---->事件：就是一件事，有触发和响应，事件源
    // 按钮被点击，弹出对话框
    // 按钮--->事件源
    // 点击---->事件名字
    // 被点了--->触发了
    // 弹框了--->相应
    //HTML代码，点击按钮弹出对话框，对话框：alert()===>js的代码
    // html代码嵌入了js的代码，不方便后期的修改和维护
    input type="button" value="显示效果" onclik="alert('wo beidianle')"
    //最终的效果：应该把JS代码和html分离
    function f1() { 
      // 函数中可以写很多的代码
      alert("这是一个弹窗")
    }
    input type="button" value="显示效果" onclick="f1()"
    
    // 开始分离html 和js
    input type="button" value="开始分离" id="btn"
    function f2() { 
      alert("开始分离html和js代码")；
    }
    //html标签中的id属性中存储的值是唯一的
    //id属性就像是人的身份证号码一样，不能重复，页面中的唯一标识
    // 从文档中找到ID值为BTN的这个标签元素
    
    // 最终版
     <input type="button" value="最终版" id="btn1">
       var btnobj1=document.getelementbyid("btn1")
    btnobj1.onclick=function () { 
      alert("哦,这真是太好了")
    };
    // 或者
    
    document.getelementbyid("btn1")onclick=function () { 
      alert("哦,这真是太好了")
    };
    // 先有按钮，才能获取，获取之后才能注册事件
    
    // 根据id属性的值从文档中获取这个元素

### 点击按钮显示图片案例 ###

input type="button" value="显示图片" id="btn"
    img src="" alt="" id="im"
    // 根据id获取按钮
    var btnobj=document.getelementbyid("btn")
    // 为按钮注册点击事件，添加事件处理函数
    btnobj.onclick=function () { 
      // 根据id获取图片的标签，设置图片的src属性值
      var imobj=document.getelemtnbyid("im")
      imobj.src="imgages../../"
      // 设置图片的大小
      imobj.width="300";
      imobj.height="400";
    };

### 点击按钮修改P标签文本内容 ###

凡是成对的标签，中间的文本内容，设置的时候都使用innertext这个属性的方式

input type="button" value="设置p的内容" id="btn"
    <p id=p1>哈哈哈哈哈</p>
    document.getelementbyid("btn").onclick=function(){ 
      // 根据id获取p标签，设置内容
      document.getelementbyid("p1").innertext="这是一个P"
    }

### 点击按钮修改a标签的地址和热点文字 ###

input type=button value="显示效果" id="btn"
    <a id="ak" herf="baidu">asdasd</a>
    document.getelementbyid("btn").onclick = function () { 
      // 根据id获取超链接，设置href属性
      var aobj = document.getelementbyid("ak")
      aobj.href = "asdasdasdad";
      aobj.innertext = "传智博客"
    }；

### 点击按钮修改多个p标签的文字 ###

input type="button" value="设置p的内容" id="btn"
    <div	id="da1">
    <p>哈哈哈哈哈</p>
    <p>哈哈哈哈哈</p>
    <p>哈哈哈哈哈</p>
    <p>哈哈哈哈哈</p>
    </div>
    <div id="da2">
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    </div>
    document.getelementbyid("btn").onclick=function(){ 
     // 根据id获取p标签，设置内容
    var podjs=document.getelementbyid("dv1").getelementsbytagname("p");
     // 循环遍历这个数组
     for(var i=0;i<pobjs.length;i++) { 
       // 每个p便签，设置问题
       pobjs[i].innertext="我们都是p"
     }
    }；

### 案例点击按钮修改图片的alt和title ###

input type="button" value="显示效果" id="btn"
    img src=".././/.//." alt="aa" title="sss"
    
    document.getelementbyid("btn").onclick = function() { 
       // 返回的是一个伪数组
      var imgobjs = document.getelementbytagname("img");
      imgobjs[0].alt = "改了"；
      imgobjs[0].title = "aaaa";
    };

### 案例点击按钮修改多个文本框的值 ###

input type="button" value="修改文本框的值" id="btn"
    input type="text" value=""
    input type="text" value=""
    input type="text" value=""
    input type="text" value=""
    input type="text" value=""
    //script
    document.getelementbyid("btn").onclick=function () { 
      //获取所有的文本框
      var inputs=document.getelementbytagname("input");
      for(var i=0;i<inputs.length;i++){ 
        //判断这个元素是不是按钮
        if(inputs[i].type!="button") { 
          inputs[i].value="aaaaaaavav"
        }
      }
    };

### 点击每个图片弹出对话框 ###

img src="../../../" alt=""  id="im1"
    img src="../../../" alt=""	id="im2"
    img src="../../../" alt=""	id="im3"
    document.getlementbyid("im1").onclick=function() { 
      alert("被点击了")
    }；
    document.getlementbyid("im2").onclick=function() { 
      alert("被点击了")
    }；
    document.getlementbyid("im3").onclick=function() { 
      alert("被点击了")
    }；
    // 根据标签标签的名字获取图片标签，分别注册点击事件
    var ingobjs=document.getelementsbytagname("img");
    for(var i=0 ;i<imgobjs.length;i++) { 
      imgobjs[i].onclick=function () { 
        alert("被点了")
      };
    }

### 点击按钮修改按钮的属性 ###

input type="button" value="按钮" id="btn"
    var btnobj = document.getelementbyid("btn");
    btnobj.onclik = function() { 
      // 修改按钮属性
      this.value = "我是按钮，谁咬我，我咬谁"；
      this.type = "text";
      this.id = "btn2";
    }

\#\#\#在某个事件中，自己的时间中的this就是当前的这个元素对象

### 点击图片修改自身宽高 ###

img src="../../" ali="" id="im"
    var imgobj = document.getelementbyid ("im");
    imgobj.onclick = function() { 
      this.width = "200";
      this.height = "300";
    };

### 排他功能 ###

input type="button" value="没怀孕"
    input type="button" value="没怀孕"
    input type="button" value="没怀孕"
    input type="button" value="没怀孕"
    input type="button" value="没怀孕"
    // 获取所有的按钮，分别注册点击事件
    var btnobjs = document.getelementsbytagname("input");
    // 循环遍历所有的按钮
    for (var i=0;i < btnobjs.length;i++) { 
      // 为每个按钮都要注册点击事件
      btnobjs[i].onclick= function(){ 
         // 把所有的按钮的value值设置为默认的值：没怀孕
        for (var j=0; j<btnobjs.length;j++) { 
         btnobjs[j].value = "没怀孕" 
        }
        this.value = "怀孕了"； 
      }；
    }
    // for循环是在页面加载的时候，执行完毕了
    // 事件是在出发的时候，执行的

### 点击按钮修改图片 ###

input type="button" value = "显示大图" id="btn"
    img sec="../../" alt="" id="im"
    //
    function my$(id) { 
      return document.getelementbyid(id);
    }
    my$('btn').onclick=function () { 
      my$("im").src="../../";
    };

### 点击按钮修改性别 ###

input type="button" valur="修改性别" id="btn1"
    input type="radio" value="1" name="sex1"   男
    input type="radio" value="2" name="sex2" id="rad1"  女
    input type="radio" value="3" name="sex3"   保密
    //规律：在表单标签中，如果属性和值只有一个，并且值是这个属性本身，那么，那么在写js代码，Dom操作的时候，这个属性值，是布尔类型就可以了。
    function(id) { 
      return document.getelementbyid(id);
    }
    my$("btn1").onclick = function() { 
    my$("rad1").checked = true;
    };
    
    input type="button" value="选择兴趣" id="btn2"
    input type="checkbox" value="1" name="xingqu" 吃饭
    input type="checkbox" value="2" name="xingqu" 睡觉
    input type="checkbox" value="3" name="xingqu" 打豆豆
    input type="checkbox" value="4" name="xingqu" 打篮球
    input type="checkbox" value="5" name="xingqu" 打足球
    input type="checkbox" value="6" name="xingqu" 打铅球
    // 方法同上

### 点击按钮选择菜单 ###

input type="button" value="点菜" id="btn"
    select name="" id="ss"
    option value="1" aa /potion
    option value="2" bb /potion
    option value="3" cc /potion
    option value="4" id="op1" dd /potion
    /select
    my$("btn").onclick = function() { 
      // 点击选择
      my$("op1").selected=true;
    }
    // 多行文本
    // disabled 这个属性是禁用的
    // readonly 只读
    // html属性中属性和值是自己的，并且只有一个，其实，可以只写这个属性，不用赋值

### 点击按钮设置div的宽和高 ###

input type="button" value="设置样式" id="btn"
    div id="dv" style="width=200px" /div
    // 凡是css中这个属性是多个单词的写法，在js代码dom操作的时候 把-干掉,后面的单词首字母大写即可
    function my$(id) { 
      return getelementbyid(id).onclick
    }
    my$(dv).onclick = function() { 
      my$(dv).style.width="300px";
        my$(dv).style.height="300px";
        my$(dv).style.backgroundColor="pink";
      
    }

### 点击按钮设置div隐藏 ###

div { 
      width:300px;
      height：300px;
      bgc:pink;
    }
    div id="dv" /div
    input type="button" vluce="隐藏" id="btn"
    // 根据id获取按钮，注册点击事件，添加事件处理函数
    my$("btn").onclick = function () { 
      my$("dv").style.display="none";
    }
    
    
    // 根据id获取按钮,注册点击事件，添加事件处理函数
    my$("btn").onclick= function() { 
      // 判断当前点击的按钮的Value值
      if (this.value=="隐藏"){ 
        my$(:dv).style.display="none"; //隐藏
        this.values="显示"
      }else if(this.value=="显示") { 
        may$("dv").style.display="block"; // 隐藏
        this.value="隐藏"
      }
    }

### 在JS代码中DOM操作的时候，设置元素的类样式，不用class关键字，应该使用，classname ###

### 网页的开关灯 ###

input type="button" value="关灯" id="btn"
    my$("btn").onclick=function () { 
      //获取body标签
      document.body.classname= document.body.classname!="cls"?"cls":"";
    }

### 复习总结 ###

DOM树：把html页面或者xml文件看成一个文档，文档就是一个对象，这个文档中所有的标签都是元素，元素也可是看成是对象，标签（元素，对象）有很多，还有嵌套的关系，组成的这中层次结构，可以模拟成树形结构图，简称：树状图，就是DOM树

### 获取元素 ###

2种方式：

根据id从整个文档中获取元素—返回的是一个元素对象

Document.getelementbyid(“id属性的值”)

根据标签的名字获取元素—返回的元素对象组成的伪数组

document.getielementbytagname(“标签的名字”)

操作基本标签的属性

Src,title,alt,href,id属性

操作表单标签的属性

Name,value,type，checked,selected,disabled,readonly

元素样式的操作

对象.style.属性=值；

对象.className=值；

为元素添加事件的操作

事件：就是一件事，有事件源，触发和响应

this关键字—如果是在当前的元素的时间中使用this，那么this就是当前的对象

内置对象：系统自带的对象

自定义对象：自己写的独享

浏览器对象：

DOM

DOM对象：通过DOM方式获取的元素得到的对象

元素：element:页面中的标签

节点;Node:页面中所有的内容，标签，属性，文本

根元素：html标签

页面中的顶级对象——document

## 第二部分 ##

### 案例–重点 ###

元素的样式的操作的案例

阻止超链接跳转、大小图的切换、美图相册、元素样式操作的相关案例：查缺补漏：操作基本标签和表单标签的小案例

innertext和textcontent

innertext和innerhtml的区别

兼容代码

自定义属性

节点操作

### 点击按钮禁用文本框 ###

input type="button" value="禁用文本框" id="btn"
    input type="text" value="文本框" id="txt"
    // 先根据id获取按钮，为按钮注册点击事件，添加事件处理函数
    document.getelementbyid("btn").onclick=function() { 
      // 根据id获取文本框，设置disabled属性
      document.getelementbyid("txt").disabled=true;
    };

### 阻止超链接跳转 ###

// 阻止超链接的默认的跳转:return false
    a herf="../../" id="ak"百度
    document.getelementbyid("ak").onclick=function() { 
      alert:"aaa"
      return false;
    }

### 美女相册 ###

<!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
        body { 
          font-family: "Helvetica", "Arial", serif;
          color: #333;
          background-color: #ccc;
          margin: 1em 10%;
        }
    
        h1 { 
          color: #333;
          background-color: transparent;
        }
    
        a { 
          color: #c60;
          background-color: transparent;
          font-weight: bold;
          text-decoration: none;
        }
    
        ul { 
          padding: 0;
        }
    
        li { 
          float: left;
          padding: 1em;
          list-style: none;
        }
    
        #imagegallery { 
    
          list-style: none;
        }
    
        #imagegallery li { 
          margin: 0px 20px 20px 0px;
          padding: 0px;
          display: inline;
        }
    
        #imagegallery li a img { 
          border: 0;
        }
      </style>
    </head>
    <body>
    
    <h2>
      美女画廊
    </h2>
    
    <ul id="imagegallery">
      <li><a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1"/>
      </a></li>
      <li><a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" width="100" alt="美女2"/>
      </a></li>
      <li><a href="images/3.jpg" title="美女C">
        <img src="images/3-small.jpg" width="100" alt="美女3"/>
      </a></li>
      <li><a href="images/4.jpg" title="美女D">
        <img src="images/4-small.jpg" width="100" alt="美女4"/>
      </a></li>
    </ul>
    
    
    <div style="clear:both"></div>
    
    <img id="image" src="images/placeholder.png" alt="" width="450"/>
    <p id="des">选择一个图片</p>
    <script src="common.js"></script>
    <script>
      //点击a标签,把a标签中的href的属性值给id为image的src属性
      //把a的title属性的值给id为des的p标签赋值
    
      //从ul中标签获取获取所有的a标签
      var aObjs=my$("imagegallery").getElementsByTagName("a");
      //循环遍历所有的a标签
      for(var i=0;i<aObjs.length;i++){ 
        //为每个a标签注册点击事件
        aObjs[i].onclick=function () { 
          //为id为image的标签的src赋值
          my$("image").src=this.href;
          //为p标签赋值
          my$("des").innerText=this.title;
          //阻止超链接默认的跳转
          return false;
        };
      }
    </script>
    </body>
    </html>

### 隔行变色 ###

<input type="button" value="隔行变色" id="btn"/>
    <ul id="uu">
      <li>红旗</li>
      <li>五菱宏光</li>
      <li>奔驰</li>
      <li>兰博基尼</li>
      <li>哈弗</li>
      <li>奥拓</li>
      <li>奥迪</li>
      <li>悍马</li>
    </ul>
    
    
    <script src="common.js"></script>
    <script>
    
      //奇红偶黄
      //点击按钮
      // my$("btn").οnclick=function () { 
      // //获取所有的li标签
      // var list=my$("uu").getElementsByTagName("li");
      // for(var i=0;i<list.length;i++){ 
      // if(i%2==0){ 
      // //偶数
      // list[i].style.backgroundColor="red";
      // }else{ 
      // //奇数
      // list[i].style.backgroundColor="yellow";
      // }
      // }
      // };
    
    
      my$("btn").onclick = function () { 
        //获取所有的li标签
        var list = my$("uu").getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) { 
          list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
        }
      };

### 高亮显示 ###

<ul>
      <li>金士百</li>
      <li>雪花</li>
      <li>百威</li>
      <li>燕京</li>
      <li>青岛</li>
      <li>崂山</li>
      <li>珠江</li>
      <li>华丹</li>
    </ul>
    <script src="common.js"></script>
    <script>
      //鼠标进入和鼠标离开两个事件
      //获取所有的li标签
      var list = document.getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) { 
        //为li注册鼠标进入事件
        list[i].onmouseover = function () { 
          this.style.backgroundColor = "yellow";
        };
        //为li注册鼠标离开事件
        list[i].onmouseout = function () { 
          //恢复到这个标签默认的颜色
          this.style.backgroundColor = "";
        };
    
      }

### 二维码的显示和隐藏 ###

### 单独获取name ###

<body>
    <input type="button" value="显示效果" id="btn"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name2"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name3"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    
    <script src="common.js"></script>
    <script>
    
      //点击按钮,改变所有name属性值为name1的文本框中的value属性值
    
      my$("btn").onclick=function () { 
        //通过name属性值获取元素-------表单的标签
        var inputs=document.getElementsByName("name1");
        for(var i=0;i<inputs.length;i++){ 
          inputs[i].value="我很好";
        }
      };
    </script>

### 根据类标签获取元素 ###

div { 
          width: 200px;
          height: 50px;
          background-color: green;
          margin-top: 10px;
        }
    
        .cls { 
          background-color: yellow;
        }
      </style>
    </head>
    <body>
    <p>这是一个p</p>
    <p class="cls">这是另一个p</p>
    <span class="cls">这是第一个span</span><br/>
    <span>这是第二个span</span><br/>
    <div class="cls">这是第一个div</div>
    <div>这是第二个div</div>
    <input type="button" value="显示效果" id="btn"/><br/>
    <script src="common.js"></script>
    <script>
    
      //点击按钮设置应用cls类样式的标签的背景颜色为红色
      //getElementsByClassName();------>h5的
    
      my$("btn").onclick = function () { 
        //根据类样式的名字来获取元素
        var objs = document.getElementsByClassName("cls");
        for (var i = 0; i < objs.length; i++) { 
          //设置每个元素的背景颜色
          objs[i].style.backgroundColor = "red";
        }
      };
    </script>
    </body>

### 总结获取元素的方式 ###

根据id属性的值获取元素,返回来的是一个元素对象

\* document.getElementById(“id属性的值”);

\* 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

\* document.getElementsByTagName(“标签名字”);

\* 下面的几个,有的浏览器不支持

\* 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

\* document.getElementsByName(“name属性的值”)

\* 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

\* document.getElementsByClassName(“类样式的名字”)

\* 根据选择器获取元素,返回来的是一个元素对象

\* document.querySelector(“选择器的名字”);

\* 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

\* document.querySelectorAll(“选择器的名字”)

### DIV高亮显示 ###

### 案例模拟搜索框 ###

### 设置获取密码框的长度 ###

<input type="text" value="" id="txt"/>
    <script src="common.js"></script>
    <script>
    
      //获取文本框
      my$("txt").onblur=function () { 
        //判断密码的长度
        if(this.value.length>=6&&this.value.length<=10){ 
          this.style.backgroundColor="red";
        }else{ 
          this.style.backgroundColor="green";
        }
      };
    </script>

### 封装innertext和textcontent ###

### innertext和innerhtml的区别 ###

### 自定义属性引入 ###

### 设置和获取自定义属性 ###

### 移除自定义属性 ###

### 使用js完成Tab切换 ###

### 总结 ###

## 第三部分 ##

### 节点—任意一个标签中的元素获取都非常方便 ###

页面中所有的内容（标签，属性，文本），Node

#### 根元素：HTML标签 ####

#### 节点的相关属性：（可以使用标签—元素.出来，可以使用属性节点.出来，文本节点.点出来） ####

Nodetype:节点的类型1—>标签 ，2—>属性，3—>文本

nodeName:节点的名字：标签节点—大写的的标签名字，属性节点—>小写的属性名字，文本节点——>\#text

nodeValue:节点的值:标签节点——null，属性节点—属性值，文本节点-文本内容

#### 获取相关节点 ####

#### 获取相关节点-12行代码 ####

<body>
    <div id="dv">哦哦
      <span>这是div中的第一个span标签</span>
      <p>这是div中的第二个元素,第一个p标签</p>
      <ul id="uu">
        <li>乔峰</li>
        <li>鹿茸</li>
        <li id="three">段誉</li>
        <li>卡卡西</li>
        <li>雏田</li>
      </ul>
    </div>
    <script src="common.js"></script>
    <script>
    
      //12行代码:都是获取节点和元素的
      //ul
      var ulObj=document.getElementById("uu");
      //父级节点
      console.log(ulObj.parentNode);
      //父级元素
      console.log(ulObj.parentElement);
      //子节点
      console.log(ulObj.childNodes);
      //子元素
      console.log(ulObj.children);
      console.log("==============================================");
      //第一个子节点
      console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
      //第一个子元素
      console.log(ulObj.firstElementChild);//-----------------IE8中不支持
      //最后一个子节点
      console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
      //最后一个子元素
      console.log(ulObj.lastElementChild);//-----------------IE8中不支持
      //某个元素的前一个兄弟节点
      console.log(my$("three").previousSibling);
      //某个元素的前一个兄弟元素
      console.log(my$("three").previousElementSibling);
      //某个元素的后一个兄弟节点
      console.log(my$("three").nextSibling);
      //某个元素的后一个兄弟元素
      console.log(my$("three").nextElementSibling);
    
    
    
      //总结:凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点
      //凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素
      //从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
    
    
    
    // var ulObj=document.getElementById("uu");
    //
    //
    // console.log("==============================================");
    // //第一个子节点
    // console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
    // //第一个子元素
    // console.log(ulObj.firstElementChild);//-----------------IE8中不支持
    // //最后一个子节点
    // console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
    // //最后一个子元素
    // console.log(ulObj.lastElementChild);//-----------------IE8中不支持
    // //某个元素的前一个兄弟节点
    // console.log(my$("three").previousSibling.innerText);
    // //某个元素的前一个兄弟元素
    // console.log(my$("three").previousElementSibling);
    // //某个元素的后一个兄弟节点
    // console.log(my$("three").nextSibling.innerText);
    // //某个元素的后一个兄弟元素
    // console.log(my$("three").nextElementSibling);
    //
    </script>
    </body>

#### 点击按钮使DIV中的所有P标签变色 ####

#### 节点操作实现隔行变色 ####

<input type="button" value="变色" id="btn"/>
    <ul id="uu">
      <li>爆炒助教</li>
      <li>油炸班主任</li>
      <li>清蒸小苏</li>
      <li>红烧班长</li>
      <li>红烧肉</li>
      <li>糖醋排骨</li>
      <li>凉拌秋葵</li>
      <li>鱼香胡萝卜丝</li>
    </ul>
    <script src="common.js"></script>
    <script>
      //隔行变色--li
      my$("btn").onclick = function () { 
        var count=0;//记录有多少个li
        //获取ul中所有的子节点
        var nodes = my$("uu").childNodes;
        for (var i = 0; i < nodes.length; i++) { 
          //判断这个节点是不是li标签
          if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") { 
            nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
            count++;//8个
            //nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
          }
        }
      };
    
    </script>

#### 封装节点的兼容代码 ####

<ul id="uu">
      <li>第一个</li>
      <li>第二个</li>
      <li>第三个</li>
      <li>第四个</li>
      <li>第五个</li>
    </ul>
    <script src="common.js"></script>
    <script>
      //第一个节点和第一个元素的获取的代码在IE8中可能不支持
    
      //element.firstChild--->谷歌和火狐获取的是第一个子几点
      //element.firstChile--->IE8获取的是第一个子元素
      //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
      //获取任意一个父级元素的第一个子级元素
      function getFirstElementChild(element) { 
        if(element.firstElementChild){ //true--->支持
          return element.firstElementChild;
        }else{ 
          var node=element.firstChild;//第一个节点
          while (node&&node.nodeType!=1){ 
            node=node.nextSibling;
          }
          return node;
        }
      }
      //获取任意一个父级元素的最后一个子级元素
      function getLastElementChild(element) { 
        if(element.lastElementChild){ //true--->支持
          return element.lastElementChild;
        }else{ 
          var node=element.lastChild;//第一个节点
          while (node&&node.nodeType!=1){ 
            node=node.previousSibling;
          }
          return node;
        }
      }
    
    
      console.log(getFirstElementChild(my$("uu")).innerText);
      console.log(getLastElementChild(my$("uu")).innerText);
    
    
    
    
      //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
      //前一个节点和前一个元素的获取的代码在IE8中可能不支持
      //后一个节点和后一个元素的获取的代码在IE8中可能不支持
    
    
      //学习节点操作还是为了操作元素
    
    
    
    
    
    </script>
    </body>

#### 使用节点操作切换背景图片 ####

#### 全选与全不选使用节点的实现 ####

#### 元素的创建 ####

* 元素创建-----为了提高用户的体验
        * 元素创建的三种方式:
        * 1. document.write("标签的代码及内容");
        * 2. 对象.innerHTML="标签及代码";
        * 3. document.createElement("标签的名字");
    
    //document.write("标签代码及内容");
      my$("btn").onclick=function () { 
        document.write("<p>这是一个p</p>");
      };
     // document.write("<p>这是一个p</p>");
    
      //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
    
      //第二种方式创建元素: 对象.innerHTML="标签代码及内容";
    
        my$("btn").onclick=function () { 
          my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
        };
    
    //第三种方式创建元素
      //创建元素
      //document.createElement("标签名字");对象
      //把元素追加到父级元素中
      //点击按钮,在div中创建一个p
    
      my$("btn").onclick = function () { 
        //创建元素的
        var pObj = document.createElement("p");
        setInnnerText(pObj, "这是一个p");
        //把创建后的子元素追加到父级元素中
        my$("dv").appendChild(pObj);
      };

#### 点击按钮动态创建表格 ####

#### 元素相关方法 ####

#### 创建一个元素 ####

#### 为元素绑定事件 ####

//为元素绑定事件(DOM):一种,但是不兼容,有两种
      //1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
      //2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
    
      //为按钮绑定点击事件
      //参数1:事件的类型---事件的名字,没有on
      //参数2:事件处理函数---函数(命名函数,匿名函数)
      //参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说
    
      //为同一个元素绑定多个相同的事件--
    // my$("btn").addEventListener("click",function () { 
    // console.log("小苏猥琐啊");
    // },false);
    // my$("btn").addEventListener("click",function () { 
    // console.log("小苏龌龊啊");
    // },false);
    // my$("btn").addEventListener("click",function () { 
    // console.log("小苏邪恶啊");
    // },false);
    // my$("btn").addEventListener("click",function () { 
    // console.log("小苏下流啊");
    // },false);
    
      //参数1:事件类型---事件名字，有on
      //参数2:事件处理函数---函数(命名函数,匿名函数)
    
    // my$("btn").attachEvent("onclick",function () { 
    // console.log("小杨好帅哦1");
    // });
    //
    // my$("btn").attachEvent("onclick",function () { 
    // console.log("小杨好帅哦2");
    // });
    //
    // my$("btn").attachEvent("onclick",function () { 
    // console.log("小杨好帅哦3");
    // });
    
    
    </script>
    </body>

#### 为元素绑定事件兼容代码 ####

<body>
    <input type="button" value="按钮" id="btn"/>
    <script src="common.js"></script>
    <script>
    
      //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
      function addEventListener(element,type,fn) { 
        //判断浏览器是否支持这个方法
        if(element.addEventListener){ 
          element.addEventListener(type,fn,false);
        }else if(element.attachEvent){ 
          element.attachEvent("on"+type,fn);
        }else{ 
          element["on"+type]=fn;
        }
      }
    
      addEventListener(my$("btn"),"click",function () { 
        console.log("哦1");
      });
      addEventListener(my$("btn"),"click",function () { 
        console.log("哦2");
      });
      addEventListener(my$("btn"),"click",function () { 
        console.log("哦3");
      });
    
    
    
    // my$("btn")["on"+"click"]=function () { 
    //
    // };
    
    // function Person(name) { 
    // this.name=name;
    // this.sayHi=function () { 
    // console.log("您好啊");
    // };
    // }
    
    // var per=new Person("小明");
    // if(per.sayHii){//判断这个对象中有没有这个方法
    // per.sayHii();
    // }else{ 
    // console.log("没有这个方法");
    // }
    
    
    
    
    
    
    </script>
    </body>

### 复习总结 ###

## 第四部分 ##

### 绑定事件的区别 ###

总结绑定事件的区别:
      * addEventListener();
      * attachEvent()
      *
      * 相同点: 都可以为元素绑定事件
      * 不同点:
      * 1.方法名不一样
      * 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
      * 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
      *   attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
      * 4.this不同,addEventListener 中的this是当前绑定事件的对象
      *   attachEvent中的this是window
      * 5.addEventListener中事件的类型(事件的名字)没有on
      *  attachEvent中的事件的类型(事件的名字)有on
      *
      *  现在遇到的逆境,都是以后成长的阶梯
      *
      *
      *
      *
      *
      *
      *
      *
      *
      * */
    
    
      //为按钮绑定多个点击事件
    
    // my$("btn").addEventListener("click",function () { 
    // console.log(this);
    // },false);
    
    // my$("btn").attachEvent("onclick",function () { 
    // console.log(this);
    // });

### 解绑事件 ###

//1 对象.on事件名字=事件处理函数----绑定事件
    // my$("btn").οnclick=function () { 
    // console.log("我猥琐");
    // };
    // my$("btn2").οnclick=function () { 
    // //1.解绑事件
    // my$("btn").οnclick=null;
    // };
    
    // function f1() { 
    // console.log("第一个");
    // }
    // function f2() { 
    // console.log("第二个");
    // }
    // my$("btn").addEventListener("click",f1,false);
    // my$("btn").addEventListener("click",f2,false);
    //
    // //点击第二个按钮把第一个按钮的第一个点击事件解绑
    // my$("btn2").οnclick=function () { 
    // //解绑事件的时候,需要在绑定事件的时候,使用命名函数
    // my$("btn").removeEventListener("click",f1,false);
    // };
    
    
      function f1() { 
        console.log("第一个");
      }
      function f2() { 
        console.log("第二个");
      }
      my$("btn").attachEvent("onclick",f1);
      my$("btn").attachEvent("onclick",f2);
    
      my$("btn2").onclick=function () { 
          my$("btn").detachEvent("onclick",f1);
      };
      //解绑事件:
      /* * 注意:用什么方式绑定事件,就应该用对应的方式解绑事件 * 1.解绑事件 * 对象.on事件名字=事件处理函数--->绑定事件 * 对象.on事件名字=null; * 2.解绑事件 * 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件 * 对象.removeEventListener("没有on的事件类型",函数名字,false); * 3.解绑事件 * 对象.attachEvent("on事件类型",命名函数);---绑定事件 * 对象.detachEvent("on事件类型",函数名字); * * * */
    </script>

### 冒泡事件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        #dv1{ 
          width: 300px;
          height: 200px;
          background-color: red;
        }
        #dv2{ 
          width: 250px;
          height: 150px;
          background-color: green;
        }
        #dv3{ 
          width: 200px;
          height: 100px;
          background-color: blue;
        }
      </style>
      <script>
        //事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
      </script>
    </head>
    <body>
    <div id="dv1">
      <div id="dv2">
        <div id="dv3"></div>
      </div>
    </div>
    <script src="common.js"></script>
    <script>
      //事件冒泡,阻止事件冒泡,
      //如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
      // e.stopPropagation(); 谷歌和火狐支持,
      my$("dv1").onclick=function () { 
        console.log(this.id);
      };
      my$("dv2").onclick=function () { 
        console.log(this.id);
        //window.event.cancelBubble=true;
      };
      //事件处理参数对象
      my$("dv3").onclick=function (e) { 
        console.log(this.id);
        //阻止事件冒泡
        //e.stopPropagation();
        console.log(e);
      };
    // document.body.οnclick=function () { 
    // console.log("颤抖吧,你们这些愚蠢的标签");
    // };
    </script>
    </body>

### 百度搜索 ###

### BOM ###

### location对象 ###

//对象中的属性和方法
        //location对象
        //console.log(window.location);
    
    // //地址栏上#及后面的内容
    // console.log(window.location.hash);
    // //主机名及端口号
    // console.log(window.location.host);
    // //主机名
    // console.log(window.location.hostname);
    // //文件的路径---相对路径
    // console.log(window.location.pathname);
    // //端口号
    // console.log(window.location.port);
    // //协议
    // console.log(window.location.protocol);
    // //搜索的内容
    // console.log(window.location.search);
    
        onload=function () { 
          document.getElementById("btn").onclick=function () { 
            //设置跳转的页面的地址
           //location.href="http://www.jd.com";//属性----------------->必须记住
           //location.assign("http://www.jd.com");//方法
            //location.reload();//重新加载--刷新
            //location.replace("http://www.jd.com");//没有历史记录
    
    
    
          };
        };
    
      </script>
    </head>
    <body>
    <input type="button" value="显示效果" id="btn"/>

### history对象 ###

<input type="button" value="跳过去" id="btn1"/>
    <input type="button" value="前进" id="btn2"/>
    <script src="common.js"></script>
    <script>
      //跳转的
      my$("btn1").onclick = function () { 
        window.location.href = "15test.html";
      };
      //前进
      my$("btn2").onclick = function () { 
        window.history.forward();
      };
    </script>

### test ###

<input type="button" value="后退" id="btn"/>
    <script src="common.js"></script>
    <script>
      //后退
      my$("btn").onclick = function () { 
        window.history.back();
      };
    </script>

\#\#\#navigator对象

### 定时器 ###

### 摇摆案例 ###

### 案例闪烁 ###

### 案例美女时钟 ###

<body>
    <img src="" alt="" id="im" />
    <script src="common.js"></script>
    <script>
    
    
      function f1() { 
        //获取当前时间
        var dt = new Date();
        //获取小时
        var hour = dt.getHours();
        //获取秒
        var second = dt.getSeconds();
    
        hour = hour < 10 ? "0" + hour : hour;
        second = second < 10 ? "0" + second : second;
    
        my$("im").src="meimei/"+hour+"_"+second+".jpg";
      }
      f1();
      //页面加载完毕后,过了1秒才执行函数的代码
      setInterval(f1,1000);
    
    </script>
    
    </body>

### 总结复习 ###

## 第五部分 ##

### 一次性定时器 ###

//常用的,反复的执行
    // window.setInterval(function () { 
    // alert("哈哈");
    // },1000);
    
        //window.clearInterval(定时器id);//清理定时器
    
    
        //另一个定时器-------一次性的定时
    
        /* * 参数1:函数 * 参数2:时间---1000毫秒---1秒 * 返回值:该定时器的id * * * */
       // window.setTimeout(函数,时间);
    
    
        //页面加载后
        window.onload=function () { 
          //一次性的定时器
          var timeId=window.setTimeout(function () { 
            alert("您好");
          },1000);
    
          //点击这个按钮,停止这个一次性的定时器
          document.getElementById("btn").onclick=function () { 
            clearTimeout(timeId);
          };
        };
    
      </script>
    </head>
    <body>
    <input type="button" value="停下" id="btn"/>
    <script>
    
    </script>
    </body>

### 协议按钮禁用 ###

<body>
    <textarea name="texta" id="" cols="30" rows="10">
      这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
    </textarea>
    <input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
    <script src="common.js"></script>
    <script>
    
      var time=5;
     var timeId= setInterval(function () { 
    
        time--;
       my$("btn").value="请仔细阅读协议("+time+")";
        if(time<=0){ 
          //停止定时器就可以
          clearInterval(timeId);
          //按钮可以被点击了
          my$("btn").disabled=false;
          my$("btn").value="同意";
        }
    
      },1000);
    </script>
    </body>

### 点击按钮使DIV透明化 ###

### 设置DIV的宽度 ###

### 封装动画函数 ###

\#\#\#电商的简单轮播

### 电商轮播图之左右焦点 ###

### 电商之无缝轮播图 ###

### 电商完整轮播图—难理解需重复梳理逻辑 ###

### offset系列 ###

### offset系列具体的值 ###

### document直接获取元素 ###

### 图片和鼠标跟随 ###

### 复习总结 ###

## 第六部分webApi学习总结回顾 ##

复习总结

关于封装图片随鼠标移动js库

### 拖拽对话框 ###

<!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
        .login-header { 
          width: 100%;
          text-align: center;
          height: 30px;
          font-size: 24px;
          line-height: 30px;
        }
    
        ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a { 
          padding: 0px;
          margin: 0px;
        }
    
        .login { 
          width: 512px;
          position: absolute;
          border: #ebebeb solid 1px;
          height: 280px;
          left: 50%;
          right: 50%;
          background: #ffffff;
          box-shadow: 0px 0px 20px #ddd;
          z-index: 9999;
          margin-left: -250px;
          margin-top: 140px;
          display: none;
        }
    
        .login-title { 
          width: 100%;
          margin: 10px 0px 0px 0px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          font-size: 18px;
          position: relative;
          cursor: move;
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          user-select: none;
        }
    
        .login-input-content { 
          margin-top: 20px;
        }
    
        .login-button { 
          width: 50%;
          margin: 30px auto 0px auto;
          line-height: 40px;
          font-size: 14px;
          border: #ebebeb 1px solid;
          text-align: center;
        }
    
        .login-bg { 
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0px;
          left: 0px;
          background: #000000;
          filter: alpha(opacity=30);
          -moz-opacity: 0.3;
          -khtml-opacity: 0.3;
          opacity: 0.3;
          display: none;
        }
    
        a { 
          text-decoration: none;
          color: #000000;
        }
    
        .login-button a { 
          display: block;
        }
    
        .login-input input.list-input { 
          float: left;
          line-height: 35px;
          height: 35px;
          width: 350px;
          border: #ebebeb 1px solid;
          text-indent: 5px;
        }
    
        .login-input { 
          overflow: hidden;
          margin: 0px 0px 20px 0px;
        }
    
        .login-input label { 
          float: left;
          width: 90px;
          padding-right: 10px;
          text-align: right;
          line-height: 35px;
          height: 35px;
          font-size: 14px;
        }
    
        .login-title span { 
          position: absolute;
          font-size: 12px;
          right: -20px;
          top: -30px;
          background: #ffffff;
          border: #ebebeb solid 1px;
          width: 40px;
          height: 40px;
          border-radius: 20px;
        }
    
    
      </style>
    </head>
    <body>
    <div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
    <div id="login" class="login">
      <div id="title" class="login-title">登录会员
        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div>
      <div class="login-input-content">
        <div class="login-input">
          <label>用户名：</label>
          <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
          <label>登录密码：</label>
          <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>
      </div>
      <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <div id="bg" class="login-bg"></div>
    <script src="common.js"></script>
    
    <script>
    
      //获取超链接,注册点击事件,显示登录框和遮挡层
      my$("link").onclick = function () { 
        my$("login").style.display = "block";
        my$("bg").style.display = "block";
      };
    
      //获取关闭,注册点击事件,隐藏登录框和遮挡层
      my$("closeBtn").onclick = function () { 
        my$("login").style.display = "none";
        my$("bg").style.display = "none";
      };
    
      //按下鼠标,移动鼠标,移动登录框
      my$("title").onmousedown = function (e) { 
        //获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
        var spaceX = e.clientX - my$("login").offsetLeft;
        var spaceY = e.clientY - my$("login").offsetTop;
        //移动的事件
        document.onmousemove = function (e) { 
          //新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
          var x = e.clientX - spaceX+250;
          var y = e.clientY - spaceY-140;
          my$("login").style.left = x + "px";
          my$("login").style.top = y + "px";
    
        }
      };
    
      document.onmouseup=function () { 
        document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
      };
    
    </script>
    <script>
    
      //点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框
      // my$("link").οnclick=function (e) { 
      // my$("login").style.display="block";
      // //return false;
      // //e.preventDefault();
      // //上面的两个是阻止默认事件的
      // //下面的两个是阻止事件冒泡的
      // //window.event.cancelBubble=true;
      // e.stopPropagation();
      // };
      // document.οnclick=function () { 
      // my$("login").style.display="none";
      // console.log("隐藏了");
      // };
    </script>
    
    </body>
    </html>

### 放大镜案例 ###

<!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>哈哈</title>
      <style>
        * { 
          margin: 0;
          padding: 0;
        }
    
        .box { 
          width: 350px;
          height: 350px;
          margin: 100px;
          border: 1px solid #ccc;
          position: relative;
        }
    
        .big { 
          width: 400px;
          height: 400px;
          position: absolute;
          top: 0;
          left: 360px;
          border: 1px solid #ccc;
          overflow: hidden;
          display: none;
        }
    
        .mask { 
          width: 175px;
          height: 175px;
          background: rgba(255, 255, 0, 0.4);
          position: absolute;
          top: 0px;
          left: 0px;
          cursor: move;
          display: none;
        }
    
        .small { 
          position: relative;
        }
      </style>
    </head>
    <body>
    <div class="box" id="box">
      <div class="small">
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div>
      </div>
      <div class="big">
        <img src="images/big.jpg" width="800" alt=""/>
      </div>
    </div>
    
    <script src="common.js"></script>
    <script>
    
      //获取需要的元素
      var box = my$("box");
      //获取小图的div
      var small = box.children[0];
      //遮挡层
      var mask = small.children[1];
      //获取大图的div
      var big = box.children[1];
      //获取大图
      var bigImg = big.children[0];
    
      //鼠标进入显示遮挡层和大图的div
      box.onmouseover = function () { 
        mask.style.display = "block";
        big.style.display = "block";
      };
      //鼠标离开隐藏遮挡层和大图的div
      box.onmouseout = function () { 
        mask.style.display = "none";
        big.style.display = "none";
      };
    
      //鼠标的移动事件---鼠标是在小层上移动
      small.onmousemove = function (e) { 
        //鼠标此时的可视区域的横坐标和纵坐标
        //主要是设置鼠标在遮挡层的中间显示
        var x = e.clientX - mask.offsetWidth / 2;
        var y = e.clientY - mask.offsetHeight / 2;
        //主要是margin的100px的问题
        x = x - 100;
        y = y - 100;
        //横坐标的最小值
        x = x < 0 ? 0 : x;
        //纵坐标的最小值
        y = y < 0 ? 0 : y;
        //横坐标的最大值
        x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
        //纵坐标的最大值
        y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
        //为遮挡层的left和top赋值
        mask.style.left = x + "px";
        mask.style.top = y + "px";
    
        //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
        //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
    
        //大图的横向的最大移动距离
        var maxX = bigImg.offsetWidth - big.offsetWidth;
    
        //大图的纵向的最大移动距离
        //var maxY = bigImg.offsetHeight - big.offsetHeight;
    
        //大图的横向移动的坐标
        var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);
        //大图的纵向移动的坐标
        var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);
    
        //设置图片移动
        bigImg.style.marginLeft = -bigImgMoveX + "px";
        bigImg.style.marginTop = -bigImgMoveY + "px";
    
      };
    </script>
    
    
    </body>
    </html>

### 设置盒子滚动条 ###

<!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
        * { 
          margin: 0;
          padding: 0;
        }
    
        .box { 
          width: 300px;
          height: 500px;
          border: 1px solid red;
          margin: 100px;
          position: relative;
          overflow: hidden;
        }
    
        .content { 
          padding: 5px 18px 5px 5px;
          position: absolute;
          top: 0;
          left: 0;
    
        }
    
        .scroll { 
          width: 18px;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          background-color: #eee;
        }
    
        .bar { 
          height: 100px;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: red;
          border-radius: 10px;
          cursor: pointer;
        }
      </style>
    </head>
    <body>
    <div class="box" id="box">
      <div class="content" id="content">
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头
        床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿
    
      </div>
      <div id="scroll" class="scroll">
        <div class="bar" id="bar"></div>
      </div>
    </div>
    <script src="common.js"></script>
    <script>
      //获取需要的元素
    
      //最外面的div
      var box = my$("box");
      //文字div
      var content = my$("content");
      //装滚动条的div---容器
      var scroll = my$("scroll");
      //滚动条
      var bar = my$("bar");
    
      //设置滚动条的高度
      //滚动条的高/装滚动条的div的高=box的高/文字div的高
      //滚动条的高=装滚动条的div的高*box的高/文字div的高
      var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
      bar.style.height = height + "px";
    
      //移动滚动条
      bar.onmousedown = function (e) { 
        var spaceY = e.clientY - bar.offsetTop;
        document.onmousemove = function (e) { //移动事件
          var y = e.clientY - spaceY;
          y=y<0?0:y;//最小值
          y=y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y;
          bar.style.top = y + "px";
    
          //设置鼠标移动的时候,文字不被选中
    
          window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();
    
          //滚动条的移动距离/文字div的移动距离=滚动条最大的移动距离/文字div的最大移动距离
    
          //文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离
    
          var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
          //设置文字div的移动距离
          content.style.marginTop=-moveY+"px";
    
    
    
    
        };
      };
    
      document.onmouseup=function () { 
        //鼠标抬起的时候,把移动事件干掉
        document.onmousemove=null;
      };
    
    
    </script>
    
    </body>
    </html>

### 元素显隐方式的不同 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        div{ 
          width: 300px;
          height: 200px;
          border:1px solid red;
    
        }
      </style>
    </head>
    <body>
    <input type="button" value="显示效果" id="btn"/>
    <div id="dv"></div>哈哈
    <script src="common.js"></script>
    <script>
    
      document.getElementById("btn").onclick=function () { 
        //隐藏div
        //不占位
        //my$("dv").style.display="none";
        //占位
        //my$("dv").style.visibility="hidden";
        //占位
        //my$("dv").style.opacity=0;
        //占位
        //my$("dv").style.height="0px";
        //my$("dv").style.border="0px solid red";
      };
    </script>
    </body>
    </html>

### tab切换效果 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        #list li { 
          list-style-type: none;
          width: 80px;
          height: 30px;
          line-height: 30px;
          background-color: beige;
          text-align: center;
          float: left;
          margin-left: 5px;
        }
    
        #list li.current { 
          background-color: burlywood;
        }
    
        #list li a { 
          text-decoration: none;
        }
      </style>
    
    </head>
    <body>
    <div id="menu">
      <ul id="list">
        <li class="current"><a href="http://www.baidu.com">首页</a>
        </li>
        <li><a href="javascript:void(0)">播客</a></li>
        <li><a href="javascript:void(0)">博客</a></li>
        <li><a href="javascript:void(0)">相册</a></li>
        <li><a href="javascript:void(0)">关于</a></li>
        <li><a href="javascript:void(0)">帮助</a></li>
      </ul>
    </div>
    <script src="common.js"></script>
    <script>
    
      //获取所有的li标签,
      var liObjs=my$("list").getElementsByTagName("li");
      //循环遍历,找到每个li中的a,注册点击事件
      for(var i=0;i<liObjs.length;i++){ 
        //每个li中的a
        var aObj=getFirstElement(liObjs[i]);
    
        aObj.onclick=function () { 
          //第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
          for(var j=0;j<liObjs.length;j++){ 
            liObjs[j].removeAttribute("class");
          }
          //第二件事:
          //当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
          this.parentNode.className="current";
    
          return false;//阻止超链接跳转
        };
      }
    </script>
    
    </body>
    </html>

### 大量字符串拼接 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
    
    </head>
    <body>
    <input type="button" value="拼接吧" id="btn"/><br/>
    <input type="text" value=""/><br/>
    <input type="text" value=""/><br/>
    <input type="text" value=""/><br/>
    <input type="text" value=""/><br/>
    <input type="text" value=""/><br/>
    <script src="common.js"></script>
    <script>
    
      // var str="abcef";
      // console.log(str[2]);
      // str[2]="H";
      // console.log(str);
    
    
      //字符串特性:不可变性
      //点击按钮实现拼接
      // document.getElementById("btn").οnclick=function () { 
      // var str="";
      // //获取所有的文本框
      // var inputs=document.getElementsByTagName("input");
      // //每个文本框的value属性值
      // for(var i=0;i<inputs.length-1;i++){ 
      // if(inputs[i].type!="button"){ 
      // str+=inputs[i].value+"|";
      // }
      // }
      // console.log(str+inputs[inputs.length-1].value);
      // };
    
      //推荐使用数组的方式拼接大量的字符串
      document.getElementById("btn").onclick = function () { 
        var str = [];
        //获取所有的文本框
        var inputs = document.getElementsByTagName("input");
        //每个文本框的value属性值
        for (var i = 0; i < inputs.length; i++) { 
          if (inputs[i].type != "button") { 
            str.push(inputs[i].value);
          }
        }
        console.log(str.join("|"));//字符串
      };
    </script>
    
    </body>
    </html>

### 评论无刷新案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
    </head>
    <body>
    <table id="tb" border="1">
      <tbody id="tbd">
      <tr>
        <td>猪猪:</td>
        <td>我喜欢吃肉</td>
      </tr>
      </tbody>
    </table>
    <div>
      昵称:<input type="text" value="" id="userName"/><br/>
      <textarea name="" id="tt" cols="30" rows="10"></textarea><br/>
      <input type="button" value="评论一下" id="btn"/><br/>
    </div>
    <script src="common.js"></script>
    <script>
      //获取按钮,注册点击事件
      document.getElementById("btn").onclick = function () { 
        //获取昵称的元素
        var userName = my$("userName");
        //获取评论的元素
        var tt = my$("tt");
        //创建行
        var tr = document.createElement("tr");
        //行加到tbody中
        my$("tbd").appendChild(tr);
        //创建列
        var td1 = document.createElement("td");
        tr.appendChild(td1);
        td1.innerHTML = userName.value;
        //创建列
        var td2 = document.createElement("td");
        tr.appendChild(td2);
        td2.innerHTML = tt.value;
        //清空
        userName.value = "";
        tt.value = "";
      };
    
      var arr=[20,10,40,50,30];
      for(var i=0;i<arr.length-1;i++){ 
          for(var j=0;j<arr.length-1-i;j++){ 
              if(arr[j]<arr[j+1]){ 
                  var temp=arr[j];
                  arr[j]=arr[j+1];
                  arr[j+1]=temp;
              }//end if
          }// end for
      }//end for
      for(var i=0;i<arr.length;i++){ 
          console.log(arr[i]);
      }
    </script>
    
    </body>
    </html>