|
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; // 显示红色块
点击"隐藏按钮" => 隐藏红色块
屏幕快照 2018-01-26 下午9.19.33.png
div { width: 200px; height: 100px; background-color: red; }
点我也是一样显示滴~!
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';
}
}
|