- 1、本文档共48页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Web框架技术开发一实验指导书
- PAGE 4-
Web框架技术开发(一)
实验指导书
2014.12
WEB框架开发技术(一)实验指导书
实验一 : 掌握Jquery的组件的配置和使用
一、实验目的
1. 了解 jQuery核心库及使用原理;
2. 初步掌握jQuery基本语法,认识ready方法;
3. 掌握解决jQuery冲突的方法;
4. 能够运用编辑器制作简单网页。
二、实验内容
使用文本编辑器在网页中添加jQuery核心库,在ready方法中实现弹框显示信息的功能。
练习解决jQuery冲突的方法。
3. 在 IE 浏览器中打开编写的网页文件,查看运行效果。
实验步骤
1. jQuery核心库的下载
jQuery的最新下载地址/,下载页面如下所示
其中, HYPERLINK /jquery-1.9.1.min.js Download the compressed, production jQuery 1.9.1下载的是jquery-1.9.1.min.js文件; HYPERLINK /jquery-1.9.1.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解决冲突的源代码
PAGE
PAGE 45
实验二 : 熟练掌握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
您可能关注的文档
- u大师u盘启动盘制作工具v110安装win7原版系统(图文教程).doc
- UnitransZXSM-10G(V10)数字同步复用设备用户高级培训教材第一册5SM10G-A1340.doc
- U盘用户手册-中文版v403.doc
- V-OMS2催化氧化醇的性能.docx
- U盘硬盘安装XP系统教程.doc
- UV光氧催化喷漆废气项目设计方案(15-2W风量).doc
- U盘装系统通用PE工具箱安装系统教程(手动Ghost).doc
- V1411dvc编程操作手册.doc
- U盘安装系统教程手把手教你U盘装WIN7扔掉你的光驱.doc
- V283插件集成手册.doc
- 2024至2030年中国人造棉面料行业投资前景及策略咨询报告.docx
- 重庆市渝中区遴选公务员2024年国家公务员考试考试大纲历年真题10340笔试历年典型考题及解题思路附.docx
- 2024至2030年中国甲基苯乙酮行业深度调研及发展预测报告.docx
- 2024至2030年中国羚羊角类饮片行业深度调查与前景预测分析报告.docx
- 重庆市面向中国农业大学定向选调2024届大学毕业生2024年国家公务员考试考试大纲历年真题14笔试历.docx
- 重庆市面向西北工业大学定向选调2024届大学毕业生00笔试历年典型考题及解题思路附答案详解.docx
- 中国不动杆菌感染治疗药行业市场现状分析及竞争格局与投资发展研究报告2024-2029版.docx
- 2024至2030年全球与中国ETL软件市场现状及未来发展趋势.docx
- 初中八年级(初二)生物下册期末考试1含答案解析.docx
- 干簧式继电器项目申请报告.docx
文档评论(0)