day05 jQuery:事件 CSS3的animate.css动画库 CSS3的@media 相对单位rem做响应式 jQuery的UI库: jQueryUI Bootstrap:介绍,起步,全局css样式
一.jQuery: 事件
1.1.事件
同时具有: click(), dblcick()这两个事件的冲突解决:
单击事件操作放到300ms的定时器中: 然后想办法清掉单击事件的两个定时器
二.CSS3 的animate.css动画库: (80个动画的类名: 如下)
bounce 反弹 bounceIn 弹入 bounceInDown bounceInUp bounceInLeft bounceInRight
bounceOut 弹出 bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
... 淡入淡出 fadeIn 淡入 fadeInDown fadeInUp fadeInLeft fadeInRight
fadeInDownBig fadeInUpBig fadeInLeftBig fadeInRightBig //有Big的对应的是-2000px, 上面那行没有的是-100%
fadeOut 淡出 fadeOutDown fadeOutUp fadeOutLeft fadeOutRight
fadeOutDownBig fadeOutUpBig fadeOutLeftBig fadeOutRightBig
... 卷帘门 ... 滑入 slideInDown slideInUp slideInLeft slideInRight
... 滑出 slideOutDown slideOutUp slideOutLeft slideOutRight
... 旋转 rotateIn 转入 rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
rotateOut 转出 rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
... 缩放 zoomIn 缩放入 zoomInDown zoomInUp zoomInLeft zoomInRight
zoomInOut 缩放出 zoomOutDown zoomOutUp zoomOutLeft zoomOutRight
... 翻转 flipInX 翻转入 flipInY
flipOutX 翻转出 flipOutY
... 滚动 rollIn 滚入
rollOut 滚出
... 光速 lightSpeedIn 扯入?
lightSpeedOut 扯出?
... 铰链 hinge 放鞭炮?
... 千斤顶箱 jackInTheBox 盒子从下面冒出来
... 闪光 flash 闪两下
... 脉冲 pulse 鼓动一下
... 橡胶带 rubberBand 使劲挤橡皮,然后弹开
... 摇 shake 左右摇,三下
... 摇头 headShake 左右摇,一下
... 摆动 swing 摆钟?
... 出炉 tada 闹铃?
... 晃动 wobble 晃动
... 果冻 jello Q弹的感觉?
... 心跳 heartBeat 心跳的感觉?
1.引入模块: animate.min.css文件
2.用法介绍:
直接给标签加类名:
class = "animated" //要使用CSS3的动画,这个必须加上
class = "infinite" //无限循环当前动画效果 (infinite 无限地)
class = "delay-2s" //动画的延迟时间: 延时几秒后,执行这个动画
class = "80个动画中的一个" //执行动画
3.class = "bounce" 反弹动画的演示
3.1.加载页面时: 开启动画效果
3.2.页面滚动一个高度时: 开启动画效果(这里是用jQuery配合)
wukong
bajie
三.JavaScript的动画库: velocity.js
比jQuery动画和css-transitions性能更好的JavaScript动画库 (velocity 高速)
四.CSS3 的@media媒体查询: (media 媒体)
1.做响应式页面: 可以针对不同的屏幕大小定义不同的样式
2.定义和使用:
@media screen and (min-width: 800px){ //screen:媒体类型:屏幕 and|not|only min-width:页面可见区域最小宽度
body{
background-color: red;
}
}
3.准备工作: 设置mata标签,一定要有下面这两个:
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//兼容ie
4.使用@media来做响应式:
根据三种不同屏幕宽度: 显示body的三种不同的颜色
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
5.使用单位来做响应式:
px :是绝对单位
em :是相对单位:相对当前盒子的字体大小
rem :是相对单位:相对根(root: html)元素的字体大小来调整
5.1.练习: rem一般用来做移动端: 根据不同的手机屏幕尺寸,对应的元素大小不同: 使不同屏幕的每行都显示三个盒子
第一步: 确定rem的值,并替换
1.先选一个喜欢的尺寸(这里选取苹果6的宽度为: 375): 写出一套css
2.给html的font-size一个固定的大小: 设font-size: 100px,即1rem = 100px
3.按1rem = 100px的比例: 替换掉所有的px为rem
第二步: 自动获取不同屏幕的页面宽度, 并修改html的font-size:
1.使用js代码动态获取页面的宽度,并修改html的font-size
2.去掉第一步的固定的html的font-size
5.2.resize.js文件: 用来动态计算html的: font-size
1.获得页面宽度后动态修改html上的fontsize
2.375:为选取苹果6的页面的宽度
3.设font-size: 100px,即1rem = 100px
4.得出新设备的font-size: 100 * (width / 375) + "px")
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
console.log(width);
width && (docEle.style.fontSize = 100 * (width / 375) + "px");
};
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
五.jQuery的UI库: (UI:用户界面 user interface:)
1.怎么用:
css, JavaScript, jQuery都不用写, 都给我们写好了, 我们只需要简单地复制粘贴: 根据需求来更改对应的代码就行
2.好用的UI库有哪些:
jQuery UI: 主要分为3个部分：交互、微件和效果库: 其中: 滑块,进度条,折叠,日期选择器这些比较好,其他的看情况使用
jQuery miniUI库: 大项目建议用这个, 但是可能要花钱
jQuery easyUI库: 开源的, 侧重做后台管理系统
jQuery Bootstrap框架: 开源的, 更简单
六.jQuery的UI库:
1.jqueryUI
1.1.小部件: 标签页 日期选择器 旋转器 工具提示框 菜单 滑块 按钮 折叠面板 对话框 自动完成 进度条
1.2.特效: 显示 移除Class 转换Class 特效 切换 切换Class 添加Class 颜色动画 隐藏
1.3.交互: 排序 放置 选择 缩放 拖动
1.3.1.排序:
简单地复制粘贴: 根据需求来更改对应的代码就行
1.4.实用工具: 部件库 定位
七.Bootstrap的UI库: Bootstrap框架
1.Bootstrap介绍
简洁,直观,强悍的前端开发框架, 和其他的jQuery的UI库一样: 让web开发更迅速,简单
Bootstrap是最受欢迎的html, css, 和js框架: 用于开发用于开发响应式布局、移动设备优先的 WEB 项目
一般不会拿这个搭项目,但是前段和后端都需要会这个
2.起步
2.1.下载: 用于生产环境的Bootstrap
2.2.包含的内容
预编译版:
包含: css
css.map(编译并压缩后的css: 执行效率也高) (theme 主题)
JavaScript(都是依赖jQuery的)
字体文件
不包含: 文档 源码文件
Bootstrap源码:
除了包含:预编译版的所有文件
还包含: LESS、JavaScript 和文档的源码
2.3.编译CSS和JavaScript文件
Bootstrap使用grunt进行编译,和 npm一样都是node.js提供的; npm:是基于node.js管理扩展包之间的依赖关系
2.4.基本模块
简单地复制粘贴: 根据需求来更改对应的代码就行
2.4.1.三个meta标签必须放到最前面
2.4.2.选开: IE8支持html5的功能,支持媒体查询的功能
2.4.3.引入Bootstrap核心css文件
2.4.4.引入Bootstrap核心js文件,注意: 这之前必须引入适合版本的jQuery文件
你好，世界！
3.全局css样式
用法介绍:
直接给标签加类名
3.1.概览:
Bootstrap的底层机构的关键部分
3.1.1.html5文档类型
Bootstrap的html元素和css属性: 需将文档类型设置为: html5,就是我们一直用的
3.1.2.移动设备优先
把这个样式融入进了框架的内核中: 需将上面提到的三个meta文件写到最前面: user-scalable=no 是否允许用户缩放,看自己的情况
3.1.3.排版与链接
为排版与链接设置了基本的全局样式:(scaffolding.less) (scaffolding 脚手架)
body的背景色backgroud-color: #fff白色
@font-family-base @font-size-base @line-height-base 使用这些less的变量作为排版的基本参数
为所有链接设置了基本颜色: @link-color, 当链接处于:hover状态时才添加下划线
3.1.4.normalize.css
和之前说过的reset.css作用一样
3.1.5.布局容器
Bootstrap的内容和栅格都要在这两个容器里,这两不能嵌套
class="container" //除了固定宽度,还支持响应式: 还给容器内的元素清除了浮动
class="container-fluid" //除了固定宽度,还支持响应式: 还给容器内的元素清除了浮动: 100%宽度,占据全部视口 (fluid 流体)
3.2.栅格系统
Bootstrap提供的布局方案: 是一套响应式,移动设备优先的流式栅格系统
随着screen和viewport尺寸的增加,系统会自动分为最多12列
3.2.1.简介
栅格系统: 通过一系列的行row和列column的组合来创建页面布局,你的内容可以放到这些创建好的布局中
行row: 必须放到布局容器中container,container-fluid
列column: 放到行row中,并且只有列column可以作为行row的直接子元素
内容: 应该放到列column中
3.2.2.媒体查询
栅格的响应式: 是通过CSS3的@media媒体查询,写在了less文件中实现的,通过max-width可改
3.2.3.栅格参数
class = "row" //行的类名,就这一个
根据以下列所占的栅格数,可以确定每行有几个盒子:
class = "col-lg-1" //列的类名,默认是12: 堆叠在一起;大显示器;大屏幕(>=1200px),container最大宽度: 1170px
class = "col-md-1" //列的类名,默认是12: 堆叠在一起;显示器; 中屏幕(>=992px),container最大宽度: 970px
class = "col-sm-1" //列的类名,默认是12: 堆叠在一起;平板; 小屏幕(>=768px),container最大宽度: 750px
class = "col-xs-1" //列的类名,默认是12: 堆叠在一起;手机; 超小屏幕(<768px),container最大宽度: none
jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
3.2.4.实例: 从堆叠到水平排列
栅格的列column的类名,向上兼容(如果大尺寸的列column的类名没写,以最近一个小的为准),向下覆盖(大屏幕尺寸的列column的类名的优先级大,如果小的没写,就是默认的12)
比如: 只写了 class = "col-md-${num}": 那么小屏幕和超小屏幕是默认的12,是堆叠在一起的; 中等和大屏幕是水平排列,排几个由${num}决定
3.2.5.实例: 流式布局容器
就是将 class = "container" 改成 class = "container-fluid" : 将固定宽度的栅格布局转换成 100%宽度的布局
3.2.6.实例: 移动设备和桌面屏幕
3.2.7.实例: 手机,平板,桌面
3.2.8.实例: 多余的列 column 将另起一行排列
3.2.9.responsive column resets
3.2.10.列偏移
3.2.11.嵌套列
3.2.12.列排序
3.2.13.less mixin和变量
3.3.排版
3.4.代码
3.5.表格
3.6.表单
3.7.按钮
3.8.图片
3.9.辅助类
3.10.响应式工具
3.11.使用less
3.12.使用sass
4.组件
5.JavaScript插件
6.定制
7.网站实例
8.css的介绍
css: 只有样式,不能写逻辑
less: css的升级版: 除了可以写css,还可以写逻辑,.less文件,浏览器可识别不了,需要less编译器搞成css
sass: css的升级版: 除了可以写css,还可以写逻辑,.sass文件,浏览器可识别不了,需要sass编译器搞成css