主要知识点整理
前端
html
标签
<ahref='#' target='_blank'></a>
<tableborder='1' cellspacing='1' cellpadding='1'>
<tr>
<td></td>
<th></th>
</tr>
</table>
colspan 跨列(左右)
rowspan 跨行(上下)
<form>
<inputtype=''/>
text
password
checkbox
radio
file
hidden
submit
reset
button
image
<textarea></textarea>
<select>
<optionvalue=''></option>
</select>
</form>
css
标签选择器
类选择器 .class
id选择器 #id
js
基本语法
数据类型 var
数组
BOM
消息框
定时器
history
location
DOM
增删改查
document.getElementById()
document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()
jquery
基础语法
$()
DOM
for(){...}
jq对象.each(){...}
$.each(jq对象,function(){...})
this
$(this)
在事件里面,指代是当前正在操作的事件源
在each里面,指代是每一个被遍历的元素
bootstrap
1 html网页分层结构
html: Hyper Text Markup Language,中文称之为超文本标记语言
结构层html
表现层 css
行为层JavaScript
<h1 align = “center”> 一级标题 格式居中
align 水平对齐方式
color | 颜色 | #000黑色 #fff白色 red红色 green绿色 |
size | 大小 | 最小1,最大7,默认3 |
face | 字体 | 只能显示本地已存在的字体 |
图片
src |
| 图片的路径地址 | 必写属性,否则看不到图片 | |
width |
| 宽度 | 如果只设置其中一项,那么图片会等比例缩放 | |
height |
| 高度 | ||
title |
| 提示文本 | 鼠标悬停在图片上方会出现的文字信息 | |
alt |
| 替换文本 | 图片加载失败的时候才会出现的文字信息 | |
border |
| 边框 | 只能定义边框的宽度 | |
|
| 空格符 | |
|
< |
| 小于号 | < |
|
> |
| 大于号 | > |
|
© |
| 版权符 | © |
|
| 注意:大于号和小于号很特殊,想以文本形式出现在页面中,必须用特殊字符替代! |
|
无序列表
<ul>
<li>内容一</li>
<li>内容二</li>
</ul>
type="circle" | 空心圆 |
type="disc" | 默认值,实心黑色圆 |
type="square" | 实心黑色正方形 |
注意:type写在ul身上是所有li改变,写在li身上是单个改变 |
有序列表
<ol>
<li>内容一</li>
<li>内容二</li>
</ol>
type="1" | 默认值,1、2、3... |
type="a" | 小写的英文字母,a、b、c... |
type="A" | 大写的英文字母,A、B、C... |
type="i" | 小写的罗马数字,i、ii、iii... |
type="I" | 大写的罗马数字,I、II、III... |
注意:type写在ol身上是所有li改变,写在li身上是单个改变 |
超链接
href | 跳转的路径地址 | 必写属性 |
target | 打开方式 | _blank 新窗口打开 _self 默认打开方式 |
空链接
锚点链接
表格
生成快捷键 table>tr*6>td*2
table | 表格标签 |
tr | 行标签 |
td | 单元格标签 |
border | 边框 |
cellspacing | 单元格与单元格之间的距离 |
cellpadding | 单元格与内容之间的距离 |
align | 水平对齐方式(不推荐使用) left左边 center中间 right右边 |
bgcolor | 背景颜色(不推荐使用) |
rowspan | 跨行合并 |
colspan | 跨列合并 |
width | 宽度 |
height | 高度 |
表单
表单域 <form action="该表单提交至的地址" method="get/post"name="该表单名称"></form>
get与post的区别
get安全性差 会把所有数据显示在浏览器地址栏 有长度限制
post较为安全 会把数据放在http请求中没有长度限制
表单控件
<inputtype=”” />
文本框 <input type=”text” />
密码框 <input type=”password” />
单选框 <input type=”radio” />
多选框 <input type=”checkbox” />
上传控件 <input type=”file” />
隐藏域 <input type=”hidden” /> 临时储存数据 并不会显示在页面中
图片按钮 <input type=”image” src=”图片地址” /> 功能等同于提交
提交按钮 <input type=”submit” />
重置按钮 <input type=”reset” />
普通按钮 <input type=”button” /> 默认没有任何功能,可绑定
下拉菜单 <select name=””>
<optionvalue=”名字”>内容<option/>
<optionvalue=”名字”selected = “selected”>内容<option/>
multiple="multiple" 能同时选择多个 size="10"
value值
placeholderH5新增的表单属性,不兼容ie67 8
checked= checked 单选多选框 默认选择的选项
selected= “selected” 下拉菜单的默认选项 加在option中
文本域
<textarea><textarea/> noresize
style="resize: none" 限制长宽不能拖动
cols 宽度
rows高度
border-color边框颜色
2 css
英文:CascadingStyle Sheets。中文:层叠样式表。又称之为网页的美容师
样式规则
选择器{ 属性:属性值;属性:属性值; }
书写位置
内嵌式一般书写在<head>范围内
<style>
div{
color:red;
}
</style>
行内样式写在标签上
<divstyle = “color:red;”></div>
外链式外部.css文件
CSS文件中
div{
color:red;
}
使用link标签 写在head中
<linkrel="stylesheet" href="CSS文件位置"/>
CSS属性词
background 背景
text-align 文本对齐方式
leftcenter right
font-size 文字大小 必须加单位px
谷歌浏览器不支持小于12px的字
text-indent 文本缩进 1em代表一个字宽
font-weight 文本粗细 normal不加粗 bold加粗
font-style 文本样式 normal正常 italic倾斜
line-height 行高 必须加单位px 不加单位默认是百分比
文本输入框的轮廓outline 浏览器默认的蓝色轮廓线 none
word-wrap: break-word;文字到达边界自动换行
显示模式
块元素
网页中,一切皆盒子,一切皆矩形
盒子实体化:宽、高、背景色
特点:
1.一行只能存在一个
2.支持宽高的设置
3.如果没有宽度,默认占整行
代表:div ul ol li p h1 h2 h3 h4 h5 h6...
行内元素
特点:
1.一行可以存在多个
2.不支持宽高的设置
3.大小是由内容决定的
代表:span a b i...
显示模式转换
display
block转换成块
inline转换成行内
盒子隐藏none
js中盒子的显示隐藏通过block和none来切换
基本选择器
标签选择器
选择标签名把该标签名内的内容定义成一个样式,缺点:无法实现多样化
id选择器
id唯一
#test{...}
<divid='test'></div>
类选择器
可重复使用
<divclass='test'></div>
<divclass='test1 test2'></div>
扩展选择器
后代选择器
选择的是元素的子级
父级选择器子级选择器{...}
并集选择器
优化的时候使用,定义相同的样式,减少代码冗余
把各个选择器通过逗号连接而成,最后一个后面不要加逗号
div,.class,#id,ulli{...}
属性选择器
选择器[属性=值]{...}
伪类
当达到一个状态的时候,可能得到某些样式
当失去这个状态的时候,刚刚得到的样式也随之而去了
选择器:link 未被访问过的链接
选择器:visited 已经被访问过的链接
选择器:hover 鼠标悬停在元素上方的时候★★★★★
选择器:active 激活中的元素(按下的链接)
选择器:focus 获取键盘输入焦点的时候(针对表单元素)
这个顺序不能颠倒 lv ha
盒子模型
盒模型=内容+内边距(padding)+边框(border)+外边距(margin)
border:1pxsolid red;
会撑大盒子
border-top/left/bottom/right
1px 宽度
solid 线型
solid实线 dashed虚线 dotted点线
red 颜色
padding
padding-top/right/bottom/left
会撑大盒子
padding:10px 上下左右10px
padding:10px 20px 上下10px 左右20px
padding:10px 20px 30px 上10px 左右20px 下30px
padding:10px 20px 30px 40px 上10px 右20px 下30px 左 40px(顺时针)
margin 4种取值情况同padding
margin-top/right/bottom/left
特殊取值:
1.可以用负数,后写的盒子会压住先写的
2.margin:0auto;可以让一个固定大小的块元素水平居中
margin-left:auto;
margin-right:auto;
背景
background:颜色 图片 平铺方式 位置;
background-color 背景色
background-image 背景图片 默认平铺
background-repeat 背景平铺方式
no-repeat
repeat-x
repeat-y
background-position:xy; 背景位置
topright bottom left center
具体的px
正 x向右y向下
负 x向左y向上
background-size 背景尺寸 100%拉伸满,
常用样式
color | 字体颜色 | red红 green绿 blue蓝 #fff白 #000黑 rgb(0,0,0) 取值0-255 |
font-size | 文字大小 | 必须加单位像素px 浏览器默认的字号是16px |
text-align | 文本对齐方式 | left左 center中 right右 效果等同于标签属性align |
text-indent | 文本缩进 | 1em代表一个字宽 |
line-height | 行高 | 必须加单位px |
font-weight | 文本粗细 | 正常:normal 加粗:bold |
font-style | 文本样式 | 倾斜:italic 正常:normal |
outline | 浏览器默认的蓝色轮廓线 | 没有:none |
浮动
float: left right none
价值:布局
可以让块元素在一行上存在多个
让元素飘起来,上浮到空中,原先在文档中的位置消失了
闭合浮动(清除浮动)
找到最后一个浮动的元素,在它后面加一个空的div
定义样式:
clear:left right both
3 JavaScript
文件书写格式
{
“属性”:”值”,
}
特点:
1. 交互性(它可以做的就是信息的动态交互)
2. 安全性(不允许直接访问本地硬盘)
3. 跨平台性(只要是可以解析Js的浏览器都可以执行,和平台无关)
书写位置
在不影响页面功能的前提下,,,JS越晚加载越好
内嵌式
理论上js可以书写在html的任意位置
在不影响功能的前提之下,js越晚加载越好(例如在Html标签结束后)
外链式
新建.js文件,在该文件中书写js语句,通过script标签链入到页面中
<scriptsrc="js/out.js"></script>
一旦做了引入,内部不允许写任何的js语句
行内
事件属性,简写的事件
<inputtype="button" value="普通的按钮"οnclick="alert('Hello World!');" />
引号交替使用的时候,必须单双分开
数据类型
js当中
数值型 凡是数字都是这个类型 number
字符串 凡是引号包裹的都是这个类型 string
布尔型 true false boolean
对象型 null object
未定义型 undefined undefined
新建数据类型,记住一个var即可
var变量名 = ...;
命名规范:
1.只能由字母、数字、_(下划线)、$(美元符号)组成
2.不能以数字开头
3.命名中不能出现-(js会理解成减号进行减法的操作),不能和关键字冲突
驼峰命名法
检测数据类型
typeof变量
typeof(变量)
alert(b);
//原样输出的时候必须加引号
//变量一定不要加引号
运算符
算术运算符
+
-
*
/
%
a++ ++a
--
注意:
1.字符串通过加号可以跟任意的数据类型重新组成一个全新的字符串
2.如果字符串本身是一个数字的话,做除了加法以外的运算,首先会把他转成数值型再计算
3.如果不是数字,一定返回NaN not a number
关系运算符
== 等于(只比较内容) === 恒等于(比较内容的同时还要比较数据类型)
注意:关系运算符返回的结果只有两个:true / false
alert("22" == 22); // true
alert("22" === 22); // false
逻辑运算符
&& 与 true&&false ====>false
|| 或 true||false ====>true
! 非 !true ====>false
false(理解):0 null undefined
true(理解):非0 非null 非undefined
三元运算符
条件?表达式1:表达式2
如果条件为true,返回表达式1的结果
如果条件为false,返回表达式2的结果
语句
全局函数:parseInt(num); // 取整,不会四舍五入
Math.round(num);//取整,会四舍五入
if switch while dowhile for
与Java用法相同
自定义函数++++
自定义函数
function fn(){...}
这个函数不会主动执行,需要你调用
fn();
匿名函数
function(){...}需要调用
1函数必须被调用,才会被执行
2如果函数需要返回值 直接使用return返回即可,不需要指定返回类型
3如果需要传递参数,不需要指定类型
4在js中不存在函数重载, 如果写了两个,后面的会把前面的覆盖掉
匿名函数
无法直接调用
1赋值给变量,通过变量名调用
2自我调用
1 (function(){
alert('我是一个匿名函数!');
})();
2 var fn= function(){
alert('我是一个匿名函数!');
事件++++
语法格式:事件源.事件类型=执行指令
事件三要素:
1. 事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签
2. 事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
3. 执行指令:事件触发后需要执行的代码,一般使用函数进行封装
常用的事件
事件名 | 描述 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件---注意事件源是表单form |
onclick | 鼠标点击某个对象 |
ondblclick | 鼠标双击某个对象 |
onblur | 元素失去焦点,通常针对表单元素 |
onfocus | 元素获得焦点,通常针对表单元素 |
onchange | 用户改变域的内容,通常针对表单元素 |
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
onkeyup | 某个键盘的键被松开 |
onmousedown | 某个鼠标按键被按下 |
onmouseup | 某个鼠标按键被松开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousemove | 鼠标被移动 |
window.onload= function(){
//只有当页面其他内容全部加载完成之后才会执行这里的语句
}
checked = true false true触发
BOM 对象
Screen对象:里面存放着有关显示浏览器屏幕的信息。
Window对象:表示一个浏览器窗口或一个框架。
Navigator对象:包含的属性描述了正在使用的浏览器。
History对象:保存浏览器历史记录信息。
Location对象:Window对象的一个部分,可通过window.location属性来访问。
window对象
消息框
警告框
alert();
确认框
confirm();
true false
消息框
prompt();
//alert();
//confirm('你真的要离开我吗?');
vari = prompt('请输入您的爱好','例如:看视频');
console.log(i);
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
定时器
单次定时器(定时炸弹)
setTimeout(匿名函数整体或者自定义函数名,时长)
单位毫秒数
setTimeout(fn,1000)
循环定时器(闹钟)
setInterval(匿名函数整体或者自定义函数名,时长)
停止定时器
clearTimeout(变量名)
clearInterval(变量名)
定时器的变量名
定时器积累Bug的解决:
在JS中,如果一次性开启了N个定时器,则会产生定时器积累的Bug;解决这一Bug方法很简单,只需要在每次开启新定时器前,将旧的定时器做一次清空即可:
clearInterval(timer);
vartimer=setInterval(....);
注意:开启定时器前,一定要先清除定时器。
History对象
首先必须产生历史记录
history.forward()前进
history.back() 后退
history.go(正数前进几页,负数后退几页) 前往
Location 对象
location.href = ...
<input type="button" value="百度" οnclick="location.href='www.baidu.com';" />
DOM(增删改查)
获取元素
id: document.getElementById(''); 唯一性
下面的方式获取到的一定是一个集合或者一个数组
js中不允许对集合进行整体的操控
哪怕当前只有一个对象,也是一个数组的格式
name: document.getElementsByName('');
tagname: document.getElementsByTagName('');
classname: document.getElementsByClassName('');
获取标签内容
innerHTML 实际开发运用的最多 后面内容加引号
innerText 写入的是实际文本
判断是否拥有子节点
hasChildNodes() 返回值true false
删除节点
remove() 删除某节点
父节点调用.removeChild(要删除的子节点) 删除子节点
替换节点
replaceChild(new,old) 如果替换还需保留原数据,补充:cloneNode(true是全部克隆,不填则是标签克隆)克隆复制一份去替换.
创建节点
document.createElement(‘标签’) 可以创建一个空标签
appendChild()
insertBefore(new,old)在old之前的位置加new
在js中没有insertAfter()
获取标签属性
对象.属性名 一般使用
getAttribute(‘’) 上述无用时使用
setAttribute(‘属性’,’值’) 设置属性
removeAttribute() 删除某属性的值
获取css
对象.style.属性名
font-size =====> fontSize 减号不能出现,会按照算术符识别
JS当中的对象
Array对象 就是数组,不过元素类型不限,长度随增
newArray(); 直接new
newArray(10); 定义长度,但是设置超出长度的角标时会自动扩大
[1,2,3,4,5] 直接定义数组 可以直接定义多元数组
RegExp对象 正则
newRegexp(""); 一种定义方式,内容需要用双\
/ /; 这种定义方式常用,不需要双\
test(); true false 测试
^行开始 限定
$行结尾
不支持双|| 双&&
一般字符串判断空的话 可以使用 str.replace(/^\s+$/,'') == '' 来判断
校验正则的方法:
正则对象.test(验证对象);
验证通过返回true ,验证不通过返回false
Data日期对象
年:getFullYear() 以四位数字返回年份
月:getMonth() 返回月份 (0 ~ 11)
日:getDate() 返回一个月中的某一天
星期:getDay() 返回一周中的某一天 (0 ~ 6),0代表周日
小时:getHours() 返回小时(0 ~ 23)
分:getMinutes() 返回分钟(0 ~ 59)
秒:getSeconds() 返回秒数(0 ~ 59)
毫秒值:getTime() 返回 1970 年 1 月 1 日至今的毫秒数
toLocaleString() 把Date对象转换为字符串
toLocaleDateString() 把Date对象的日期部分转换为字符串
toLocaleTimeString() 把Date对象的时间部分转换为字符串
毫秒/1000 秒
秒/86400 天
Math对象
Math.random() 返回 0 ~ 1 之间的随机数
4 jquery
官网:http://jquery.com/
推荐在http://lib.sinaapp.com/下载小版本最高的1.X源文件。
引入:在需要使用jquery的html中使用js的引入方式进行引入
<scriptsrc="jquery-1.12.4.min.js></script> 该标签如果用来引包,里面不允许写任何js语句!
jq中针对同一个对象的所有操作,可以采用链式编程的方式写在一行上
基础
入口函数
差异: js:window.οnlοad=function(...){}
jq:$(document).ready(function(){...});
$(function(){...});
//js
//只能书写一个
//等待页面中所有的元素都加载完成(包括标签对、标签内容、标签属性)
//jq
//$() jquery的选择器环境
//只要标签对加载出来了,就会开始执行
//书写多个,并行存在,都会生效
事件
//事件源.事件类型(执行指令)
//jq里面的事件都不需要加on
this不需要加引号
对数组
对数组可以整体操控
获取数组元素:数组名.eq(i)
对象互转
js对象转换成jq对象:$(js对象)
jq对象转换成js对象:jq对象[索引] 或 jq对象.get(索引)
控制CSS
格式: var box = $('#box');
box.css('width','200px');
批量控制; box.css({
"width":"200px",
"height":"200px",
"background-color":"skyblue"
})
获取: box.css('width');
控制标签属性;
//js
//.title
//getAttribute('title')
//setAttribute('title')
//removeAttribute('title')
//jq
//attr()
//attr({})
//removeAttr()
获取部分属性状态获取不到(例如checke),获取到的是undefined
这时使用
//prop()
//prop({})
//removeProp()
补充
//disabled让表单控件启用或者禁用
disabled="disabled"
true启用 false禁用
连接
val()
无参获取value 有参修改值
控制标签内容
相当于js的innerHTML();
jq对象.html(); 有参修改,无参获取
选择器
基本选择器
$('标签名') 标签选择器
$('#id名') id选择器
$('.class名') 类选择器
层次选择器
$('A B') 获得A元素内部的所有子元素B
$('A >B') 获得A元素内部的第一层所有子元素B
$('A + B') 获得A元素同级下一个B元素
$('A ~ B') 获得A元素后面的所有同级B元素
筛选选择器
jq对象.parent() 当前元素的亲生父级元素
jq对象.parents() 当前元素的所有父级元素
jq对象.siblings() 最牛的筛选选择器,可以选出除了自己以外的所有同级元素
jq对象.children() 当前元素的第一层子元素
jq对象.find() 当前元素的指定子级元素
表单属性选择器
$(':enabled') 选择可用的input标签
$(':disabled') 选择不可用的input标签
$(':checked') 选择选中的radio或者checkbox
$(':selected') 选择选中的<select>
属性选择器
$('A[属性名]') 获得有属性名的A元素
$('A[属性名=值]') 获得属性名等于值的A元素
$('A[属性名!=值]') 获得属性名 不等于 值的A元素
$('A[属性名^=值]') 获得属性名 以值开头 的A元素
$('A[属性名$=值]') 获得属性名 以值结尾 的A元素
$('A[属性名*=值]') 获得属性名 含有值 的A元素
$('A[属性名!=值][属性名^=值]') 复合属性选择器,多个属性同时过滤
基本过滤选择器
$('A:first') 过滤出第一个
$('A:last') 过滤出最后一个
$('A:not(选择器)') 排除指定的元素
$('A:eq()') 按索引值过滤
$('A:gt()') 过滤大于指定索引值 从0开始
$('A:lt()') 过滤小于指定索引值
$('A:even') 过滤索引值为偶数 从0开始
$('A:odd') 过滤索引值为奇数
$(':header') 过滤所有的标题标签 h1-h6
$(':animated') 过滤正在执行动画的标签对象
JQ动画
对角线动画
jq对象.show() hide() toggle()
注意:
1. 括号中可以加动画时长(slownormal fast 毫秒数)任一个;
2. fast=200 normal=400 slow=600
3. 默认不做动画
滑动动画
jq对象.slideDown() slideUp() slideToggle()
注意:如果没有参数,默认以normal(400)的速度做动画
动画队列机制
jq中如果多次触发动画,这些动画将放入一个队列里,该队列中的动画都会被执行,并且都会执行完毕。
stop( )作用:清空动画队列。
类似于开启定时器之前先清空一次一样的道理!
注意:一定要写在动画开始之前。
淡入淡出动画
jq对象.fadeIn() fadeOut() fadeToggle()
注意:如果没有参数,默认以normal(400)的速度做动画
透明度动画
效果:让元素在规定时间里改变一定的透明度
jq对象.fadeTo(时间,透明度) 透明度取值0-1
可以准确的设置透明度,而且透明度最终会停留在标签身上。
注意:只是降低盒子的透明度,不是隐藏盒子
自定义动画
效果:把原本生硬的状态变化通过时间渲染出来
animate({属性名1:值1},动画时长,回调函数);
在jq中,针对任意数值型CSS属性(bg-position除外),都可以产生动画。
注意:回调函数是可选的参数,如果书写了,代表动画结束后,才会去执行该函数体内的代码块。
控制class
//addClass()
//removeClass()
//toggleClass() 切换
//hasClass() true false
DOM操作(增删改)
增
内部新增
A.append(B) 在节点内部的末尾处新增
B.appendTo(A)
A.prepend(B) 在节点内部的最前面新增
B.prependTo(A)
同级新增
A.after(B) 同级之后
B.insertAfter(A)
A.before(B) 同级之前
B.insertBefore(A)
删
//remove() 删除(删除整条标签)
//empty() 清空(清空内容)
改
//old.replaceWith(new) 完整替换掉(包括标签)
索引值
//获取到当前元素在文档中相对于他父亲的位置
//index() 从0开始排序
//-1获取不到该元素,文档中不存在该元素
遍历函数
Jq对象.each(function(index,element){
alert(index); //打印索引
alert(element); //打印集合对象中的每一个元素
})
$(element).css('color','red');在使用的时候必须加选择器环境$()
经验:一般我们很少去用element这个参数,this在这里等同于element
Jq对象.each(function(){
$(this).css('color','red');
}
事件绑定解绑切换
绑定
Jq对象.bind(‘事件’,function(){
事件体
})
Jq对象.bind({事件类型1:function(){事件体},事件类型2:function(){事件体}});
解绑
Jq对象.unbind("事件类型");
解绑所有事件:
Jq对象.unbind();
解绑指定事件:
Jq对象.unbind("click");
切换
//mouseover
//mouseout
//hover(function(){mouseover},function(){mouseout});第一个移入第二个移出
//只写一个function,代表移入和移出都会执行一次里面的语句
//hover(function(){mouseover,mouseout});
5 表单验证插件
基于JQ所以需要先导入JQ再导插件
l 官网地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
l 帮助文档位置:http://jqueryvalidation.org/documentation/
<script>
$("form表单的选择器").validate({
rules:{
表单项name值:校验规则,
表单项name值:校验规则... ...
},
messages:{
表单项name值:错误提示信息,
表单项name值:错误提示信息... ...
}
});
</script>
常用校验规则
自定义校验规则
$.validator.addMethod(name,method,message);参数1:name,校验规则的自定义名称。例如:aaa
参数2:method,执行校验时使用的处理函数。返回true表示校验通过,返回false表示校验未通过。
function(value,element,params){},处理函数被调用时,可以获得3个参数。
参数value:表单项的value值。例如:<inputvalue="">
参数element:被校验的表单项对象。
参数params:使用当前校验规则传递的值。例如:rules : { username : {required : true}}
只有为true才会开始校验
参数3:message,校验未通过时的提示信息(可以不写,不写可以在messages里面配置)。
6 Bootstrap
菜鸟教程网:http://www.runoob.com/bootstrap/bootstrap-tutorial.html
<divclass="container"></div> 容器套装有宽度
<divclass="container-fluid"></div> 100%宽度,占据整个视口
每一行容器最多可以划分12个格子,多余会另起一行
响应式工具
列偏移
col-lg-offset-num 盒子往右偏移num格
注意:移动的距离也是占据格子的份数的,所以会影响其他盒子!
(Ps:lg的尺寸和num都是可以换的)
列排序
col-lg-push-num 盒子往右偏移num格,不会影响其他盒子
col-lg-pull-num 盒子往左偏移num格,不会影响其他盒子
(Ps:lg的尺寸和num都是可以换的)