JQuery
动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])
each
jQuery.each(collection, callback(indexInArray, valueOfElement)):
描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
.each(function(index, Element)):
描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。
.each()
方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this
总是指向这个元素。
注意
在遍历过程中可以使用return false
来提前结束each循环
.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
基于jQuery的,使用框架动态效果的时候必须先导入jQuery
需要导的三个文件:jQuery,css,js
布局容器
使用前端框架之后 所有标签样式的调整 全部是通过class属性值来的
<div class="container"></div>
左右两边留白
<div class="container-fluid"></div>
全屏显示
栅格系统
默认情况下:
一个row就是一行
每个row默认会均分成12份
可以通过col-md-Num 来选择想要占几份
栅格参数:
.col-xs-
:超小屏幕(手机)
.col-sm-
:小屏幕(屏幕)
.col-md-
:中等屏幕(桌面显示器)
.col-lg-
:大屏幕(大桌面显示器)
写在开头的两句代码:
<div class="container-fluid">
<div class="row">
...
</div>
</div>
列偏移
col-md-offset-3
表格
为任意<table>
标签添加.table
类可以为其赋予基本的样式
表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列。
浮动
通过添加一个类,可以将任意元素向左或向右浮动。!important
被用来明确 CSS 样式的优先级。
<div class="pull-left">...</div> //向左浮动
<div class="pull-right">...</div> //向右浮动
按钮
为 <a>
、<button>
或 <input>
元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
如:<button class="btn btn-default" type="submit">Button</button>
通过改变btn-default可以改变按钮的颜色
btn-default 默认样式-白色
btn-primary 首选项-深蓝色
btn-success 成功-绿色
btn-info 一般信息-淡蓝色
btn-warning 警告-黄色
btn-danger 危险-红色