2018年3月

描述：使得列表发生隔行换色
实现方法：把所有的行封装在一个数组里，进行遍历，对数组中的每一个元素进行判断，偶数个的%2就会等于0；这样就可以对偶数行或者奇数行进行背景色的控制了。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        ul{
            text-align: center;
            list-style: none;
            width: 500px;
            margin: 0 auto;
        }
        li{
            height: 30px;
            cursor:pointer;
            font:700 16px/30px "华文中宋";
        }
    </style>
</head>
<body>
    <ul>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
        <li>天将降大任于斯人也</li>
    </ul>
</body>
</html>
<script>
    //方法1
   /* var arr = document.getElementsByTagName("li");
    for (var i = 0;i<arr.length;i++){
        if(i%2===0){
            arr[i].style.background="#64ffd8";
        }
    }*/
   //方法2
    var ul = document.getElementsByTagName("ul")[0];
    var arr = ul.childNodes;
    var newArr = [];
    for (var i = 0;i<arr.length;i++){
        if(arr[i].nodeType===1){
            newArr.push(arr[i]);
        }
    }
    for (var i = 0;i<newArr.length;i++){
        if(i%2!=0){
            newArr[i].style.background = "#64ffd8";
        }
    }
</script>

元素节点

元素节点就是HTML标签元素，元素节点主要提供了对元素标签名、子节点及属性的访问；

属性节点

属性节点，有的叫特性节点，差不多一个意思；

文本节点

文本节点的三个node属性，nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本，其父节点 parentNode 指向包含该文本节点的元素节点，文本节点没有子节点；IE8及以下浏览器不识别空白文本节点，而其他浏览器会识别空白文本节点 ；所以有时候我们需要清理空白文本节点；
操作案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" value="111">节点</div>

<script>

    var ele = document.getElementById("box");//元素节点
    var att = ele.getAttributeNode("id");//属性节点
    var txt = ele.firstChild;//文本节点

    console.log(ele.nodeType);//1
    console.log(att.nodeType);//2
    console.log(txt.nodeType);//3

    //nodeName
    console.log(ele.nodeName);//DIV
    console.log(att.nodeName);//id
    console.log(txt.nodeName);//#text

    //nodeValue
    console.log(ele.nodeValue);//null
    console.log(att.nodeValue);//box
    console.log(txt.nodeValue);//你好

</script>
</body>
</html>

描述：鼠标经过上方的tab栏，tab栏的底色发生改变，tab栏下方的内容发生改变
实现方式：当鼠标经过tab栏的时候，触发一个javascript的经过的事件，该事件是的tab栏所有的标签的className属性发生变化，使得所有的标签都失去原有的特殊属性，下方的span标签同样失去同样的特殊属性，然后给经过时的标签与对应的span标签添加特殊的属性。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab栏的切换</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    ul {
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style: none;
    }
    li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsun";
        background-color: #dbffdd;
        cursor: pointer;
    }
    span {
        display: none;
        width: 500px;
        height: 360px;
        background-color: #a2a5ff;
        text-align: center;
        font: 700 150px/360px "simsun";
    }
    .show {
        display: block;
    }
    .current {
        background-color: #a2a5ff;
    }
</style>
<body>
     <div class="box">
         <ul>
             <li class="current">1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
         </ul>
         <span class="show">1</span>
         <span>2</span>
         <span>3</span>
         <span>4</span>
         <span>5</span>
     </div>
</body>
</html>
<script>
    //方式1
    /*var boxArr = document.getElementsByClassName("box");
    for(var i = 0; i<boxArr.length;i++){
        fn(boxArr[i]);
    }
    function fn(ele){
        var liArr = ele.getElementsByTagName("li");
        var spanArr = ele.getElementsByTagName("span");
        for (var i = 0;i<liArr.length;i++){
            liArr[i].index = i;
            liArr[i].onmouseover = function () {
                for (var j = 0;j<liArr.length;j++) {
                    liArr[j].className="";
                    spanArr[j].className="";
                }
                this.className = "current";
                spanArr[this.index].className="show";
            }
        }
    }*/
    //方式2
    var boxArr = document.getElementsByClassName("box");
    for (var i = 0;i<boxArr.length;i++){
        fn(boxArr[i]);
    }
    function fn(ele) {
        var liArr = ele.getElementsByTagName("li");
        var spanArr = ele.getElementsByTagName("span");
        for (var i = 0 ;i<liArr.length;i++){
            liArr[i].setAttribute("index",i);
            liArr[i].onmouseover = function () {
                for (var j = 0;j<liArr.length;j++){
                    liArr[j].removeAttribute("class");
                    spanArr[j].removeAttribute("class");
                }
                this.setAttribute("class","current");
                spanArr[this.getAttribute("index")].setAttribute("class","show");
            }
        }
    }
