JavaScript脚本语言由三部分组成
ECMAScript（JavaScript的核心标准，也是一个解析器）
DOM （通过document提供的一些方法或者属性来操作页面）
BOM （通过window提供的一些方法或者属性来操作浏览器）
1、通过ID名称来获取元素：
document get element by id 'link' == 文档 获取 元素 通过 ID '名称链接'
document.getElementById('link') == 通过"ID名称"获取文档元素
2、事件类型：
鼠标事件、键盘事件（空格、回车）、系统时间（窗口的放大缩小）、表单事件（搜索输入框）...
2.1、鼠标事件
onclick // 鼠标点击事件
onmousemove // 鼠标抚摸事件
onmouseover // 鼠标移入事件
onmouseout // 鼠标移除事件
...
问题：鼠标事件 onmouseover 和 onmousemove 的区别 ！？
在动作上 onmouseover 只在刚进入区域时触发。
onmousemove 除了刚进入区域触发外，在区域内移动鼠标，也会触发该事件。
2.2、系统事件：onload
window.onload = function () {
... JS脚本语言是逐行执行的，所以不能放在html部分的上面，但是可以添加系统事件'onload'，
解决这一问题，一般来说我们把JS链接部分放在最下边
}
3、如何添加事件
oDiv.onclick 元素.事件
4、函数：可以理解为—命令，去做一些事...
function abc() { // 肯定不会主动执行！！
...
}
1、直接调用：abc();
2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc; // <-- 此处千万不要加 "abc()"
function () {} // 匿名函数
5、测试：
alert('ok'); // 逐行测试
初学者：保持一种随时写、随时测试的习惯
6、变量：
var oLis = document.getElementById('lis');
// 毕加索 = 帕布罗.迭戈.荷瑟.山迪亚哥.弗朗西斯科.德.保拉.居安.尼波莫切诺.克瑞斯皮尼亚诺.德.罗斯.瑞米迪欧斯.西波瑞亚诺.德.拉.山迪西玛.特立尼达.玛利亚.帕里西奥.克里托.瑞兹.布拉斯科.毕加索
举个栗子🌰：
鼠标移入显示、私信.评论.@我
鼠标移除则隐藏
屏幕快照 2018-01-26 下午9.22.37.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
li { list-style: none; }
.lis {
width: 80px; height: 30px;
border: 1px solid #333;
background-color: #f1f1f1;
position: relative;
}
.lis a {
display: block; /* 行间元素 转 块级元素*/
line-height: 30px;
text-align: center;
text-decoration: none;
color: #000;
}
ul ul {
margin: 0; padding: 0;
width: 140px;
border: 1px solid #333;
position: absolute;
top: 30px;
left: -1px;
background-color: #ff9;
display: none;
}
ul ul li {
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li class="lis" id="lis">
<a href="#">微博</a>
<ul id="ul1">
<li>私信</li>
<li>评论</li>
<li>@我 </li>
</ul>
</li>
</ul>
<script type="text/javascript">
window.onload = function () {
var oLis = document.getElementById('lis');
var oUl1 = document.getElementById('ul1');
oLis.onmouseover = function () {
oUl1.style.display = 'block';
oLis.style.background = 'yellow';
// alert('ok');
}
oLis.onmouseout = function () {
oUl1.style.display = 'none';
oLis.style.backgroundColor = '#f1f1f1';
}
}
</script>
</body></html>
举个栗子🌰：
点击"显示按钮"和"文字" => 显示红色块
点击"隐藏按钮" => 隐藏红色块
屏幕快照 2018-01-26 下午9.19.33.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style media="screen">
div { width: 200px; height: 100px; background-color: red; }
</style>
</head>
<body>
<input id="show_btn" type="button" value="显示">
<input id="hide_btn" type="button" value="隐藏">
<strong id="strong1">点我也是一样显示滴~!</strong>
<div id="div1"></div>
<script type="text/javascript">
window.onload = function () {
var oBtn1 = document.getElementById('show_btn');
var oBtn2 = document.getElementById('hide_btn');
var oStrong = document.getElementById('strong1');
var oDiv = document.getElementById('div1');
oStrong.onclick = oBtn1.onclick = function () {
oDiv.style.display = 'block';
oDiv.style.cssText = "width: 300px; height: 200px; background-color: green;"
}
oBtn2.onclick = function () {
oDiv.style.display = 'none';
}
}
</script>
</body></html>
