Js学习---妙味课堂0-2

上集回顾：

上级知识拓展：

• 一般做项目的时候是不会使用行间事件的。
• <div id="div1" onmouseover="toGreen()" >...的形式即为行间事件。

行为、样式、结构三者分离的写法：

• window.onload的使用
• 提取行间事件
• 不用onload会怎么样

window.onload=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.onclick=funtion(){}...

4.最后运用其他的元素标签  通过更改属性值来触发事件发生。

 

本课知识点：

• 事件提取：
• if判断
• for循环
• 全选功能
• getElementsByTagName
• this --- 当前发生事件的元素到底是谁
• 给元素添加序号 --- 小技巧
• 选项卡

 

作业：

1.一级、二级菜单

2.自定义控件：全Js自定义单选框

3.迅雷看看电影评分：  滑过改变className，点击显示提交

4.妙味课堂菜单：点击之后本菜单栏中向下显示二级菜单。  点击其他的，收回上一个，显示当前的。

 

 

下节课：

• Js制作的日历
• 数码时钟：显示当前时间，时间变化有一个翻转效果
• 无缝图片滚动效果制作：鼠标悬停时暂停，点击按钮改变滚动方向。