上集回顾:
上级知识拓展:
- 一般做项目的时候是不会使用行间事件的。
- <div id="div1" οnmοuseοver="toGreen()" >...的形式即为行间事件。
行为、样式、结构三者分离的写法:
- window.onload的使用
- 提取行间事件
- 不用onload会怎么样
window.οnlοad=funtion()
{} //当页面加载完毕之后执行一个事件。
本集:
1.收缩、展开菜单。
如果菜单已经是显示的,把菜单隐藏;
如果菜单已经是隐藏的,把菜单显示。 元素的事件=funtion(){} 函数
2.全选。
点击全选按钮,实现全选功能。
问题:
这里全部都加上id比较复杂,而且有时候不清楚页面中有多少个id。
这里引入一个新的获取元素的方法: getElementsByTagName('input'); ----注意这里的Element是复数。用标签名选中元素。
之后使用: Input.checked=true; (外套for循环令多个元素产生事件。)
this的使用:
this代表的就是当前发生事件的那个元素。
3.选项卡:悬浮时下面或者旁边发生变化。
布局:
使用:无序列表+隐藏div(通过设置属性display为none/block来达到效果。)
效果原理:
- 点击按钮时,改变class和style.display
选项卡头部标签:
- 让所有按钮的className都为空
- 让当前按钮的className为active
---this的使用
选项卡内容:
- 所有div的display都为none
- 让当前div的display为block
---当前按钮的编号
总结:
事件发生步骤:
1.定义window.onload(){}
2.定义var LNode = 某一元素。(通过id或者标签获得一个或者多个元素)
3.给这个元素添加事件:LNode.οnclick=funtion(){}...
4.最后运用其他的元素标签 通过更改属性值来触发事件发生。
本课知识点:
- 事件提取:
- if判断
- for循环
- 全选功能
- getElementsByTagName
- this --- 当前发生事件的元素到底是谁
- 给元素添加序号 --- 小技巧
- 选项卡
作业:
1.一级、二级菜单
2.自定义控件:全Js自定义单选框
3.迅雷看看电影评分: 滑过改变className,点击显示提交
4.妙味课堂菜单:点击之后本菜单栏中向下显示二级菜单。 点击其他的,收回上一个,显示当前的。
下节课:
- Js制作的日历
- 数码时钟:显示当前时间,时间变化有一个翻转效果
- 无缝图片滚动效果制作:鼠标悬停时暂停,点击按钮改变滚动方向。