前端设计
侯素玲

1
2
3
4
5
6
7

jQuery中的事件

发布时间:2019-03-02 22:13   发布人:侯素玲   浏览次数:883

学习任务

1.了解jQuery 中的事件机制

2.jQuery 事件的绑定、移除与复合

学习目标

1.掌握jQuery 中的常用事件

2.鼠标事件的绑定

观看视频

视频

事件动态添加

语法参考

1. jQuery事件

2. children()方法

3. mouseover()方法       mouseout()方法     mouseenter()方法    mouseleave()方法     hover()方法

4. keydown()方法      keypress()方法         keyup()方法

5. on()方法       off()方法       bind()方法       unbind()方法

      6. toggle()方法

      7. val()方法   返回或设置被选元素的 value 属性

上机实践

1. 制作京东右侧固定层       素材下载      js代码部分

JS知识点:mouseenter()方法,mouseleave()方法hover()方法,css(),children()方法    

CSS知识点:nth-child(),li:hover,精灵图,背景位置

2. 仿京东左侧菜单            素材下载        css代码部分    js代码部分

JS知识点:addClass()方法

CSS知识点:绝对定位,绝对定位出现在不同的父元素中,效果不一样

3. 键盘事件                     素材下载       js代码部分

4. 微博文字输入统计         素材下载       js代码1          js代码2


拓展训练

      1.显示隐藏部分菜单     素材下载      js代码部分