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

锋利的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.1.1首页总体框架 DOM数 流程图： 2.1.2顶部和学生登录系统 DOM树： 流程图： 2.1.3水平手风琴特效 DOM树： 流程图： 2.1.4顶部悬浮 DOM树: 流程图： 2.1.5页面左边 流程图： 2.1.6页面右边： DOM树： 流程图： 2.2.1页面左边 DOM树： 流程图： 2.2.2右边页面（与左边页面相似） 2.3full-width.html(学校概况) 2.3.1 DOM树： 流程图： 2.4 3-columns.html(学院招生) 2.4.1 流程图： DOM树： 2.5 gallery.html(学校图库) 2.5.1视频 DOM树： 流程图： 2.5.2图集 DOM树： 流程图： 三．制作此网站所用到的本书上的知识点 1.制作网站时其中所包含的效果有：手风琴图片切换效果、点击图片实现放大镜效果、邮箱登录效果、视频播放效果。 2.在制作网站的整个过程中都使用了选择器，包括基本选择器id、class、element、，层次选择器$(prev+next)、$(prev+siblings),过滤选择器中的：even、odd、first、last，内容选择器中的contains和has，可见性过滤选择器hidden和sivible，属性选择器中的【attribute=value】，子元素过滤选择器中的first-child和last-child，表单选择器中的input、test、password、radio、submit、image、rest、button、hidden等 3.在网站制作的过程中第三章的知识DOM以及子节点和父节点还有节点的遍历的使用等都存在。 4.jquery中的事件和动画的实现都存在。加载DOM,对事件的绑定和对事件的移除都有show、hide、animate 5.对表单的操作table、tbody、thead等 6.在网站制作的过程中使用了一个插件，主要是针对图片的水平手风琴效果。 div div style link meta Meta Title body 在主页面中有一个悬浮的点击框，点击每一个悬浮框便可进入相应的页面。 当点击学校首页时就可以看到主页面，在主页面的右上方有一个学生登录系统，输入姓名和密码可进入。 点击页面左边的实事链接标题就会链接到学校论坛主页中，可查看其详细内容。 在主页面中有水平手风琴切换效果的显示，当点击不同的数字时，就可以看到不同的图片，并且当鼠标悬浮时图片边框就会显示不同的颜色。 运行程序 head HTML 在页面的右边加载CSS样式使其显示主要内容 div div div h1 a from fieldest legand input input div input 运行程序 加载h1中的内容，使显示网页的大标题。 div 加载from中的内容，使其先容登录系统的界面。 运行input和div分别出现姓名和密码输入框，点击sign in便可登录。 div div ul li h2 a div div div p div li h2 a div div h2 p li li li div a div div p h2 a div div div p div div dl dt dd dt dd dt dd dt dd dt dd 运行程序，页面加载设定的CSS样式 图片的左边框设定宽和高下角用数字依次表示 边框的背景为灰色，当鼠标悬浮时，变成蓝色 当点击图片边框时