[JavaScript知识库]JavaScript第八天练习

1.排他功能

<div class="box" id="box">
    <div class="hd">
        <span class="current">体育</span>
        <span>娱乐</span>
        <span>新闻</span>
        <span>综合</span>
    </div>
    <div class="bd">
        <ul>
            <li class="current">我是体育模块</li>
            <li>我是娱乐模块</li>
            <li>我是新闻模块</li>
            <li>我是综合模块</li>
        </ul>
    </div>
</div>
    <script src="./common.js"></script>
    <script>
        var box = my$("box");
        var hd = cl$("hd")[0];
        var bd = cl$("bd")[0];
        var list = bd.getElementsByTagName("li");
        var spans = hd.getElementsByTagName("span");
        for(var i = 0; i < spans.length; i++) {
            spans[i].onclick = function() {
                for(var j = 0; j < spans.length; j++) {
                    spans[j].removeAttribute("class");
                }
                this.className = "current";
            }
        }
    </script>

2.排他功能升级版

<script>
    var box = document.getElementById("box");
    var hd = box.getElementsByClassName("hd")[0];
    var bd = box.getElementsByClassName("bd")[0];
    var list = bd.getElementsByTagName("li");
    var spans = hd.getElementsByTagName("span");
    for(var i = 0; i < spans.length; i++) {
        spans[i].setAttribute("index", i);
        spans[i].onclick = function() {
            for(var j = 0; j < spans.length; j++) {
                spans[j].removeAttribute("class");
            }
            this.className = "current";


            var num = this.getAttribute("index");
            for(var k = 0; k < list.length; k++) {
                list[k].removeAttribute("class");
            }
            list[num].className = "current";
        }
    }
</script>

3.获取相关节点

<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="publick.js"></script>
<script>
    var ulObj = document.getElementById("uu");
    // 父级节点
    console.log(ulObj.parentNode);
    // 父级元素
    console.log(ulObj.parentElement);
    // 子级节点
    console.log(ulObj.childNodes);//11 个包含文本
    // 子级元素
    console.log(ulObj.children);//5个

? ? 4.获取节点案例

<input type="button" value="改变标签颜色" id="btn">
<div id="dv">
    <span>大家这周要继续给力</span>
    <p>继续优秀，遇到bug问题多去讨论，共同进步</p>
    <span>大家这周要继续给力</span>
    <p>继续优秀，遇到bug问题多去讨论，共同进步</p>
    <span>大家这周要继续给力</span>
    <p>继续优秀，遇到bug问题多去讨论，共同进步</p>
    <span>大家这周要继续给力</span>
    <p>继续优秀，遇到bug问题多去讨论，共同进步</p>
    <span>大家这周要继续给力</span>
    <p>继续优秀，遇到bug问题多去讨论，共同进步</p>
    <span>大家这周要继续给力</span>
    <a href="http://www.baidu.com">百度</a>
</div>
<script src="./common.js"></script>
<script>
    my$("btn").onclick = function() {
        var dvObj = my$("dv");
        var nodes = dvObj.childNodes;
        for(var i = 0; i < nodes.length; i++) {
            if(nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
                nodes[i].style.backgroundColor = "pink";
            }
        }
    }
</script>

5.节点操作

注意空格也算在length上，需要一个变量计算

<input type="button" value="变色" id="btn">
<ul id="uu">
    <li>西施</li>
    <li>昭君</li>
    <li>貂蝉</li>
    <li>玉环</li>
    <li>芙蓉姐姐</li>
    <li>范冰冰</li>
</ul>
<script src="./common.js"></script>
<script>
    my$("btn").onclick = function() {
        var count = 0;
        var nodes = my$("uu").childNodes;
        for(var i = 0; i < nodes.length; i++) {
            if(nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
                nodes[i].style.backgroundColor = count % 2 == 0 ? "red" : "yellow";
                count++;
            }
        }
    }
