正在加载图片...
wb交互开发》实验教学指导/实验三:0y操作DM4 s(" disContent")cs" display";"none")分别是什么意思;。(3分) 任务二:编写代码实现如图3-22与3-2-3所示的效果?(7分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、搜索框操作 (1)搜索框的操作,失去焦点时如图3-3-1所示,失去焦点时如图3-3-2所示 搜索:匾输入您要索的关键词 搜索:□ 图3-3-1失去焦点 图3-3-2获取焦点 (2)请完成下面的任务: 任务一:开发代码,显示效果如上图所示。(5分) 任务二:设置和获取元素内容的方法有几种?分别是什么,它们有啥区别?(3分) 任务三:如何设置元素的样式值?(2分) 要求: 请将上述任务的操作方法,填写到实验报告册中 开心农场的实现 (1)使用juey提供的对DOM节点进行操作的方法实现开心农场。点击播种、生长、开花、 结果分别显示不同的效果。提示:主要用到的函数有 remove(O、 append、 replace Witho等。 (2)效果图如图3-4所示。 孩的开心小农场 我的开心小农 图3-4-1开心农场1 图3-4-2开心农场2 (3)部分代码如下所示 <lDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtmll-transItiOnal.dtd"> chtmlxmins="htTp://www.w3.org/1999/xhtml> <head→ <metahttp-equiv="content-type"contenttexT/html;charset=utf-8"a title→打造自己的开心农场</ttle 本讲共计7页当前第4页《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 4 页 $(".clsContent").css("display","none")分别是什么意思;。（3 分） 任务二：编写代码实现如图 3-2-2 与 3-2-3 所示的效果？（7 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、搜索框操作 （1）搜索框的操作，失去焦点时如图 3-3-1 所示，失去焦点时如图 3-3-2 所示。 （2）请完成下面的任务： 任务一：开发代码，显示效果如上图所示。（5 分） 任务二：设置和获取元素内容的方法有几种？分别是什么，它们有啥区别？（3 分） 任务三：如何设置元素的样式值？（2 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 4、开心农场的实现 （1）使用 jQuery 提供的对 DOM 节点进行操作的方法实现开心农场。点击播种、生长、开花、 结果分别显示不同的效果。提示：主要用到的函数有 remove()、append()、replaceWith()等。 （2）效果图如图 3-4 所示。 （3）部分代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>打造自己的开心农场</title> 图 3-3-1 失去焦点 图 3-3-2 获取焦点 图 3-4-1 开心农场 1 图 3-4-2 开心农场 2