</script>

描述：当点击全选是，选中下面全部的复选框，当复选框全部选中时，点击返现则取消选择，当复选框有没有选中的项的时候，全选按钮取消全选。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选和反选 </title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" id="theadInp"></th>
                <td>标题</td>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
            </tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
    var topInt = document.getElementById("theadInp");
    var tbody = document.getElementById("tbody");
    var botInpArr = tbody.getElementsByTagName("input");
    topInt.onclick = function () {
        for(var i = 0;i<botInpArr.length;i++){
            botInpArr[i].checked = this.checked;
        }
    }
    for (var i = 0;i<botInpArr.length;i++){
        botInpArr[i].onclick = function () {
            //开闭原则
            var bool = true;
            for(var j = 0;j<botInpArr.length;j++){
                if(botInpArr[j].checked===false){
                    bool = false;
                }
                topInt.checked = bool;
            }
        }
    }
</script>

需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
注意：html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window。
只有传递的this才指的是标签本身。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单位数的验证</title>
    <style>
        span{
            color: red;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
        .wrong {
            border: 1px solid red;
        }
        .right {
            border: 1px solid #91B81D;
        }
    </style>
</head>
<body>
    账号：<input type="text" onblur="fn(this)"><span class="hide">用户名不符合格式</span><br>
    密码：<input type="text " onblur="fn(this)"><span class="hide">密码不符合格式</span>
</body>
</html>
<script>
    var sp = document.getElementsByTagName("span")[0];
    function fn(inp) {
        if(inp.value.length<6 || inp.value.length>12){
            inp.className = "wrong";
            sp.className = "show";
        }else{
            inp.className = "right";
            sp.className = "none";
        }
    }
</script>

描述 ：表单里面的提示语，样式1，当表单的输入框获取到焦点的时候，提示文字消失，兼容所有主流的浏览器。样式2，当开始向文本框中输入内容的时候，提示语消失。样式3则与样式1效果相同，但是采用的事heml自带的样式，使用的表单的placeholder属性，兼容性不太好，所以一般不用。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单内容提示</title>
    <style>
        label{
            position: absolute;
            top: 32px;
            left: 67px;
            font-size: 15px;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    样式1：<input type="text" id="inp1" value="样式1"><br>
    样式2：<label for="inp2">样式2</label><input type="text" id="inp2"><br>
    样式3：<input type="text" id="inp3" placeholder="样式3">
</body>
</html>
<script>
    //获取事件源和相关元素
    var inp1 = document.getElementById("inp1");
    var inp2 = document.getElementById("inp2");
    var inp3 = document.getElementById("inp3");
    //第一种样式
    inp1.onfocus = function () {
        //当表单获取焦点的时候，如果值为默认值，则清空
        if(this.value==="样式1"){
            inp1.value = "";
        }
    }
    //当表单失去焦点时，如果值为空，则值恢复默认值
    inp1.onblur = function () {
        if(this.value===""){
            inp1.value="样式1";
        }
    }
    //第二种样式
    var lab = document.getElementsByTagName("label")[0];
    inp2.oninput = function () {
        lab.className = "hide"
    }
</script>

描述：当用户点击禁用按钮的时候，文本框就会变为禁用状态，用户不可以进行输入，当用户点击解除禁用的时候，文本框恢复以前的状态，可以进行编辑输入。
关键字：disabled，当disabled的值为true，或者字符串转换成boolean类型时，值为true的时候，文本框就会进入禁用状态，不可以进行编辑。
代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>禁用文本框</title>
</head>
<body>
    用户名：<input type="text" value="禁用文本框"><button>禁用</button><button>解除禁用</button>
</body>
</html>
<script>
    //获取事件源和相关元素
    var inp = document.getElementsByTagName("input")[0];
    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];
    //绑定事件
    btn1.onclick = function () {
        //书写驱程序
        inp.disabled = true;
    }
    btn2.onclick = function () {
        //书写驱动程序
        inp.disabled = false;
    }
</script>

描述：当鼠标经过的时候，显示二维码，鼠标移开的时候，二维码隐藏，并且二维码时钟位于所有内容最前面，并且处于同一位置。
注意：图片根据自己的项目来进行自定义。
实现代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示和隐藏二维码</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 1200px;
            height: 1200px;
            margin: 0 auto;
            background: aquamarine;
        }
        .small{
            width: 50px;
            height: 50px;
            position: fixed;
            top: 200px;
            right: 10px;
        }
        .big{
            width: 152px;
            height: 149px;
            position: fixed;
            top: 200px;
            right: 60px;
            display: none;
            z-index: 5;
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="content">
        <div class="small">
            <a href="#" class="aBig">
                <img src="images/smal1.jpg" />
            </a>
        </div>
        <div class="big">
            <img src="images/big.png" />
        </div>
    </div>
</body>
</html>
<script>
    /*获取相关元素和事件源*/
    var small = document.getElementsByClassName("aBig")[0];
    var big = document.getElementsByClassName("big")[0];
    /*绑定事件*/
    small.onmouseover = fn1;
    small.onmouseout = fn2;
    /*定义方法*/
    function  fn1() {
        big.className = "big show";
    }
    function fn2() {
        big.className = "big hide";
    }
</script>

节点的访问关系都是属性。节点的操作都是函数或者方法。

创建节点

  • 新的标签（节点） = document.createElement("标签名");
  • document.write();
  • 直接利用元素的innerHTNL方法。（innerText方法不识别标签）

插入节点（使用节点）

  • 使用方法： 父节点.appendChild();
    父节点.appendChild(新节点); 父节点的最后插入一个新节点

  • 使用方法：父节点.insertBefore(要插入的节点，参考节点)；
    父节点.insertBefore(新节点,参考节点)在参考节点前插入;
    如果参考节点为null，那么他将在节点最后插入一个节点。

    删除节点

    用法：用父节点删除子节点。
    父节点.removeChild（子节点）;必须制定要删除的子节点
    节点自己删除自己：
    不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)。

    复制节点

    用法：oldNode.cloneNode（true）。
    注意：想要复制的节点调用这个函数cloneNode()，得到一个新节点。 方法内部可以传参，入股是true，深层复制，如果是false，只复制节点本身。
    新节点=要复制的节点.cloneNode(参数) ;
    注意：

  • 参数可选复制节点

  • 用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

    节点属性（节点.属性）

    获取：getAttribute(名称)
    设置：setAttribute(名称, 值)
    删除：removeAttribute(名称)
    注意：

  • IE6、7不支持。
  • 调用者：节点。
  • 有参数,但是没有返回值。
  • 每一个方法意义不同。

附录：DOM元素

  • DOM就是html文档的模型抽象。数据以树的形式在内存中排列。
  • 节点就是DOM的组成。是一个对象，有属性和方法。获取方式有很多种。
  • 节点分为元素节点（标签），文本节点，属性节点。
    区分方法：nodeType: 1是标签,2是属性,3是文本

节点的访问关系，是以属性的方式存在的。
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点 （ parentNode ）

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

兄弟节点

sibling:就是兄弟的意思。
next：下一个的意思。
previous:前一个的意思。
nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。
nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。
总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。
previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。
总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

单个子节点

firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。
第一个子节点=父节点.lastElementChild|| 父节点.lastChild

所有子节点

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点
nodeType == 3 是文本节点
子节点数组 = 父节点.childNodes; 获取所有节点。
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中，注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。

得到自己的所有兄弟节点

节点自己.parentNode.children[index];随意得到兄弟节点。

function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}

定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所哟与的儿子，只要不是自己就放进数组中。

  1. 1
  2. 2
  3. 3