摘要：學(xué)習(xí)好多同學(xué)不知道怎么上手，跟著網(wǎng)上的新手教程做了一遍又覺(jué)得很簡(jiǎn)單，但是真正自己用起來(lái)又覺(jué)得寫(xiě)不出什么東西，我覺(jué)得學(xué)習(xí)最好的方法就是跟著有趣的例子做所以我們的口號(hào)是每天一例，輕松今天給大家?guī)?lái)第一個(gè)例子，簡(jiǎn)單操作，效果先看下圖代碼設(shè)置樣式

學(xué)習(xí)javascript好多同學(xué)不知道怎么上手，跟著網(wǎng)上的新手教程做了一遍又覺(jué)得javascript很簡(jiǎn)單，但是真正自己用起來(lái)又覺(jué)得寫(xiě)不出什么東西，我覺(jué)得學(xué)習(xí)最好的方法就是跟著有趣的例子做,所以我們的口號(hào)是“每天一例，輕松javascript”

今天給大家?guī)?lái)第一個(gè)例子，簡(jiǎn)單Dom操作，效果先看下圖

html代碼

    
        
        
        
        
    
    
        

            
請(qǐng)為下面的DIV設(shè)置樣式：
            
            

        
        

        

            

                
請(qǐng)選擇背景顏色
                

                    
紅
                    
黃
                    
藍(lán)
                
            
            

                
請(qǐng)選擇寬度
                

                    
200
                    
300
                    
400
                
            
            

                
請(qǐng)選擇高度
                

                    
400
                    
500
                    
600
                
            
            

                
                                
            
        
    

css代碼

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: #ffffd;;
    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) 正則也可以匹配，不過(guò)正則的效率沒(méi)有函數(shù)高，貌似任何語(yǔ)言都是
        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);
    };
    
    //下面主要是為了偷懶寫(xiě)的循環(huán)，不然一個(gè)個(gè)li去學(xué)控制很煩，而且這樣能讓html看著很清爽，記住寫(xiě)代碼就是要怎么偷懶怎么寫(xiě)，這里的偷懶是復(fù)用的意思，用最少的功能實(shí)現(xiàn)最優(yōu)的功能
    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; //點(diǎn)擊陰影關(guān)閉遮罩和彈出的控制框
    luka("#jumpDiv").onmouseover = liClick; //綁定事件響應(yīng)的層
    
}

知識(shí)點(diǎn)

document.getElementById or getElementsByClassName or getElementsByTagName 這類操作我們經(jīng)常要用，反復(fù)打，又麻煩，效率又低，所以我們封裝一個(gè)庫(kù)，方便之后調(diào)用，我寫(xiě)的這個(gè)：

luka("#id")這種方式就可以調(diào)用getElementById
luka(".id")調(diào)用getElementsByClassName
luka("element")調(diào)用getElementsByTagName
PS：為什么叫l(wèi)uka是因?yàn)槲蚁矚g，我愛(ài)



不知道大家是不是和我一樣，剛開(kāi)始覺(jué)得遮罩很神奇，其實(shí)真做了就很簡(jiǎn)單，遮罩就是加了一個(gè)div的半透明層，操作一下控制這個(gè)層的display屬性就可以簡(jiǎn)單的實(shí)現(xiàn)了


思考：
彈出的層怎么能用鼠標(biāo)拖動(dòng)呢？如果你有興趣，實(shí)現(xiàn)了回復(fù)我吧


最后求大神指教，求大神優(yōu)化代碼