05 2022 档案
摘要：任务描述 本关任务：实现用户管理功能之用户删除，完成DelUserServlet类的编写。 相关知识 为了完成本关任务，你需要掌握：如何正确地获取指定被删除用户的name，并最终将用户列表的改动持久化到数据库中。 数据库操作类UserDao提供了删除方法delUser(name)，在本关中，你可直接
阅读全文
摘要：任务描述 本关任务：完成AddUserServlet类的编写，实现添加用户的功能。要求在页面完成新用户表单填写后，可将相关新用户信息持久化到数据库中，并要求在完成用户添加后重定向至用户详细信息显示页面。 相关知识 为了完成本关任务，你需要掌握：如何传递表单数据并实现数据持久化。 另外，你依然可以直接
阅读全文
摘要：任务描述 本关任务：完成ShowUserServlet类的编写，实现对某个用户具体用户信息的查询与显示。首先，需要从具体的http请求中获取到指定的需要进行展示的用户ID，然后，对该指定用户进行信息查询和页面展示。 相关知识 为了完成本关任务，你需要掌握：1.如何获取和处理url中的挂参；2.如何获
阅读全文
摘要：任务描述 本关任务：完成AllUsersServlet类的编写，实现所有用户信息列表展示功能，将用户信息展示于页面上。其中用户信息保存在数据库中，可直接使用数据库操作类UserDao进行数据查询获取等操作。 相关知识 为了完成本关任务，你需要掌握：1. 如何为HttpServletRequest对象
阅读全文
摘要：任务描述 本关任务：使用Kaptcha组件生成验证码，并校验验证码是否正确。 相关知识 之前两关我们已经了解了验证码的制作流程，不过我们在开发中一般不会去自己从零开始编写验证码，而是会使用到开源的组件，本关我们就来使用Kaptcha来生成验证码，并且编写一个页面校验用户的验证码是否输入正确。 Kap
阅读全文
摘要：任务描述 本关任务：使用Kaptcha组件生成验证码，并校验验证码是否正确。 相关知识 之前两关我们已经了解了验证码的制作流程，不过我们在开发中一般不会去自己从零开始编写验证码，而是会使用到开源的组件，本关我们就来使用Kaptcha来生成验证码，并且编写一个页面校验用户的验证码是否输入正确。 Kap
阅读全文
摘要：任务描述 本关任务：编写程序验证验证码是否正确。 相关知识 上一关我们已经学习如何生成验证码了，为了完成一整套的验证码使用流程我们还需要知道如何验证用户提交的验证码是否正确。 登录功能 我们经常在登录注册的时候填写验证码，本关我们就来实现登录功能。 首先我们来理解验证码校验的基本流程： 上图展示了一
阅读全文
摘要：任务描述 本关任务：使用servlet生成验证码。 相关知识 验证码在我们登陆、注册网站，火车票买票的时候经常会见到的，为什么要有验证码呢？可能很多人都会有这个疑问。 但是作为开发者，可能我们更多的就会关注怎么生成验证码了。 要了解如何生成验证码，我们首先要知道什么是验证码，网站为什么需要它。 为什
阅读全文
摘要：任务描述 本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.外阴影，2.多行省略，3. 设置圆角。 外阴影 下面是基本的html结构： <div class="shadow"></div> 效果如下： 现在要左边，右边，下边都添加阴影
阅读全文
摘要：任务描述 本关任务：清除浮动。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.浮动出现的问题，2.清除浮动的方法。 浮动出现的问题 基本的html结构如下： <div class="container"> <div class="box1"> <p>我是box1不浮动的内容 </p> <d
阅读全文
摘要：任务描述 本关任务：用CSS3放大效果。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。 transform属性 下面是基本的html结构，： <div class="scale"> <img src="img/diary1.jpg"
阅读全文
摘要：任务描述 本关任务：用Swiper实现一个轮播图。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.Swiper基本的HTML结构，2.基本功能的实现。 搭建Swiper环境 1.下载插件 进入Swiper官网 http://www.swiper.com.cn/download/index.
阅读全文
摘要：任务描述 本关任务：用CSS3实现物体移动效果。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。 transform属性 下面是基本的html结构，： <div class="move"> <p>向上移动</p> </div> 效果如下
阅读全文
摘要：任务描述 本关任务：实现静态页面的头部——header。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.float属性，2.鼠标浮动在上面的效果。 float属性 这里需要实现的效果如下： 下面是基本的html结构，去除了ul,li的默认样式： <ul class="head"> <li>
阅读全文
摘要：任务描述 本关任务：jQuery 遍历 DOM 元素的过滤方法，显示效果如下图。 相关知识 为了完成本关任务，你需要掌握：1.first()，2. last() 3. eq()，4. filter()，5.not()。 基本的html结构如下（CSS已省略）： <div class="contain
阅读全文
摘要：任务描述 本关任务：用 jQuery 遍历 DOM 元素的兄弟元素，显示效果如下图。 相关知识 为了完成本关任务，你需要掌握：1.siblings()，2. next()，nextAll() 3. prev()，prevAll()。 基本的html结构如下（CSS已省略）： <div class="
阅读全文
摘要：任务描述 本关任务：用 jQuery 遍历 DOM 的祖先元素。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.节点树，2.parent()，3.parents()。 节点树 基本的html结构如下： <!doctype html> <html lang="en"> <head> <meta
阅读全文
摘要：任务描述 本关任务：用 jQuery 向下遍历 DOM 节点，显示效果如下图。 相关知识 为了完成本关任务，你需要掌握：1.children()，2. find()。 向下遍历DOM节点 基本的html结构如下（CSS已省略）： <div>div (当前元素) <p>p (儿子元素) <span>s
阅读全文
摘要：任务描述 本关任务：掌握jQuery常见的动画效果——自定义动画，实现的动态效果如下图。 相关知识 为了完成本关任务，你需要掌握：1.平移动画，2.相对值，3.stop()函数 。 基本的结构如下： <button class="stop">动画开始</button> <div class="ite
阅读全文
摘要：任务描述 本关任务：掌握jQuery常见的动画效果——滑动，动态效果如下图。 相关知识 为了完成本关任务，你需要掌握：1.slideDown()，2.slideUp()，3.slideToggle()， 4.stop()。 slideDown()，slideUp() 和 slideToggle()
阅读全文
摘要：任务描述 本关任务：掌握jQuery常见的动画效果——淡入淡出，效果图如下。 相关知识 为了完成本关任务，你需要掌握：1.fadeIn()，2.fadeOut(), 3.fadeToggle()， 4.fadeTo() 5.delay()。 fadeIn()，fadeOut() 和 fadeTogg
阅读全文
摘要：任务描述 本关任务：掌握jQuery常见的动画效果——隐藏/显示，需要实现如下效果。 相关知识 为了完成本关任务，你需要掌握：1.show()和hide()，2.toggle()。 show()和hide() 前面简单地了解过show()和hide()，这里对它们进行一个深入的了解。需要实现的效果如
阅读全文
摘要：任务描述 本关任务：用jQuery删除元素。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.remove()，2.empty()。 基本的html结构如下： <button class="btn">删除内容</button> <div class="box"> <p class="com f
阅读全文
摘要：任务描述 本关任务：用jQuery添加元素，显示效果如下图。 相关知识 为了完成本关任务，你需要掌握：1.append()，prepend()，2.before()，after()。 基本的html结构如下： <button class="btn1">添加内容 </button> <button c
阅读全文
摘要：任务描述 本关任务：用jQuery设置元素的内容和属性值。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.设置元素的内容，2.设置元素的属性。 设置元素的内容 基本的html结构如下： <p class="first"></p> <p class="second">我是第二个</p> <in
阅读全文
摘要：任务描述 本关任务：用jQuery获取元素的内容和属性。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.获取元素的内容，2.获取元素的属性。 获取元素的内容 基本的html结构如下： <p><srtong>我是 srtong 标签</strong>我是文本内容</p> 如何获取p标签的内容呢
阅读全文
