JavaScript第九天练习

本文主要是介绍JavaScript第九天练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  1.创建表格

<input type="button" value="创建表格" id="btn">
<div id="dv"></div>
<script src="./common.js"></script>
<script>
    var arr = [
        {name: "百度", href: "https://www.baidu.com"},
        {name: "谷歌", href: "https://www.goole.com"},
        {name: "优酷", href: "https://www.youku.com"},
        {name: "土豆", href: "https://www.tudou.com"},
        {name: "爱奇艺", href: "https://www.aiqiyi.com"}
    ];
    my$("btn").onclick = function() {
        var tableObj = document.createElement("table");
        tableObj.border = "1";
        tableObj.cellPadding = "0";
        tableObj.cellSpacing = "0";
        my$("dv").appendChild(tableObj);
        for(var i = 0; i < arr.length; i++) {
            var dt = arr[i];
            var trObj = document.createElement("tr");
            tableObj.appendChild(trObj);
            var td1 = document.createElement("td");
            td1.innerText = dt.name;
            trObj.appendChild(td1);
            var td2 = document.createElement("td");
            td2.innerHTML = "<a href=\"" + dt.href + "\">" + dt.name + "</a>";
            trObj.appendChild(td2);
        }
    }
</script>

    2.焦点实现表单功能

<p>
    昵称：
    <input type="text" id="username" value="请输入昵称">
    <span id="spanId"></span>
</p>
<script src="./common.js"></script>
<script>
    var spans = document.getElementById("spanId");
    my$("username").onfocus = function() {
        if(this.value == "请输入昵称") {
            this.value = "";
        }
    }
    my$("username").onblur = function() {
        if(this.value == "") {
            this.value = "请输入昵称";
        } else {
            if(this.value.length < 2 || this.value.length > 6) {
                spans.innerText = "输入格式有误，请重新输入";
                spans.style.color = "red";
                username.onfocus = function() {
                    this.value = "";
                    spans.innerText = "";
                }
            } else {
                spans.innerText = "√";
                spans.style.color = "green";
                return this.value;
            }
        }
    }
</script>

    3.元素相关案例

<button id="btn1">显示效果</button>
<button id="btn2">干掉第一个子元素</button>
<button id="btn3">干掉所有子元素</button>
<button id="btn4">复制最后一个子元素</button>
<div id="box"></div>
<script src="./common.js"></script>
<script>
    var i = 0;
    my$("btn1").onclick = function() {
        i++;
        var obj = document.createElement("input");
        obj.type = "button";
        obj.value = "按钮" + i;
        my$("box").insertBefore(obj, my$("box").firstElementChild);
    }
    my$("btn2").onclick = function() {
        my$("box").removeChild(my$("box").firstElementChild);
    }
    my$("btn3").onclick = function() {
        while(my$("box").firstElementChild) {
            my$("box").removeChild(my$("box").firstElementChild);
        }
    }
    my$("btn4").onclick = function() {
        var last = my$("box").lastElementChild.cloneNode();
        my$("box").appendChild(last);
    }
</script>

    4.动态创建列表

<a href="https://www.baidu.com"></a>
<button id="btn">点击</button>
<div id="box"></div>
<script src="./common.js"></script>
<script>
    var arr = [
        {
            names: "百度",
            href: "https://www.baidu.com",
            content: "百度一下，你就知道"
        },
        {
            names: "淘宝",
            href: "https://www.taobao.com",
            content: "淘宝网 - 淘！我喜欢"
        },
        {
            names: "京东",
            href: "https://www.jd.com",
            content: "京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！"
        },
        {
            names: "新浪",
            href: "https://www.sina.com.cn",
            content: "新浪首页"
        }
    ];
    my$("btn").onclick = function() {
        if(my$("tableId")) {
            return false;
        }
        var tableObj = document.createElement("table");
        tableObj.id = "tableId";
        tableObj.border = "1";
        tableObj.cellSpacing = "0";
        my$("box").appendChild(tableObj);
        for(var i = 0; i < arr.length; i++) {
            var arrList = arr[i];
            var trObj = document.createElement("tr");
            tableObj.appendChild(trObj);
            for(var key in arrList) {
                var tdObj = document.createElement("td");
                tdObj.innerHTML = arrList[key];
                trObj.appendChild(tdObj);
            }
        }
    }
