计算机软件工程专业09级实训答辩(精品·公开课件).ppt

计算机软件工程专业09级实训汇报 班级：软件092 学号：2009111124 姓名：林燕 电话内容提要 实训目的/目标 实训内容及要求 实训内容实现 实训演示 实训总结 jQuery上传、信息修改 jQuery的定义 Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 实训目的/目标 使用jquery.form插件实现文件上传，使用jquery.tools.min.js插件实现tab页显示 通知表的信息包括：通知编号、标题、内容、附件文件地址、发布时间、发布人。上传文件存放在项目目录下的uploadfiles文件夹下 实训内容及要求 1.认识选择符$ 要求：了解$()、CSS选择符、XPath选择符、自定义选择符的含义，学会使用这些选择符以及$(document).ready()方法。 2.事件 要求：理解事件的绑定，熟练使用常用的事件：click、toggle、hover、show、hide、trigger 3. 效果——为操作添加艺术性 要求：熟练使用各种效果 4.DOM操作 要求：能够熟练的使用jquery提供的方法灵活地操作DOM元素 5.ajax追加文件 要求：使用jquery方法追加html文件 6.ajax实现表单提交 要求：使用jquery.form插件实现表单提交 7.综合实验 要求: 使用jquery.form插件实现文件上传，使用jquery.tools.min.js插件实现tab页显示 实训内容实现 1.jQuery代码实现 script type=text/javascript $(document).ready(function() { loadXmlDoc(); }); function loadXmlDoc() { $.get(../servlet/GetServlet, {flag:1}, function(data) { var noticearray = eval(data); $(#mytable tr:gt(0)).remove(); $.each(noticearray, function(index, item) { $(#mytable).append( trtd + item.id + /tdtd + item.title+ /tdtd + item.content + /tdtd+ item.annex + /tdtd + item.time+ /tdtd + item.owner+ /tdtda href=javascript:delnotice(+ item.id+ )删除/a/td/tr); }); }); } /script script type=text/javascript function delnotice(vsno) { if (confirm(确定要删除学号为 + vsno + 的记录吗？) == true) { $.get(../servlet/DeleteServlet, { id : vsno }, function call() { loadXmlDoc(); }); } } /script script type=text/javascript function addnotice() { $(#addform).ajaxSubmit( { dataType : json, success : function(data) { //新增/修改后接着查询结果 loadXmlDoc(); cleartext(); } }); } /script script type=text/javascript function cleartext() { $(#title).val(); $(#content).val(); alert($(#annex).val()); } /script 2、tabshow功能实现 body ul class=t