js
1 用途: 表单验证 特效 动画
2 js语言组成部分
基础语法(变量 变量类型 类型转换 判断 循环 数组 函数等)
DOM(重点) js提供我们操作网页的技术
BOM(了解) js控制浏览器
Dom:文档对象模型
如何写网页特特效:
1 完成合理精确的布局(css)
2 添加js代码做特效
要做事先找人
***事件:
事件:用户的某种行为 如onclick onmouseover ....
事件源:谁发生了事件?
事件处理:事件发生后,怎么处理
打开电灯
唐三藏念紧箍咒
js代码 事件源.事件 = 事件处理;
事件源.事件 = function() {
//当事件发生后 需要执行的代码
}
js控制样式属性值 元素.style.属性名 = "值";
***查找元素
1 通过元素id查找 document.getElementById("id值");
***隐藏元素
display: none 隐藏 display
: block 显示
**js入口函数
window.onload = fucntion() {
//js代码
}
网页代码,从上往下加载执行
** 函数封装进行代码优化 见案例鼠标展示
找元素 可以优化
function $(id) {
return document.getElementById(id);
}
事件处理可以优化
事件源 大图片路径
体会: 把相同部分作为函数体,变化的东西
定义成形参
如何找到body元素 document.body
1 用途: 表单验证 特效 动画
2 js语言组成部分
基础语法(变量 变量类型 类型转换 判断 循环 数组 函数等)
DOM(重点) js提供我们操作网页的技术
BOM(了解) js控制浏览器
Dom:文档对象模型
如何写网页特特效:
1 完成合理精确的布局(css)
2 添加js代码做特效
要做事先找人
***事件:
事件:用户的某种行为 如onclick onmouseover ....
事件源:谁发生了事件?
事件处理:事件发生后,怎么处理
打开电灯
唐三藏念紧箍咒
js代码 事件源.事件 = 事件处理;
事件源.事件 = function() {
//当事件发生后 需要执行的代码
}
js控制样式属性值 元素.style.属性名 = "值";
***查找元素
1 通过元素id查找 document.getElementById("id值");
***隐藏元素
display: none 隐藏 display
: block 显示
**js入口函数
window.onload = fucntion() {
//js代码
}
网页代码,从上往下加载执行
** 函数封装进行代码优化 见案例鼠标展示
找元素 可以优化
function $(id) {
return document.getElementById(id);
}
事件处理可以优化
事件源 大图片路径
体会: 把相同部分作为函数体,变化的东西
定义成形参
如何找到body元素 document.body