className 類名

添加類名：元素.className=’main’;
移出類名：元素.className=’’;

index是索引的意思（在JS里面）；

.checked單選按鈕選擇狀態(tài)；false表示未選中，true表示選中

三目運(yùn)算符語(yǔ)法：

當(dāng)你的代碼出現(xiàn)if（…）{…}else{…}的時(shí)候；
是，可以，通過(guò)，三目運(yùn)算符來(lái)代替的；

表達(dá)式？結(jié)果1：結(jié)果2；

如果表達(dá)式結(jié)果為真（true），那么返回結(jié)果1；
如果表達(dá)式結(jié)果為假（false），那么返回結(jié)果2；

var a=3;
If(a>5){
    Alert(‘a(chǎn)比5大’)
}else{
    Alert(‘a(chǎn)比5小’)
}
a>5?alert(‘a(chǎn)比5大’)：alert(‘a(chǎn)比5小’)；

txt.focus();     自動(dòng)獲取焦點(diǎn)；
this.select();    選中表單內(nèi)容；
oninput事件：     用戶輸入時(shí)發(fā)生的時(shí)間；
onchange         下拉菜單事件；
onfocus           獲得焦點(diǎn)
onblur           失去焦點(diǎn)

數(shù)組添加和刪除方法

我們經(jīng)常要進(jìn)行變量的更改；
那么我們一個(gè)數(shù)組，就是多個(gè)變量，是不是可以對(duì)數(shù)組內(nèi)的變量進(jìn)行修改；

那么，第一個(gè)方法：在數(shù)組的末尾添加內(nèi)容：

var arrr=[1,3,5]
arr.push(0);//在數(shù)組的末尾添加

  // 添加完成之后，變成arr=[1,3,5,0]

arr.unshift(0)//在數(shù)組的開(kāi)頭添加
    // 添加完成之后，變成arr=[0,1,3,5,0]
    // 添加完成之后，返回?cái)?shù)組的新的長(zhǎng)度

arr.pop();//刪除數(shù)組最后一個(gè)元素
     // 把數(shù)組最后一個(gè)元素刪除掉了，并且，會(huì)把刪除掉的值返回回來(lái)；
arr.shift() //刪除開(kāi)頭第一個(gè)

過(guò)渡（transition: all 5s;）

CSS的屬性，過(guò)度，當(dāng)元素屬性發(fā)生改變的時(shí)候，不會(huì)一下子變，而是慢慢變，變得時(shí)間由你定
比如我們hover讓div變小，一般就直接瞬間變小
加了transition: all 5s;
就會(huì)在五秒鐘慢慢變?。?/p>

demo 旋轉(zhuǎn)風(fēng)車

結(jié)構(gòu)

<div id="box">
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3"></div>
    <div id="a4"></div>
    <button id="btn_left">←</button>
    <button id="btn_right">→</button>
</div>

css樣式

*{
    margin: 0;padding: 0;
}
#box{
    width: 500px;
    height: 500px;
    border: 1px solid #cccccc;
    margin: 100px auto;
    position: relative;
}
#box div{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    transition: all 5s;
}
#a1{
    background-color: pink;
    top: 50px;
    margin-left: -50px;
}
#a2{
    background-color: yellow;
    top: 150px;
    margin-left: -150px;
}
#a3{
    background-color: red;
    top: 250px;
    margin-left: -50px;
}
#a4{
    background-color: blue;
    top: 150px;
    margin-left: 50px;
}
button{
    position: absolute;
    width: 120px;
    height: 50px;
    font-size: 30px;
}
#btn_left{
    left: 0;
    bottom: 0;
}
#btn_right{
    right: 0;
    bottom: 0;
}

js清單

window.onload = function(){
    function $(id){
        return document.getElementById(id);
    }
    var divs = $("box").getElementsByTagName("div");
    var arr = new Array;
    arr[0] = [50,-50];
    arr[1] = [150,-150];
    arr[2] = [250,-50];
    arr[3] = [150,50];
    $("btn_left").onclick = function(){
        var t = arr.pop();   // 刪除最后一個(gè)
        arr.unshift(t);     // 添加到第一個(gè)
        //console.log(t);
        for(var i = 0;i<divs.length;i++){
            //console.log(arr[i]);    //  得到每一個(gè)數(shù)組
            //console.log(arr[i][0]);   //  得到每一個(gè)數(shù)組里的第一個(gè)值
            divs[i].style.top = arr[i][0]+"px";
            divs[i].style.marginLeft = arr[i][1]+"px";
        }
    };
    $("btn_right").onclick = function(){
        var t = arr.shift();     // 刪除第一個(gè)
        arr.push(t);        //  添加到最后第一個(gè)
        //console.log(t);
        for(var i = 0;i<divs.length;i++){
            divs[i].style.top = arr[i][0]+"px";
            divs[i].style.marginLeft = arr[i][1]+"px";
        }
    }
};