《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 表格隔行变色
《Web交互开发》实验教学指导/实验四: jQuery编程基础 任务一:编写代码完成表格的隔行变色:;(5分) 任务二:编写代码完成表格的高亮显示。(5分) 要求 请将上述主要代码,填写到实验报告册中。 2、导航条的使用 (1)导航条的作用:第一,单击标题时,可以伸缩导航条的内容,同时,标题中的提示图片 也随之改变。第二,单击“简化”链接时,隐藏指定的内容,并将“简化”字样变成“更多”,单 击“更多”链接时,返回初始状态,并改变指定显示元素的背景色 (2)导航条的样式如图所示4-2-1,42-2,4-2-3所示。 图书分类 图书分类 小说(0)文艺(230)青春(43 图4-2-1导航条标题 少儿(1560)生活(870)社科(b0) 管理(50)计算机(1780数直(930) 工具书(刘5引进版(980)其它类(2 图书分类 简化》 小说(1)文艺(23)青看(14) 图4-2-3显示全部内容 少儿(158)生活(870)其它类(23 图4-2-2显示两行内容 (3)请完成下面的任务 任务一:编写HTML和CSS实现上述样式。(5分) 任务二:编写程序实现如图42-1所示效果?(5分) 任务三:编写程序实现如图42-2和42-3效果。(10分) 要求: 请将上述任务的操作方法,填写到实验报告册中 、搜索框 (1)搜索框的操作,失去焦点时如图43-1所示,失去焦点时如图43-2所示 搜索:匾输入您要搜的关键 搜索: 图4-3-1失去焦点 图43-2获取焦点 )完成下述任务。 任务一:编写程序实现上述功能。(10分) 要求: 请将上述实验任务的主要代码,填写到实验报告册中。 六、自主实验步骤(20分) 本讲共计3页|当前第2页
《Web 交互开发》实验教学指导 / 实验四：jQuery 编程基础 本讲共计 3 页 | 当前第 2 页 任务一：编写代码完成表格的隔行变色；（5 分） 任务二：编写代码完成表格的高亮显示。（5 分） 要求： 请将上述主要代码，填写到实验报告册中。 2、导航条的使用 （1）导航条的作用：第一，单击标题时，可以伸缩导航条的内容，同时，标题中的提示图片 也随之改变。第二，单击“简化”链接时，隐藏指定的内容，并将“简化”字样变成“更多”，单 击“更多”链接时，返回初始状态，并改变指定显示元素的背景色。 （2）导航条的样式如图所示 4-2-1，4-2-2，4-2-3 所示。 （3）请完成下面的任务： 任务一：编写 HTML 和 CSS 实现上述样式。（5 分） 任务二：编写程序实现如图 4-2-1 所示效果？（5 分） 任务三：编写程序实现如图 4-2-2 和 4-2-3 效果。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、搜索框 （1）搜索框的操作，失去焦点时如图 4-3-1 所示，失去焦点时如图 4-3-2 所示。 （2）完成下述任务。 任务一：编写程序实现上述功能。（10 分） 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 六、自主实验步骤（20 分） 图 4-2-1 导航条标题 图 4-2-2 显示两行内容 图 4-2-3 显示全部内容 图 4-3-1 失去焦点 图 4-3-2 获取焦点
《Web交互开发》实验教学指导/实验四: jQuery编程基础 1、实现列表页面的曾理 (1)页面页面如图44-1和4-4-2所示。 选项编号 购书人性别购书价 选项编号 面购书人性别购书价 |1001 李小明男35.80元 刘明明女37∞元 女37.80元 张惺星女45.60元 日|100 5生 45.80元 口全选[刪除」 全话刪除」 图4-4-1列表页面1 图4-4-2列表页面2 (2)完成下述任务 任务一:完成页面的编写。(5分) 任务二:编写单击全选按钮代码。(5分) 任务三:编写删除按钮代码。(5分) 任务四:当鼠标移动到图片上,显示大图。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) 1、使用 j Query网页开发的优势?(5分) 2、 jQuery选择器的种类有几种,分别是什么?(5分) 3、 jQuery如何获取和删除属性?(5分) 4、 jQuery中遍历节点的方法有哪些?(5分) 本讲共计3页|当前第3页
《Web 交互开发》实验教学指导 / 实验四：jQuery 编程基础 本讲共计 3 页 | 当前第 3 页 1、实现列表页面的管理 （1）页面页面如图 4-4-1 和 4-4-2 所示。 （2）完成下述任务。 任务一：完成页面的编写。（5 分） 任务二：编写单击全选按钮代码。（5 分） 任务三：编写删除按钮代码。（5 分） 任务四：当鼠标移动到图片上，显示大图。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、使用 jQuery 网页开发的优势？（5 分） 2、jQuery 选择器的种类有几种，分别是什么？（5 分） 3、jQuery 如何获取和删除属性？（5 分） 4、jQuery 中遍历节点的方法有哪些？（5 分） 图 4-4-1 列表页面 1 图 4-4-2 列表页面 2