javascript新手實例1-DOM基本操做

時間 2019-11-09

標籤 javascript 新手實例 dom 基本欄目 JavaScript 简体版

原文原文鏈接

學習javascript好多同窗不知道怎麼上手，跟着網上的新手教程作了一遍又以爲javascript很簡單，可是真正本身用起來又以爲寫不出什麼東西，我以爲學習最好的方法就是跟着有趣的例子作,因此咱們的口號是「天天一例，輕鬆javascript」javascript

今天給你們帶來第一個例子，簡單Dom操做，效果先看下圖css

html代碼html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DIV設置樣式</title>
        <script src="setDiv.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="setDiv.css"/>
    </head>
    <body>
        <div id="mainbox">
            <p>請爲下面的DIV設置樣式：</p>
            <input type="button" name="" id="setButton" value="設置" />
            <div id="setBox"></div>
        </div>
        <div id="shadow"></div>
        <div id="jumpDiv">
            <div class="controlBox">
                <p>請選擇背景顏色</p>
                <ul>
                    <li style="background: red; color: #fff;">紅</li>
                    <li style="background: yellow; color: #fff;">黃</li>
                    <li style="background: blue; color: #fff;">藍</li>
                </ul>
            </div>
            <div class="controlBox">
                <p>請選擇寬度</p>
                <ul>
                    <li>200</li>
                    <li>300</li>
                    <li>400</li>
                </ul>
            </div>
            <div class="controlBox">
                <p>請選擇高度</p>
                <ul>
                    <li>400</li>
                    <li>500</li>
                    <li>600</li>
                </ul>
            </div>
            <div id="controlButton">
                <input type="button" name="" id="reset" value="恢復" />
                <input type="button" name="" id="ok" value="肯定" />                
            </div>
        </div>
    </body>
</html>

css代碼java

ul li {
    display: inline;
    list-style-type: none;
}
p {
    float: left;
}
#mainbox {
    width: 740px;
    height: 420px;
    background: #ccc;
    float: left;
    padding: 10px;
}
#mainbox p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    line-height: 38px;
}
#mainbox input {
    border: none;
    background: #ff0000;
    color: #fff;
    width: 100px;
    height: 40px;
    font-weight: bold;
    cursor: pointer;    
}
#setBox {
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    margin: 20px 0;
    background: #fff;
}
#shadow {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    opacity: 0.6;
    z-index: 9;
    display: none;
}
#jumpDiv {
    width: 270px;
    height: 170px;
    background: #fff;
    border: 10px solid #999;
    position: absolute;
    padding: 20px 0 0 30px;
    display: none;
    z-index: 99;
    left: 50%;
    top:15%;
    margin: 0 auto;
}
.controlBox {
    width: 100%;
    float: left;
}
.controlBox p {
    width: 120px;
    margin: 0;
    padding: 6px 0 0 0;
}
#jumpDiv ul {
    width: 140px;
    float: left;
    padding: 0;
    margin: 0;
}
#jumpDiv ul li {
    width: 30px;
    height: 30px;
    border: 1px solid #999;
    font-size: 10px;
    float: left;
    margin: 5px;
    background: #ddd;;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    display: block;
}
#controlButton {
    text-align: center;
    padding: 5px 0 0 0;
    width: 100%;
    height: 30px;
    float: left;
}
#controlButton  input {
    width: 60px;
    height: 30px;
    background: #000080;
    text-align: center;
    color: #fff;
    line-height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
}

javascript代碼函數

window.onload = function () {
    
    function luka(element) {
        //if (/#/.test(element) == true) 正則也能夠匹配，不過正則的效率沒有函數高，貌似任何語言都是
        if (element.indexOf('#') > -1) {
            return document.getElementById(element.replace(/#/,''));
        };
        if (element.indexOf('.') > -1) {
            return document.getElementsByClassName(element.replace(/\./g,''));
        };
        if (/^[a-zA-Z]+&/.element = true) {
            return document.getElementsByTagName(element);
        };
        console.log(element);
    };
    
    //下面主要是爲了偷懶寫的循環，否則一個個li去學控制很煩，並且這樣能讓html看着很清爽，記住寫代碼就是要怎麼偷懶怎麼寫，這裏的偷懶是複用的意思，用最少的功能實現最優的功能
    function liClick() {
        var obj = luka("li");
        //console.log(obj.length);
        for (var i = 0; i < obj.length; i++) {
            obj[i].index = i;
            obj[i].onclick = function() {
                 var numClick = this.index;
                 if (0 <= numClick <= 2) {
                    luka("#setBox").style.backgroundColor = luka("li")[numClick].style.backgroundColor;
                 };
                 if (3 <= numClick <= 5) {
                    luka("#setBox").style.width = luka("li")[numClick].innerHTML+"px";
                 };
                 if (6 <= numClick <= 8) { //等效 numClick == 6 || numClick == 7 || numClick == 8
                    luka("#setBox").style.height = luka("li")[numClick].innerHTML+"px";
                 };
            };
        };
    };
    
    function shadow() {
        luka("#shadow").style.display = "none";
        luka("#jumpDiv").style.display = "none";
    };
    
    luka("#setButton").onclick = function() {
        luka("#shadow").style.display = "block";
        luka("#jumpDiv").style.display = "block";
    };
    
    luka("#reset").onclick = function() {
        luka("#setBox").style.width = "100px";
        luka("#setBox").style.height = "100px";
        luka("#setBox").style.backgroundColor = "#fff";
    };
    
    luka("#ok").onclick = shadow;
    luka("#shadow").onclick = shadow; //點擊陰影關閉遮罩和彈出的控制框
    luka("#jumpDiv").onmouseover = liClick; //綁定事件響應的層
    
}

知識點學習

document.getElementById or getElementsByClassName or getElementsByTagName 這類操做咱們常常要用，反覆打，又麻煩，效率又低，因此咱們封裝一個庫，方便以後調用，我寫的這個：優化

luka("#id")這種方式就能夠調用getElementById

luka(".id")調用getElementsByClassName

luka("element")調用getElementsByTagName

PS：爲何叫luka是由於我喜歡，我愛

不知道你們是否是和我同樣，剛開始以爲遮罩很神奇，其實真作了就很簡單，遮罩就是加了一個div的半透明層，操做一下控制這個層的display屬性就能夠簡單的實現了

思考：this

彈出的層怎麼能用鼠標拖動呢？若是你有興趣，實現了回覆我吧

最後求大神指教，求大神優化代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。