className 類名
添加類名：元素.className=’main’;
移出類名：元素.className=’’;
index是索引的意思（在JS里面）；
.checked單選按鈕選擇狀態(tài)查吊；false表示未選中，true表示選中
三目運(yùn)算符語法：
當(dāng)你的代碼出現(xiàn)if（…）{…}else{…}的時(shí)候宋列；
是评也，可以，通過坤邪，三目運(yùn)算符來代替的罚缕；
表達(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(); 自動獲取焦點(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è)變量嫉称，是不是可以對數(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ù)組的開頭添加
// 添加完成之后润樱，變成arr=[0,1,3,5,0]
// 添加完成之后，返回?cái)?shù)組的新的長度
arr.pop();//刪除數(shù)組最后一個(gè)元素
// 把數(shù)組最后一個(gè)元素刪除掉了昵观，并且舌稀，會把刪除掉的值返回回來灼擂；
arr.shift() //刪除開頭第一個(gè)
過渡（transition: all 5s;）
CSS的屬性剔应，過度，當(dāng)元素屬性發(fā)生改變的時(shí)候席怪，不會一下子變，而是慢慢變纤控，變得時(shí)間由你定
比如我們hover讓div變小挂捻，一般就直接瞬間變小
加了transition: all 5s;
就會在五秒鐘慢慢變小刻撒；
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";
}
}
};
