《jQuery程序设计》实验指导书.doc
文本预览下载声明
jQuery程 序 设 计
实验指导书
冯伟
2015.02
目 录
实验1： 编写jQuery驱动页面并学会使用Firebug辅助工具 3
实验2：利用jQuery选择DOM元素 6
实验3：jQuery事件 10
实验4： jQuery动画效果 15
实验5：利用jQuery实现DOM操作 21
实验6：利用AJAX发送数据 26
实验7：使用插件实现网页特效 34
实验8：开发jQuery插件 39
实验1： 编写jQuery驱动页面并学会使用Firebug辅助工具
一、实验目的：
掌握创建jQuery驱动页面的方法
熟练使用jQuery编辑和调试工具
二、实验内容及步骤：
编写第一个jQuery驱动的页面“Hello World！”，实现当加载页面时弹出“Hello World！”。
script src=jquery. js/script
script
$(document).ready(function(){
alert(Hello World!);
});
/script
为课本第5页的HTML源代码编写CSS样式表“01.css”，并引用，并编写js文件01.js，并在该文件中利用jQurey为页面中所有带有“.poem-stanza”类的div元素添加“.highlight”类。
1、01.css中.highlight类：
.highlight {
background-color: #ccc;
border: 1px solid #888;
font-style: italic;
color:#fff;
margin: 0.5em 0;
padding: 0.5em;
}
2、01.js参考代码：
$(document).ready(function()
{
$(div.poem-stanza).addClass(highlight);
});
三、Firebug实验
在第二步的基础上实现以下操作：
1、安装Firebug插件，并在IE浏览器中使用。
2、练习课本12页代码清单1-4；
3、把页面中作者改为自己的名字；
4、显示出页面中所有元素的ID和类名；
5、将.highlight类中的背景颜色设置为“#01ffcc”；
6、使用控制台命令将“.poem-stanza”类的Div的.highlight类移除；
7、为该页面的css样式表添加一个样式规则，类名为“.authorClass”，
样式为：
字体颜色color为#ff00ff;
行高line-height为30px;
字体大小为large；
背景颜色为#00ccff
使用控制台命令将类名为.author的div应用为“.authorClass”样式。
三、作业提交
将01.css和01.js一起打包为“姓名_01.rar”并上交。 实验2：利用jQuery选择DOM元素
一、实验目的
掌握$()函数的使用
掌握各种选择符的使用方法
熟练使用jQuery遍历DOM元素
二、实验内容
在02.js文件中编写jQuery代码，以实现以下功能：
为id为“selected-plays”的无序列表ul下的下顶级列表项增加“.horizontal”样式。
改变所有的标题元素的背景色为 # bbffaa
将ID为“selected-plays”的ul下的奇数行列表项的背景色改为红色。
为ID为“selected-plays”的非顶级项添加“.sub-level”样式 。
改变含有文本 ‘Hamlet’ 的td元素的背景色为 # bbffaa。
改变含有 class 为 sub-level元素的 li元素的背景色为 # bbffaa
改变不包含子元素(或者文本元素) 的 td 空元素的背景色为 # bbffaa
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # 00aabb
为所有电子邮件链接添加“.mailto”类：
（提示：寻找所有带href属性并且以mailto开头的锚元素）
为所有href属性以.pdf结尾的链接添加“.pdflink”类。
为所有href属性中以“http”开头，并包括“henry”的所有链接添加“henrylink”类。
为页面中的表格每隔一行添加“.alt”样式。
使用“.highlight ”类来突出显示任何一种剧名含有“亨利（Henry）”游戏的所有表格单元。
利用 jQuery 对象改变表单内命令按钮的背景颜色为“#00ffaa”
利用 jQuery 对象的 val() 方法改变表单内文本框 input 元素的值为“搜索条件”
利用 jQuery 对象改变表单内可用文本框 的背景颜色为“#ff99cc”
利用 jQuery 对
显示全部