随笔分类 - jsp
摘要：任务描述 本关任务：清除浮动。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.浮动出现的问题，2.清除浮动的方法。 浮动出现的问题 基本的html结构如下： <div class="container"> <div class="box1"> <p>我是box1不浮动的内容 </p> <d
阅读全文
摘要：任务描述 本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.外阴影，2.多行省略，3. 设置圆角。 外阴影 下面是基本的html结构： <div class="shadow"></div> 效果如下： 现在要左边，右边，下边都添加阴影
阅读全文
摘要：任务描述 本关任务：用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标签的内容呢
阅读全文
