Web框架技术开发(一)实验指导书.doc

Web框架技术开发(一) 实验指导书 2014.12  WEB框架开发技术(一)实验指导书 实验一 : 掌握Jquery的组件的配置和使用 一、实验目的 1. 了解 jQuery核心库及使用原理； 2. 初步掌握jQuery基本语法，认识ready方法； 3. 掌握解决jQuery冲突的方法； 4. 能够运用编辑器制作简单网页。 二、实验内容 使用文本编辑器在网页中添加jQuery核心库，在ready方法中实现弹框显示信息的功能。 练习解决jQuery冲突的方法。 3. 在 IE 浏览器中打开编写的网页文件，查看运行效果。 实验步骤 1. jQuery核心库的下载 jQuery的最新下载地址/，下载页面如下所示 其中，Download the compressed, production jQuery 1.9.1下载的是jquery-1.9.1.min.js文件；Download the uncompressed, development jQuery 1.9.1下载的是jquery-1.9.1.js文件。 jquery-1.9.1.min.js文件一般用于网站部署，文件小，降低服务器负载；我们练习中建议使用jquery-1.9.1.js文件，便于查看和修改源代码。 jQuery核心库的调用如下代码所示： head meta charset=utf-8 titlejQuery Sample/title script type=text/javascript src=jquery-1.9.1.js/script /head 2. jQuery核心库的使用 2.1在ready方法中实现弹框显示信息的功能 示例一:实现网页加载完毕，弹框显示“HtmlDOM加载完毕，可以操作了！”的信息的效果 body script $(document).ready( function() { alert(HtmlDOM加载完毕，可以操作了！); } ); /script /body 示例二:实现单击页面所有的超链接，都能弹出对话框的效果 body a href=#超链接1/a a href=#超链接2/a script type=text/javascript $(document).ready( function() { $(a).click( function() { alert(嗨！你点击了一个超链接！); } ); } ); /script /body 示例三:练习如何解决jQuery冲突 body script alert($==undefined); // 返回false，此时变量$存在 var dom = {}; dom.jq = $.noConflict(true); alert($==undefined); // 返回true，此时变量$已被删除 alert(jQuery==undefined); // 返回true，此时变量jQuery已被删除 dom.jq(document).ready( function() { alert(HTMLDOM已经准备完毕，现在可以操作了！); } ); /script /body 四、实验要求 1. 独立完成实验内容； 2. 保存制作的jQuery的页面； 3. 记录实验过程存在的问题，书写实验报告。 五、思考问题 思考jQuery的使用范围 $.noConflict(true)与$.noConflict()区别 3. 了解jQuery解决冲突的源代码 实验二 : 熟练掌握Jquery的事件处理的编写和事件注册 一、实验目的 理解jQuery对象及jQuery选择器； 2. 熟练掌握并使用jQuery选择器； 3. 理解jQuery对象的结构； 4. 熟练的掌握对jQuery对象的处理。 二、实验内容 1. 使用多种jQuery选择器获取指定的jQuery对象，并对其进行相关操作； 2. 使用相关方法对jQuery对象进行处理； 三、实验步骤 jQuery选择器的使用 1.层级选择器 层级选择器包括后代选择器$(A B)、直接子元素选择器$(AB)、相邻同级选择器$(A+B)、相邻同级连续选择器$(A~B)： 假定网页存在以下代码： body div p..................1/p p..................2/p /div !-- 这个