俺的web课设大作业

---

前言

仅供参考

---

一、登陆界面

登陆界面：纯html+css的布局设计

二、首页

前台模块：
（1） 系统首页：html+css布局设计bannner区，菜单导航区，焦点区，主体内容以及脚部的版权区
a) 焦点区的图片轮播:用jquery封装函数和事件，定时器,以及淡入淡出效果来实现。
b) 校园新闻随机推荐: html+css布局设计，JsonData封装数据，调用随机函数引用内容，显示内容，展示内容的时候设置定时器。

三、后台展示和详情页

（1） 后台主页：主要是用到了html5+css的一些布局设计
（2） 竖直菜单导航栏:主要用了jquery中的slideToggle() 方法通过使用滑动效果（高度变化）来切换子菜单的可见状态。
（3） 五类信息(院级，教室，课程，教室，排课)增删查动态表格:
a) CSS伪类选择器设计了只移动表的主体内容，不移动表头的滚动条。
b) 显示的主要表的内容还是采用了html+css的布局设计
c) 删除主要采用了html的涉及dom的函数。
d) 全选和批量删除采用的遍历的方法
e) 弹出层的样式设计主要通过Bootstrap 表单的栅栏布局样式。显示方式是通过jquery的淡入淡出的效果。
f) 增加是通过jquery的append的方法
g) 编辑是通过jquery获取信息，修改信息返回信息
h) 查看是通过jquery获取信息来展示。
（4） 增加学生信息:
a) 表单的整体设计还是通过html+css的样式
b) 省市地区联动，数组里面写好省市区的信息，写函数获取内容，然后选择省份的时候，就对城市下拉列表初始化，传入对应的数组信息。

一些或许能用得上的知识点

因为当时我们的web大作业要求是手写的css+html+js
就没有用很多的框架
但是数据库+web的课设中前端还是用了框架的
这些知识点是我电子笔记当时杂乱记载的，排版有点乱，仅供参考吧

首页知识点总结

菜单导航栏使用ul嵌套，加上display属性

display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display: block; 此元素将显示为块级元素，此元素前后会带有换行符。

display:inline，此元素会被显示为内联元素，元素前后没有换行符。

轮播图主要是用到jquery来封装韩式和事件，定时器和淡入淡出效果来

定时器
trigger():在每一个匹配的元素上触发某类事件。
triggerHandler():这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。
第一：trigger会导致浏览器同名的默认行为的执行，如：trigger(‘submit’);不但会执行submit()函数的效果，也会执行表单提交的效果；而triggerHandler就不会导致默认行为的执行

第二：triggerHandler只会触发JQ对象集合中第一个元素的事件处理函数，也不会产生事件冒泡。而trigger不同

第三：这个方法的返回时事件处理函数的返回值，而不是具有可链性的JQ对象，此外，如果最开始的JQ对象集合为空，则返回undefined.

jQuery 遍历 - eq() 方法

jQuery 遍历 -siblings()用于查找当前元素的同胞元素，就是拿到当前元素的兄弟节点(不包括自己)。
给当前元素设置新的样式，并删除当前元素的同胞元素的样式：
$(this).addClass(“active”).siblings().removeClass(“active”);

fadeIn和fadeOut方法
addClass() 方法向被选元素添加一个或多个类。 *
index() 方法返回指定元素相对于其他指定元素的 index 位置。
热门新闻随机推荐用的是JSONData来封装，调用随机函数引用内容，显示内容，显示内容的时候设置定时器，

getRandomNum取随机数

random:返回小于等于x的最大整数

Math.random();返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

1. margin:0 auto 可以实现元素居中

#代表id，.代表class

如果js代码在html文件最后才可以允许，放到html文件开头和外部调用js都没办法运行的话:原因可能是，你写的js只有在网页被加载后才可以调用，这时候你在js加上 $(function(){ })这个匿名专函数属;它的意思就是网页一加载就执行，就就可以解决了
rigger():在每一个匹配的元素上触发某类事件。
triggerHandler():这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。

https://download.csdn.net/download/qq_43741419/19699865
源码，仅供参考仅供参考