</script>

6.拼接切换背景图片

<div id="mask">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
</div>
<script src="./common.js"></script>
<script>
    var imgObjs = my$("mask").children;
    for(var i = 0; i < imgObjs.length; i++) {
        imgObjs[i].onclick = function() {
            // document.body.style.backgroundImage = "url('"+this.src+"')";
            document.body.style.backgroundImage = "url(\""+this.src+"\")";
        }
    }
</script>

7.全选框案例

<div class="wrap">
<table>
    <thead>
    <tr>
        <th>
            <input type="checkbox" id="j_cbAll"/>
        </th>
        <th>菜名</th>
        <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>红烧肉</td>
        <td>田老师</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>西红柿鸡蛋</td>
        <td>田老师</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>油炸榴莲</td>
        <td>田老师</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>清蒸助教</td>
        <td>田老师</td>
    </tr>
    </tbody>
</table>
</div>
<script src="./common.js"></script>
<script>
    var ckAll = my$("j_cbAll");
    var cks = my$("j_tb").getElementsByTagName("input");
    ckAll.onclick = function() {
        for(var i = 0; i < cks.length; i++) {
            cks[i].checked = this.checked;
        }
    }
    for(var i = 0; i < cks.length; i++) {
        cks[i].onclick = function() {
            var flag = true;
            for(var j = 0; j < cks.length; j++) {
                if(!cks[j].checked) {
                    flag = false;
                    break;
                }
            }
            ckAll.checked = flag;
        }
    }
</script>

8.拼接创建标签

 <input type="button" value="创建列表" id="btn">
 <div id="dv"></div>
 <script src="./common.js"></script>
 <script>
     var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚","小龙女","黄蓉"];
     my$("btn").onclick = function() {
         var str = "<ul>"
             for(var i = 0; i < names.length; i++) {
                 str += "<li>" + names[i] + "</li>";
             }
         str += "</ul>"
         my$("dv").innerHTML = str;

         var list = my$("dv").getElementsByTagName("li");
         for(var i = 0; i < list.length; i++) {
             list[i].onmouseover = function() {
                 this.style.backgroundColor = "pink";
             }
             list[i].onmouseout = function() {
                 this.style.backgroundColor = "";
             }
         }
     }
 </script>

9.创建元素的三种方式

第一种    
<input type="button" value="创建元素" id="btn">
<script src="publick.js"></script>
<script>
    my$("btn").onclick = function(){
        document.write("<p>我是一个段落标签</p>");
    }
    <script>
第二种
    my$("btn").onclick = function(){
        my$("dv").innerHTML = '<p>锄禾日当午，汗滴禾下土，谁知盘中餐，真香！</p>';
    }
第三种
<input type="button" value="创建元素" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
    my$("btn").onclick = function(){
        // 第一步：先创建元素
        var pObj = document.createElement("p");//创建了元素
        pObj.innerText = "这是一个段落标签";
        // 第二步：追加到父元素里面，这个我们后面无缝轮播图会用到，还会学到克隆节点
        my$("dv").appendChild(pObj);
    }
</script>

10.动态创建列表

<script src="./common.js"></script>
<script>
    window.onload = function() {
        var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
        my$("btn").onclick = function() {
            var ulObj = document.createElement("ul");
            my$("dv").appendChild(ulObj);
            for(var i = 0; i < kungfu.length; i++) {
                var liObj = document.createElement("li");
                liObj.innerHTML = kungfu[i];
                ulObj.appendChild(liObj);
                liObj.onmouseover = mouseoverHandle;
                liObj.onmouseout = mouseoutHandle;
            }

        }
        function mouseoverHandle(){//命名函数
            this.style.backgroundColor = "skyblue";
        }

        function mouseoutHandle(){
            this.style.backgroundColor = "";
        }
    }
</script>
</head>
<body>
<input type="button" value="创建元素" id="btn">
<div id="dv"></div>

?