《jQuery程序设计》实验指导书.docVIP

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 对