</script>

    5.第一种绑定事件&解绑

<input type="button" value="绑定事件" id="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="./common.js"></script>
<script>
    my$("btn1").onclick = function() {
        console.log("绑定了");
    }
    my$("btn2").onclick = function() {
        my$("btn1").onclick = null;
    }
</script>

    6.第二种绑定事件&解绑

<input type="button" value="绑定事件" id="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="./common.js"></script>
<script>
    function f1() {
        console.log("我是1");
    }
    function f2() {
        console.log("我是2");
    }
    my$("btn1").addEventListener("click", f1, false);
    my$("btn1").addEventListener("click", f2, false);
    my$("btn2").onclick = function() {
        my$("btn1").removeEventListener("click", f1, false);
        my$("btn1").removeEventListener("click", f2, false);
    }
</script>

    7.第三种绑定事件&解绑 只支持IE8以下版本

<input type="button" value="绑定事件" id="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="./common.js"></script>
<script>
    function f1() {
        console.log("第一");
    }
    function f2() {
        console.log("第二");
    }
    my$("btn1").attachEvent("onclick", f1);
    my$("btn1").attachEvent("onclick", f2);
    my$("btn2").onclick = function() {
        my$("btn1").detachEvent("onclick", f1);
    }
</script>

    8.事件冒泡的应用target

<ul id="ul">
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
</ul>
<script src="./common.js"></script>
<script>
    my$("ul").onclick = function(event) {
        var target = event.target;
        target.style.backgroundColor = "yellow";
    }
</script>

    9.同一元素绑定多个事件

<div id="box"></div>
<script src="./common.js"></script>
<script>
    my$("box").onclick = f1;
    my$("box").onmouseover = f1;
    my$("box").onmouseout = f1;
    function f1(event) {
        switch(event.type) {
            case "click": 
                console.log("我被点击了");
            break;
            case "mouseover": 
                console.log("我进来了");
            break;
            case "mouseout": 
                console.log("我又出去了");
            break;
        }
    }
</script>

10.模拟搜索框

<div class="search">
    <input type="text" id="txt">
    <button>白渡一下</button>
</div>
<div id="box"></div>
<script src="./common.js"></script>
<script>
    my$("txt").onfocus = function() {
        this.style.border = "2px solid #4e6ef2";
    }
    my$("txt").onblur = function() {
        this.style.border = "2px solid #c4c7ce";
    }
    var keyWords = ["吃火锅", "吃串串", "吃火龙果", "喝水", "喝岩浆", "喝奶茶", "我好喜欢你"];
    my$("txt").onkeyup = function() {
        if(my$("dv")) {
            my$("box").removeChild(my$("dv"));
        }
        var text = this.value;
        var arr = [];
        for(var i = 0; i < keyWords.length; i++) {
            if(keyWords[i].indexOf(text) == 0) {
                arr.push(keyWords[i]);
            }
        }
        if(text.length == 0 || arr.length == 0) {
            if(my$("dv")) {
                my$("box").removeChild(my$("dv"));
            }
            return false;
        }
        var box = document.createElement("div");
        box.id = "dv";
        my$("box").appendChild(box);
        box.style.border = "2px solid #4e6ef2";
        box.style.fontSize = "38px";
        box.style.width = "654px";
        box.style.margin = "auto";
        box.style.cursor = "pointer";
        for(var i = 0; i < arr.length; i++) {
            var pObj = document.createElement("P");
            box.appendChild(pObj);
            pObj.innerHTML = arr[i];
            pObj.onmouseover = function() {
                this.style.backgroundColor = "pink";
            }
            pObj.onmouseout = function() {
                this.style.backgroundColor = "";
            }
            pObj.onclick = function() {
                my$("txt").value = this.innerText;
                my$("box").removeChild(my$("dv"));
            }
        }
    }

这篇关于JavaScript第九天练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！