### 獲取元素的第一種方式
~~~
document.getElementById('id名字');
~~~
***
模擬一個新浪的微博顯示
這里先了解實現它的原理，然后書寫js代碼
js的書寫位置有三種，與CSS類似，可以寫在body中的末尾位置，因為與加載文檔流順序有關，所以寫在body的末尾最佳
~~~
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
li { list-style:none; }
.lis { width:80px; height:30px; border:1px solid #333; position:relative; }
.lis a { display:block; line-height:30px; text-align:center; text-decoration:none; color:#000; background:#f1f1f1; }
ul ul { padding:0; margin:0; width:140px; border:1px solid #333; position:absolute; top:30px; left:-1px; background:#FF9; display:none; }
ul ul li { text-align:center; line-height:30px; }
</style>
<!--
希望把某個元素移除你的視線：
1、display:none; 顯示為無
2、visibility:hidden; 隱藏
3、width \ height
4、透明度
5、left \ top
6、拿一個白色DIV蓋住它
7、margin負值
……
-->
</head>
<body>
<ul>
<li id="lis" class="lis">
<a id="link" href="#">微博</a>
<ul id="ul1">
<li>私信</li>
<li>評論</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
// 畢加索 = 帕布羅.迭戈.荷瑟.山迪亞哥.弗朗西斯科.德.保拉.居安.尼波莫切諾.克瑞斯皮尼亞諾.德.羅斯.瑞米迪歐斯.西波瑞亞諾.德.拉.山迪西瑪.特立尼達.瑪利亞.帕里西奧.克里托.瑞茲.布拉斯科.畢加索
var li = document.getElementById('lis');
var ul = document.getElementById('ul1');
var a = document.getElementById('link');
li.onmouseover = show;
li.onmouseout = hide;
function show(){
ul.style.display = 'block';
a.style.background = 'yellow';
}
function hide(){
ul.style.display = 'none';
a.style.background = '#f1f1f1';
}
/*
JS中如何獲取元素：
1、通過ID名稱來獲取元素：
document get element by id 'link'
docuemnt.getElementById('link');
2
……
事件：鼠標事件、鍵盤事件、系統事件、表單事件、自定義事件……
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像是鼠標撫摸一樣的事件
……
onload 加載完以后執行……
window.onload = 事情
img.onload
body.onload
……
如何添加事件：
元素.onmouseover
函數：可以理解為-命令，做一些事~~
function abc(){ // 肯定不會主動執行的！
……
}
1、直接調用：abc();
2、事件調用：元素.事件 = 函數名 oDiv.onclick = abc;
function (){} 匿名函數
元素.事件 = function (){};
測試：
alert(1); 帶一個確定按鈕的警告框
alert('ok'); 'ok' 字符串
alert("ok");
變量：
var li = document.getElementById('lis');
var num = 123;
var name = 'leo';
*/
</script>
</body>
</html>
~~~
熱身練習作業：
