锋利的jquery课程设计实验报告

《锋利的jquery课程设计实验报告》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、锋利的jquery课程设计专业：11级信息工程姓名：张玉霞学号：201142396一．实验目的1．熟悉掌握jquery所学到的知识点2．学习用CSS样式制作网站的静态页面二．实验内容利用jquery知识制作制作一个简单的网站，该网站是关于学校的一个小网站。此网站中包括五个主页面，分别是index.html(学校首页)、style-demo.html(学校论坛)、full-width.html（学校概况）、3-columns.html（学院招生）、gallery.html（学校图库）。2.1index.html（学校首

2、页）2.1.1首页总体框架DOM数HTMLheadbodyTitleMetametalinkstyledivdiv流程图：运行程序当点击学校首页时就可以看到主页面，在主页面的右上方有一个学生登录系统，输入姓名和密码可进入。在主页面中有一个悬浮的点击框，点击每一个悬浮框便可进入相应的页面。在主页面中有水平手风琴切换效果的显示，当点击不同的数字时，就可以看到不同的图片，并且当鼠标悬浮时图片边框就会显示不同的颜色。点击页面左边的实事链接标题就会链接到学校论坛主页中，可查看其详细内容。在页面的右边加载CSS样式使其显示主要内

3、容2.1.2顶部和学生登录系统DOM树：divdivdivh1afromfieldestlegandinputinputdivinput流程图：加载h1中的内容，使显示网页的大标题。加载from中的内容，使其先容登录系统的界面。运行程序运行input和div分别出现姓名和密码输入框，点击signin便可登录。2.1.3水平手风琴特效DOM树：divdivdivdivullih2adivdivdivpdivlih2adivdivplililih2divadivdivpah2pdivdivdddivdivdldtdddt

4、dddtdddtdddt流程图：运行程序，页面加载设定的CSS样式图片的左边框设定宽和高下角用数字依次表示边框的背景为灰色，当鼠标悬浮时，变成蓝色当点击图片边框时，图片边框的颜色会变化，该图片会显示，其他图片隐藏当鼠标从左向右点击时，图片会从左向右展开当鼠标按数字从大到小点击时，图片会从左向右展开用animate属性设置图片展开和隐藏所需要的时间和方向。当刷新页面时仍然会显示第一张图片，并且图片边框的颜色显示为蓝色，其余边框显示为灰色。2.1.4顶部悬浮DOM树:lililililidivdivdivul流程图：运行

5、程序，加载CSS样式为每个边框设置高、宽、颜色和边框之间的间隔当属边悬浮时，边框中的字会变色点击边框时，同样会变色，并且连接到相应的页面当释放点击时，会自动恢复到刷新时的页面2.1.5页面左边当鼠标点击第二个div时会自动链接到相关页面鼠标点击实时搜索时页面跳转，在搜索栏输入并按signup会跳转当鼠标悬浮在第三个div现实的页面时图片的边框会变为灰色流程运行程序，加载CSS样式当鼠标悬浮在第二个div所显示的页面时，字变为红色并且跳转图：divdivdivdivh2divullililih2divulh2divli

6、aliulpfromfieldestlegendinputinput2.1.6页面右边：DOM树：pdivdivdivdivhdivullidivpdivdiv流程图：运行程序加载CSS样式各个div下的内容都加载完成并且显示，单击会返回到主页面2.2.1页面左边DOM树：divdivdivimgpimgpdivhullilidivpdivdivphdivfrompinputlabelppinputinputdiv流程图：运行程序加载CSS样式，并且显示所添加的内容在div=“responsed”时输出评论窗口，填写

7、姓名和邮箱写下评论，提交或重置当鼠标点击时页面会自动返回2.2.2右边页面（与左边页面相似）2.3full-width.html(学校概况)2.3.1DOM树：divdivhppppdiv流程图：运行程序加载CSS样式输出文字显示2.43-columns.html(学院招生)2.4.1流程图：运行程序加载CSS样式当点击第三个div中的内容时鼠标会自动变换样式且点击之后会弹回主页面表格中的内容不会变化，显示的是固定值点击第四个div，其中的第一个li在点击之后会链接到相关页面当中鼠标悬浮时会变换样式，且会显示相关链接

8、的名字点击更多时会自动跳转到首页面DOM树：divdivdivhullililililidivhptheadtabletrththththtbodydivdiv4htrtrtdtdtddiv4hulplililililiaaaaa2.5gallery.html(学校图库)2.5.1视频DOM树：divdivdivdivdivulhpp流程图：运