锋利的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样式 图片的左边框设定宽和高下角用数字依次表示 边框的背景为灰色，当鼠标悬浮时，变成蓝色 当点击图片边框时，图片边框的颜色会变化，该图片会显示，其他图片隐藏 当鼠标从左向右点击时，图片会从左向右展开 当鼠标按数字从大到小点击时，图片会从左向右展开 用animate属性设置图片展开和隐藏所需要的时间和方向。 当刷新页面时仍然会显示第一张图片，并且图片边框的颜色显示为蓝色，其余边框显示为灰色。 div div ul li li li div li li 运行程序，加载CSS样式 为每个边框设置高、宽、颜色和边框之间的间隔 当属边悬浮时，边框中的字会变色 点击边框时，同样会变色，并且连接