第10章 jQuery（上）-补充案例.docVIP

第8章 JavaScript编程基础 PAGE 2 PAGE 10 第10章补充案例 【案例10-1】 网页开关灯 一、案例描述 考核知识点 $(function(){})方法、$(selector).click()单击事件、$(selector).val()方法、$(selector).css()方法 练习目标 掌握如何使用$(selector).val()获取表单元素的内容 掌握如何使用$(selector).click()注册单击事件 需求分析 网页开关灯效果功能是当打击页面中的关灯按钮时，当前页面的背景色修改为黑色，当单击开灯按钮时，当前页面的背景色修改为白色。 案例分析 效果如图10-1、10-2所示。 默认状态 关灯 具体实现步骤如下： 获取按钮，注册点击事件 .val()方法获取按钮的value属性的值 .val(内容)设置按钮的value属性的值 判断value的值，如果是关灯，设置背景色为黑色，并设置value的值为开灯 判断value的值，如果是开灯，设置背景色为白色，并设置value的值为关灯 二、案例实现 根据上面的分析，实现网页开关灯效果，具体代码如下： !DOCTYPE html html lang=en head meta charset=UTF-8 title统计成绩最大值和最小值/title /head script?src=j