文档介绍：jQuery程序设计
实验指导书
冯伟

目录
实验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样式表“”,并引用,并编写js文件"",并在该文件中利用jQurey为页面中所有带有“.poem-stanza”类的div元素添加“.highlight”类。
1、:
.highlight {
background-color: #ccc;
border: 1px solid #888;
font-style: italic;
color:#fff;
margin: 0;
padding: ;
}
2、:
$(document).ready(function()
{
$('-stanza').addClass('highlight');
});
三、Firebug实验
在第二步的基础上实现以下操作:
1、安装Firebug插件,并在IE浏览器中使用。
2、练****课本12页代码清单1-4;
3、把页面中作者改为自己的名字;
4、显示出页面中所有元素的ID和类名;
5、“#”;
6、使用控制台命令将“.poem-stanza”;
7、为该页面的css样式表添加一个样式规则,类名为“.authorClass”,
样式为:
字体颜色color为#ff00ff;
行高line-height为30px;
字体大小为large;
背景颜色为#ff
“.authorClass”样式。
三、作业提交
“”并上交。
实验2:利用jQuery选择DOM元素
一、实验目的
掌握$()函数的使用
掌握各种选择符的使用方法
熟练使用jQuery遍历DOM元素
二、实验内容
,以实现以下功能:
为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开头的锚元素)
“.pdflink”类。
为所有href属性中以“http”开头,并包括“henry”的所有链接添加“henrylink”类。
为页面中的表格每隔一行添加“.alt”样式。
使用“.highlight ”类来突出显示任何一种剧名含有“亨利(Henry)”游戏的所有表格单元。
利用 jQuery 对象改变表单内命令按钮的背景颜色为“#00ffaa”
利用 jQuery 对象的 val() 方法改变表单内文本框<inp