《Web交互开发》实验教学指导/实验四: jQuery编程基础 《Web交互开发》实验教学指导 实验四: jQuery编程基础 、实验目的(5分) 1、掌握 jQuery开发环境搭建的方法; 2、掌握 jQuery选择符的使用方法: 3、掌握DOM元素属性操作的方法 4、掌握DOM元素的添加、删除和复制等操作。 二、实验环境(5分) 1、 Windows XP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成表格隔行变色 2、完成导航条的使用 3、完成搜索框的操作 四、实验原理(5分) l、 jQuery开发环境搭建 2、选择器的使用 3、DOM的操作方法。 五、实验步骤(40分) 表格隔行变色 (1)表格隔行变色:搭建 jQuery开发环境,编写 jQuery语句实现表格隔行变色,具体效果如」 图4-1所示。将鼠标移到表格行时,当前行高亮显示,移开时恢复原来的样式 姓名 性别总分 101张小明男30 李明琪 女 1001 王子夏 里 320 1002 张浩杰 女 350 图4-1表格隔行变色 (2)请完成下面的任务: 本讲共计3页当前第1页《Web 交互开发》实验教学指导 / 实验四：jQuery 编程基础 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验四：jQuery 编程基础 一、实验目的（5 分） 1、掌握 jQuery 开发环境搭建的方法； 2、掌握 jQuery 选择符的使用方法； 3、掌握 DOM 元素属性操作的方法； 4、掌握 DOM 元素的添加、删除和复制等操作。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成表格隔行变色； 2、完成导航条的使用； 3、完成搜索框的操作； 四、实验原理（5 分） 1、jQuery 开发环境搭建； 2、选择器的使用； 3、DOM 的操作方法。 五、实验步骤（40 分） 1、表格隔行变色 （1）表格隔行变色：搭建 jQuery 开发环境，编写 jQuery 语句实现表格隔行变色，具体效果如 图 4-1 所示。将鼠标移到表格行时，当前行高亮显示，移开时恢复原来的样式。 （2）请完成下面的任务： 图 4-1 表格隔行变色