一、jQuery补充
- 1. 动画效果
- 2. 补充
  - 2.1 each循环
  - 2.2 data()
二、Bootstrap

一、jQuery补充

1. 动画效果

// 基本
show(毫秒数)  // 显示
hide(毫秒数)  // 隐藏
toggle(毫秒数)
// 滑动
slideDown(毫秒数)
slideUp(毫秒数)
slideToggle(毫秒数)
// 淡入淡出
fadeIn(毫秒数)
fadeOut(毫秒数)
fadeTo(毫秒数)
fadeToggle(毫秒数)

2. 补充

2.1 each循环

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出：

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false；

2.2 data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

二、Bootstrap

详见：https://v3.bootcss.com/css/#buttons

响应式布局：根据手机/电脑屏幕大小不同显示不同的界面

Bootstrap 是移动设备优先的。

1. 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类是用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类是用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

2. 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

默认情况下，一个row就是一行。

每个row默认会均分成12份，你可以通过col-md-Num 来选择你想要占几份。

2.1 栅格参数

xs  //手机屏幕，最小
         
sm  // 平板，中小屏幕

md  // 普通显示器，中等屏幕

lg  // 超大显示器，大屏幕

2.2 列偏移

col-md-offset-1

3. 表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

4. 表单

表单加样式  你只需要记一个   form-control

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

5. 按钮

为 <a>、<button> 或 <input> 元素添加按钮类.btn

5.1 预定义样式

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-info">（一般信息）Info</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

<button type="button" class="btn btn-link">（链接）Link</button>

6. 快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。

<div class="pull-left">...</div>  左浮
<div class="pull-right">...</div>  右浮

50 前端学习7之 Bootstrap