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

锋利的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数HTMLheadbodyTitleMetameta linkstyledivdiv流程图：运行程序当点击学校首页时就可以看到主页面，在主页面的右上方有一个学生登录系统，输入姓名和密码可进入。在主页面中有一个悬浮的点击框，点击每一个悬浮框便可进入相应的页面。 在主页面中有水平手风琴切换效果的显示，当点击不同的数字时，就可以看到不同的图片，并且当鼠标悬浮时图片边框就会显示不同的颜色。点击页面左边的实事链接标题就会链接到学校论坛主页中，可查看其详细内容。在页面的右边加载CSS样式使其显示主要内容2.1.2顶部和学生登录系统DOM树：divdivdivh1afromfieldestlegandinputinputdivinput流程图：加载h1中的内容，使显示网页的大标题。加载from中的内容，使其先容登录系统的界面。运行程序运行input和div分别出现姓名和密码输入框，点击sign in便可登录。2.1.3水平手风琴特效DOM树：divdivdivdivullih2adivdivdivpdivlih2adivdivplililih2divadivdivpah2pdivdivdddivdivdldtdddtdddtdddtdddt流程图：运行程序，页面加载设定的CSS样式图片的左边框设定宽和高下角用数字依次表示边框的背景为灰色，当鼠标悬浮时，变成蓝色当点击图片边框时，图片边框的颜色会变化，该图片会显示，其他图片隐藏当鼠标从左向右点击时，图片会从左向右展开当鼠标按数字从大到小点击时，图片会从左向右展开用animate属性设置图片展开和隐藏所需要的时间和方向。当刷新页面时仍然会显示第一张图片，并且图片边框的颜色显示为蓝色，其余边框显示为灰色。2.1.4顶部悬浮DOM树:lililililidivdivdivul流程图：运行程序，加载CSS样式为每个边框设置高、宽、颜色和边框之间的间隔当属边悬浮时，边框中的字会变色点击边框时，同样会变色，并且连接到相应的页面当释放点击时，会自动恢复到刷新时的页面2.1.5页面左边当鼠标点击第二个div时会自动链接到相关页面鼠标点击实时搜索时页面跳转，在搜索栏输入并按sign up会跳转当鼠标悬浮在第三个div现实的页面时图片的边框会变为灰色流程运行程序，加载CSS样式当鼠标悬浮在第二个div所显示的页面时，字变为红色并且跳转图：divdivdivdivh2divullililih2divulh2divlialiulpfromfieldestlegendinputinput2.1.6页面右边：DOM树：pdivdivdivdivhdivullidivpdivdiv流程图：运行程序加载CSS样式各个div下的内容都加载完成并且显示，单击会返回到主页面2.2.1页面左边DOM树：divdivdivimgpimgpdivhullilidivpdivdivphdivfrompinputlabelppinputinputdiv流程图：运行程序加载CSS样式，并且显示所添加的内容在div=“responsed”时输出评论窗口，填写姓名和邮箱写下评论，提交或重置当鼠标点击时页面会自动返回2.2.2右边页面（与左边页面相似）2.3full-width.html(学校概况)2.3.1DOM树：divdivhppppdiv流程图：运行程序加载CSS样式输出文字显示2.4 3-columns.html(学院招生)2.4.1流程图：运行程序加载CSS样式当点击第三个div中的内容时鼠标会自动变换样式且点击之后会弹回主页面表格中的内容不会变化，显示的是固定值点击第四个div，其中的第一个li在点击之后会链接到相关页面当中鼠标悬浮时会变换样式，且会显示相关链接的名字点击更多时会自动跳转到首页面DOM树：divdivdivhullililililidivhptheadtabletrththththtbodydivdiv4htrtrtdtdtddiv4hulplililililiaaaaa2.5 gallery.html(学校图库)2.5.1视频DOM树：divdivdivdivdivulhpp流程图：运行程序加载CSS样式为视频添加图片且当鼠标悬浮时变换样式点击视频图片会放映视频并且视频的下部有暂停、音量控制、全屏操作按页面上的返回会回到主页面2.5.2图集DOM树：divdivdivhppdivullililidivdivdivullililiaa流程图：运行程序加载CSS样式当鼠标悬浮变换样式，且显示title属性点击图片会自动跳转到空白页，在标题栏显示图片名称和此时图片的像素点击图片之后图片放大，在图片上有放大或缩小的鼠标显示，点击会自动放大或缩小点击后退返回到历史记录，可刷新页面三制作此网站所用到的本书上的知识点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以及子节点和父