前端学习（html、css、js）_botton variant-CSDN博客

本文链接：https://blog.csdn.net/abc205212780/article/details/104682773

【Hbuilder常用快捷键】
中途换行： ‘Ctrl+Enter’
跳转到下一个可编辑区： ‘Alt+↓’
插入换行符： ‘Shift+Enter’ Enter
跳转到CSS：‘Alt+↓’
复制当前行：S+C+R
删除当前行：ctrl+d
运行当前页/刷新当前页:ctrl+r

【【HTML】】

【HTML架构】
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title> </title>
</head>
<body>
Holle Word！
</body>
</html>
head：头部分，主要用来放置一些页面信息和页面设置。
body：体部分，用来放置HTML元素，网页显示的所有元素都放置在这里。
<> ：标签，标签表示HTML元素，不是标签内容，默认显示为文本，标签不区分大小写。
标签规则：标签成对出现:<tagname> 文本<tagname/> 。如果不需要显示文本，可以使用单独标签，如<br/> 、<meta/> 等。
标签属性:<font color=“red” face=“宋体” size=5> 标签内可以设置标签元素允许的属性，以’属性名称=属性值’的形式书写，中间以空格隔开。
title：该标签设置网页标题
meta：该标签设置网页相关信息，charset表示设置字符集。

【框架frame】
<head>
<frameset>
<frame name=“left” src="……">
<frame name=“T_main” src="……">
</frameset>
</head>

【HTML常用标签】
<h1> ：标题标签 1-6，1最大 6最小，标签标识字体自动换行。
<font> : 该标签设置文本的字体信息，其属性如下：
size:1-7 7最大。默认字体为3
fase：设置字体，如"宋体"
color:设置颜色，如"red"
<br/> : 换行标签
<hr/> : 水平线标签
<b> 、<strong> : 标识字体为粗体。
<i> /<em> ：标识字体为斜体。
<p> : 段落标签，标签标识字体自动换行，并且空一行。
<a> : 超链接，点击转到链接的页面。属性如下：
href：规定链接指向的页面的 URL。URL后可以使用#跟锚点名称，#top表示锚定到id=top的标签或name=top的<a> ，id的优先级高过name.
target：规定在何处打开链接文档。取值：_blank、_parent、_self、_top、framename
<img> 表示网页上的图片。属性如下：
src：规定显示图像的 URL。
alt：规定图像的替代文本。
align：top、bottom、middle、left、right对齐方式。
border：边框
height、width：图片的宽高。
<ul> 无序列表，需要以li列表项作为子元素。
type:disc菱形方块（默认）、square实心方块、circle空心圆圈

<ol> 有序列表，需要以li列表项作为子元素。
type：1、A、a、I罗马数字、i小写罗马
start：规定有序列表的起始值。
<talbe> 表格元素，需要以子元素为tr的行标签填充，tr需要以td标签填充。
border：边框，=1px 像素 =1pt磅
width、height
bgcolor：指定背景色
align:指定对齐方式，具体方式和img的align相同。
cellpadding：百分比形式，规定单元边沿与其内容之间的空白
cellspacing：百分比形式，规定单元格之间的空白。
<tr> 表格中的一行。
align、bgcolor:对齐方式和背景色
valign:表格的垂直对齐：top、middle、bottom、baseline
<td> 表格的具体单元格
align、bgclolor、width、height、valign
colspan：规定单元格可横跨的列数。
rowspan：规定单元格可横跨的行数。
background：背景图片。
<form> 表单标签标识
action：规定当提交表单时向何处发送表单数据。
method：规定用于发送 form-data 的 HTTP 方法。get/post
target:见超链接的打开方式。
autocomplete:自动完成功能，和impute一样。
<input> 输入控件，根据type="" 有多种类型
text:文本框
password：密码框
radio：单选框，多个单选框需要多个<imput type=“radio”> 标签，但指定同一个name
checkbox:复选框，多个复选框操作同radio
date:日历框，HTML5支持。
email：限制输入email类型
number：限制输入数字
tel：限制输入手机号类型
button：按钮
reset:重置按钮
submit：提交按钮
image:图像形式的提交按钮
hidden:隐藏信息
file：文件选择框
url：必须输入网址类型。
属性如下：
multiple：多行显示
list：必须为datalist类型，为输入框提供选项，使得text变成复选框。
pattern：掩码
placeholder：提示信息
value：默认值
disabled：是否可用,设置为disabled将不可用
checked：true/false checkbox的选中状态。
size：定义输入字段的宽度，最多显示size个字符，多的会隐藏。
required：指示输入字段的值是必需的
min、max：当类型为number或date时，规定输入的最小值和最大值。
maxlength：规定输入的最大字符数目，大于该长度讲无法输入。
autofocus：若值为autofocus，页面加载完毕时该元素自动获得焦点。
autocomplete：on/off 自动提示已经输入过的内容。
readonly：表示表单为只读。

<textarea> 文本域
cols：指定宽度
rows：指定高度
<select> 下拉列表，需要填充子项目option
<option> 下拉列表的具体选项。
selected 规定选项（在首次显示在列表中时）表现为选中状态。
<frameset> 框架集合，定义一系列框架的集合，可控制是上下并列还是左右并列
rows:控制上下并列，如=“15%,*”
clos：控制左右并列
<frame> 具体的框架，可由src属性控制具体页面的HTML文件
frameborder：规定是否显示框架周围的边框,0/1两个值。
marginheight：定义框架的框架内容与框架的上方和下方之间的高度，以像素计。
marginwidth：定义框架的左侧和右侧的边距。
noresize：规定无法调整框架的大小。
scrolling：规定是否在框架中显示滚动条。yes/no/auto
src:规定在框架中显示的文档的 URL。
name:规定框架的名称。

【HTML转义字符】
" "
& &
< &lt
> >
空格
? ¡

【【CSS】】
【CSS创建】
CSS 层叠样式表，可以由以下三种方式被创建
1、外部样式表
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
2、内部样式表
<head>
<style type=“text/css”>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url(“images/back40.gif”);}
</style>
</head>
type属性可以省略
3、行内样式表
<p style=“color: sienna; margin-left: 20px”>
This is a paragraph
</p>

【选择器】
1、元素（标签）选择器
tagname｛属性名：属性值;｝如：html {color:black;}h1 {color:blue;}p {color:gray;}多对属性值用;隔开。

2、类选择器
.classname{属性名：属性值;｝如：.important {color:red;} <h1 class=“important”> 我是一个important类</h1>
类选择器前面可以跟元素名，实现叠加筛选，如：p.important {color:red;} 只会选择到P标签中类名为important的元素。
一个元素可能从属于多个类，如：<p class=“important warning”> 该元素会适应两种类选择器的效果，且可以单独指定叠加效果：
.important.warning {background:silver;}
这个选择器将匹配 class 属性中包含词 important 和 urgent 的元素，单独为其指定背景色为银色的效果。

3、ID选择器
#idname {属性名：属性值;｝如：#intro {font-weight:bold;}
同样，可以跟元素名，实现叠加筛选：*#intro {font-weight:bold;}

4、属性选择器
[属性名]｛属性名：属性值;｝如：a[href] {color:red;}
可以匹配元素选择器：[title] {color:red;}
可以多个属性选择：a[href][title] {color:red;}
可以为属性指定特定的值：a[href=“http://www.w3school.com.cn/about_us.asp”] {color: red;}
可以模糊匹配：
[abc^=“def”] 选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”] 选择 abc 属性值以 “def” 结尾的所有元素
[abc=“def”] 选择 abc 属性值中包含子串 “def” 的所有元素
可以单词匹配：
[abc|=“def”] 选择 abc 属性值中以单词"def"开头的元素。即等于"def"或"def-" 的所有元素，注意，不包含"def_“和”“def "
[abc~=“def”] 选择 abc 属性值中包含单词"def"单词的元素。注意是"def"单词，而不是"def”/“def-”/“def_”。

5、层级选择器：后代、子元素、兄弟选择器
tagname1 tagname2｛属性名：属性值;｝后代选择器：该选择器匹配tagname1 中的所有类型为tagname2的元素。如：h1 em {color:red;}
tagname1> tagname2｛属性名：属性值;｝子元素选择器：只会匹配tagname1的子代中类型为tagname2的元素。
tagname1+tagname2｛属性名：属性值;｝相邻兄弟选择器：两者在一个父元素中，则选择到tagname2。
element1~element2 弟弟选择器：选择1元素之后的所有同级2元素。
6、伪类
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

7、选择器分组，可以指定多个元素适用一个CSS样式，如：
h1,h2,h3,h4,h5,h6 {
color: green;
}
8、子项选择器
X:nth-child(n)
在所有容器中对其子元素进行排序，如果第N个元素是X，则选取它。
X:nth-of-type(n)
在所有容器中选取X元素集合，然后选取每个容器的第N个。比如两个DIV中都有三个P标签，会选取两个div中的第N个。
n可以是可以是数字、关键词或公式。如：
nth-of-type(odd)
nth-of-type(even)
nth-of-type(3n+0)（n从0开始计数，直到超出范围）
可以复合使用：noth-of-type(n+4):noth-of-type(-n+7) 表示父元素的第4-7个元素。注意，n必须在前面，前后任何顺序可以调换。

X:first-of-type 选择所有容器中的首个X元素
X:first-child 选择所有容器中第一个元素是X的元素。

x:last-of-type 选取所有容器中最后一个X元素
x:last-child 选取所有容器中最后一个元素是X的元素。

:only-of-type 选取所有容器中只有一个X元素的元素。
:only-child 选取所有容器中只有一个元素，并且该元素是X元素的元素。

:nth-last-of-type(n) 选取所有容器中倒数第N个X元素
:nth-last-child(n) 选取所有容器中倒数第N个元素是X的元素

9、输入元素选择器
:checked 选择每个被选中的单选或复选按钮。
:focus 具有焦点的输入元素。
:enabled 选择每个启用的输入元素。
:disabled 选择每个禁用的输入元素。
:out-of-range 针对于nput 元素中的 min 和 max 属性，用于标签的值在指定区间之外时显示的样式。
:in-range 同上
:optional 表单元素中如果没有特别设置 required 属性即为 optional 属性。如 input:not(:optional)
:required 如上
:valid/:invalid 输入表单合法和非法。如url输入非url；email输入非邮箱地址等。
:read-only/:read-write 表示只读或可读写的输入元素。

10、文本选择器
::first-line 选择每一个<P> 元素的第一行
::first-child 指定只有当<p> 元素是其父级的第一个子级的样式。
::before 在每个<p> 元素之前插入内容
::after 在每个<p> 元素之后插入内容
::selection/-moz-selection 选择被用户选取的元素部分（通常是文本，所以只能应用少量 CSS 属性：color、background、cursor 以及 outline）

9、其他选择器
:root html元素
:target 当前活动的锚点
:empty 端点元素，即没有子元素的元素。

```
  	表示所有元素
```

:not(selector) 选择除了selector选择器选中的其他元素。

注意：在一个元素被多个选择器指定样式的情况下，优先级如下：!important > 行内样式> ID选择器 > 类选择器 > 标签（元素） > 通配符（属性） > 继承 > 浏览器默认属性。如果优先级相同，采用就近原则，选择最后出现的样式。
具体权重如下：
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器/属性/伪类/继承的权值为 10
HTML 标签选择器的权值为 1

【CSS常用属性】
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
值可以是1、string 任意字符串。
2、attr(attribute) 将元素的某属性作为内容：" (" attr(href) ") "。
3、url(url) 设置某种媒体（图像，声音，视频等内容）
background 在一个声明中设置所有的背景属性 color、position、size、repeat、origin、clip、attachment、image。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
border 可以一次性设置三个具体属性width style color;
border-width 边框宽度，整数
border-style none无边框 dotted点状 dashed虚线 solid实线 double双线 groove3D凹槽 ridge3D垄状 inset outset
border-color 边框颜色
height 设置元素高度。
width 设置元素的宽度。
font 包括：style size weight 等信息
font-size length 把 font-size 设置为一个固定的值。smaller larger inherit 规定应该从父元素继承字体大号/小号/相同尺寸。
font-weight normal、bold、bolder、lighter；100-900。400 等同于 normal，而 700 等同于 bold。
font-style normal、italic、oblique
font-family 宋体、楷体等字体
font-variant small-caps 浏览器会显示小型大写字母的字体。
grid-columns 规定网格中每个列的宽度。
grid-rows 规定网格中每个列的高度。
target
target-name 属性规定在何处打开超链接current当前框架或标签页或窗口；root当前标签页或窗口；parent父框架或标签页;
modal模态窗口;name 在已有框架、窗口或标签页中打开
padding 内边距，包括上右下左四个子选项
color 设置文本的颜色
direction 规定文本的方向 / 书写方向。ltr左右rtl右左
line-height 行高
letter-spacing 字符间距
text-align 水平对齐方式
text-indent 规定文本块首行的缩进。
text-shadow 阴影效果
text-transform 大小写
text-outline 轮廓
opacity 透明度从0-1
margin 外边距分为上下左右四个距离。
list-style 可以设置以下属性
list-style-image 将图片设置为列表项的图标。
list-style-position outside文本的左侧 inside在文本以内
list-style-type 列表项标记的类型none、disc实心圆、circle空心圆、square、decimal数字、其他
cursor 要显示的光标的类型default、url自定义光标、crosshair十字线、pointer一只手、其他
display 元素应该生成的框的类型none不显示、block块级元素、inline行内元素、list-item、table

【css 元素的位置（定位）】
1、相对定位position: relative;
此时top、left等属性相对于其原有位置进行便宜。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
表示id为box的元素在原有位置，其左边向右便宜30像素，上边向下便宜20像素。
2、绝对定位position: absolute;
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
同样的语句，但其相对于“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

3、浮动
float:right/left;
元素一旦设置浮动属性，则其脱离原来的文档流，“漂浮”在原有普通流的层次之上。如果设置向左浮动，则元素默认靠左上移动，直到它的外边缘碰到前一个已定位好的元素或另一个浮动框的边框为止。浮动元素和非浮动元素处于两个层，所以如果第一个元素设置浮动，而第二个元素设置不浮动，那么第一个元素将“漂浮”在第二元素之上，效果就像是覆盖它。
两个特殊点：
1、图片：不管图片在浮动元素之前还是之后，只要它相邻一个左浮动元素，它将浮动到最后一个浮动元素的右方。
1、文字不会被覆盖，如果文字在浮动元素之后，它会排在浮动元素的右边。如果文字在浮动元素之前，

对于一个浮动元素，无论它之前是否块级元素，浮动之后都会变成块级元素：
1、如果浮动元素前面是一个浮动元素，它的位置会被排列在浮动元素之后。
2、如果他前面是非浮动元素，他会被排列在该元素的下一行。
对于一个排列在浮动元素之后的普通元素：
1、如果它是一个行内元素，如文字、图片等，会被排列在浮动元素的右方，这样可以实现环绕效果。
2、如果它是一个块级元素，它会忽略浮动元素，自行排在上一个非浮动元素的下一行，效果可能就是被浮动元素覆盖。
重要结论：浮动元素和它之后的第一个非浮动元素将占据同一个垂直Y轴位置。

清除浮动：
clear：right/left/both;它表示框的哪些边不允许挨着浮动框。
通常这样使用：<div class=“clear”> </div>
增加一个空容器，清除前面的浮动效果，使后方的容器显示在浮动容器的正下方。
实际上，若想要一个div不受到浮动效果影响，只需要指定它的clear：left即可。

元素隐藏：设置display=none 可以隐藏元素。

【【JavaScript】】
<script>
alert(“My First JavaScript”);
</script>
在该标签内可以书写JS代码。当定义函数或定义变量时，一般将<script> 标签写在head中。如果要在文档未加载完毕进行输出（document.write），则可以写在body中。

【输入输出】
页面元素都可以作为输入元素。
输出包括弹窗、控制台、向页面输出、修改页面元素几种。
alert（str）;弹窗，警告框
prompt(msg,defaultText) inputbox/JOptionPane.showInputDialog()，返回值string
confirm(message)：返回true/false 确认框。
document.write() 向页面输出，但若文档已加载完毕，此时输出会覆盖整个文档内容。
console.log(str)；向控制台输出。

元素.innerHTML:更改元素的值。

【数据类型】
变量定义： var x; var x=6; var x=“sex”;
字符串、数字、布尔、数组、对象、Null、Undefined
typeof “John” // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:‘John’, age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

【类型转换】
String() 可以将数字/布尔/日期转换为字符串。Number 方法 toString() 也是有同样的效果。
Number() 可以将字符串转换为数字。

可用于将变量转换为数字
var y = “5”; // y 是一个字符串
var x = + y; // x 是一个数字
自动转换类型
当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。
5 + null // 返回 5 null 转换为 0
“5” + null // 返回"5null" null 转换为 “null”
“5” + 1 // 返回 “51” 1 转换为 “1”
“5” - 1 // 返回 4 “5” 转换为 5
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()

【数组定义】：
var cars=new Array();
cars[0]=“Audi”;
cars[1]=“BMW”;
cars[2]=“Volvo”;
var cars=new Array(“Audi”,“BMW”,“Volvo”);
var cars=[“Audi”,“BMW”,“Volvo”];
数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
for (x in mycars)
{
document.write(mycars[x] + “<br /> “)
}
可以用for循环遍历数组。
可以合并两个数组：arr.concat(arr2)
合并数组为字符串：arr.join(”.”)
对字符或数字数组进行排序：arr.sort()

对象（详见下文）：
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:“Bill”, lastname:“Gates”, id:5566};
对象属性调用可以用person.lastname、person[“lastname”]两种方式。

数据类型注意：
1、不含有值的变量（未初始化）即为Undefined，他的值和type都是undefinde。
2、可以通过将变量的值设置为 null 来清空变量，需要注意的是，null值的类型是object对象类。
3、可以通过typeof（）函数查看变量的类型。

【函数】
function functionname(argument1,argument2)
{
这里是要执行的代码
return x;
}
函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。局部变量会在函数运行以后被删除。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明，即使它在函数内执行。
js函数具有以下特性：
1、函数有无返回值无需明确定义，无返回值的函数被调用时返回undefined
2、函数定义时可以设置形参，但使用时传递的实参可以超过它，只有一一匹配时才可传递参数。其实，参数是被传递在特殊对象 arguments数组中的。
3、根据arguments数组的长度，可以判断传入了几个参数，即可模拟java的部分方法重载功能。
4、函数也是一种对象，实际上，所有函数都是一种function对象。当打印一个函数名称 alert(test)时，会调用该函数对象的tostring方法，将函数定义的所有字符串都打印出来。调用typeof(test) 会显示，function。
当定义了两个同名函数时，前一个会被后一个覆盖，相当于function对象的重新赋值。函数对象可以赋值给其他对象，该对象即为指向函数体的一个引用。
var doAdd = new Function(“iNum”, “alert(iNum + 10)”);
var alsodoAdd = doAdd;alsodoAdd(10); //输出 “20”
函数对象可以当作参数进行传递，外层函数可以在合适的时候要求调用该函数（不带括号表示对象，带括号便是调用，实际上是执行代码块了）。
function callAnotherFunc(fnFunction, vArgument) {
fnFunction(vArgument);
}
事实上，这正是JQ事件绑定的核心原理。

【常规语法】

循环控制等语句与java完全一致，此处省略。
不同处：和vb一样，有with 关键字。有for（i in arr）循环方式。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
异常处理稍有不同。
js的逻辑运算有所不同，叙述如下：
1、变量可以转化为逻辑值其中undefined/null/0/-0/nan/""/false都是false，其他都是true，所有object都是true。
2、！a永远返回布尔值，但&& ||不一定返回布尔值。
3、&&运算，非false对象&&非false对象返回第二个对象; 非flase对象&&false对象，返回false对象本身；两个false对象运算，返回第一个false对象。
4、||运算；非false对象||非false对象，返回第一个对象；false对象||非false对象；返回非false对象；两个false对象运算，返回第二个false对象。

等号判断也有所不同。
如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
简而言之，计算机是以数字作为基础的，所以高级对象会默认转成低级进行判断，等阶为对象> 字符串> 布尔值> 数字数字最低。
另外：
值 null 和 undefined 相等。
在检查相等性时，不能把 null 和 undefined 转换成其他值。
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。检查是否是NAN对象应该用函数ISnan。
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等
若要执行不进行类型转换的等价判断，应该用=或！。

【对象】
person=new Object();
person.firstname=“Bill”;
person.lastname=“Gates”;
person.age=56;
person.eyecolor=“blue”;
person.showColor = function() {
alert(this.color);
};
person={firstname:“John”,lastname:“Doe”,age:50,eyecolor:“blue”，shwoColor：function(){alert(this.color); }};

以上两种方法可以给person对象定义属性和方法。
对象构造器：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
一旦有了对象构造器，就可以创建新的对象实例，就像这样：
var myFather=new person(“Bill”,“Gates”,56,“blue”);
var myMother=new person(“Steve”,“Jobs”,48,“green”);

可以在构造器内部定义方法：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
所有函数都有默认的一个prototype属性，该属性指向其原型对象，通过构造函数构造出的对象，都是继承原型对象的属性和方法的。所以，通过给原型对象添加方法，可以实现共享的方法。
Number.prototype.toHexString = function() {
return this.toString(16);
};
可以用for循环遍历对象的属性。
for (x in person)
{
txt=txt + person[x];
}
注意：
1、对象的所有属性都是public的，并且并没有static的成员变量。
2、在函数中使用this关键字，this指向调用它的对象。
3、根据构造函数可知，Array、Boolen、Numbr等关键字实际上都是一种构造函数，他们具有prototype属性，该属性指向各自的原型对象。
除了自定义的object对象，JavaScript有function、array、string、boolean、mumber、date、regexp、error等本地对象。

【日期】
new Date() 、getTime()同java
setFullYear() 可以根据年月日设置日期
var myDate=new Date()
myDate.setFullYear(2008,7,9)
toUTCString() 将当日的日期（根据 UTC）转换为字符串
getDay() 得到星期（0-6）
getdata
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
Date.prototype.format = function(formatStr){
var str = formatStr;
var Week = [‘日’,‘一’,‘二’,‘三’,‘四’,‘五’,‘六’];
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/MM/,(this.getMonth()+1)> 9?(this.getMonth()+1).toString():‘0’ + (this.getMonth()+1));
str=str.replace(/dd|DD/,this.getDate()> 9?this.getDate().toString():‘0’ + this.getDate());
return str;
}
日期可以比较大小。

【正则表达式】
new RegExp(pattern, attributes);

修饰符描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

RegExp 对象有 3 个方法：test()、exec() 以及 compile()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
compile() 编译正则表达式。
var patt1=new RegExp(“e”,“g”);
do
{
result=patt1.exec(“The best things in life are free”);
document.write(result);
}
while (result!=null)

【document对象】
1、查找元素
document.getElementById 得到单个对象
getElementsByTagName 得到数组
getElementsByName 得到数组
三种可以嵌套查找，例如先找到某个ID，然后再以该ID的JS变量来查找固定的子元素。如：
//获取ID为myDiv中包含link的元素（获取到的是myDiv元素的后代元素）
var links=document.getElementById(“myDiv”).getElementsByClassName(“link”)

element = document.querySelector(‘selectors’);找不到返回null
elementList = document.querySelectorAll(‘selectors’);返回一个nodelist，找不到数组的length是0
其中参数selectors 可以包含多个CSS选择器，用逗号隔开。注意，该参数是CSS选择器，不包含JQ的选择器，如通配符、子元素过滤等不支持。
获得元素后，可以改变元素的文字、CSS样式、属性。

2、all集合。
document.all[i]
document.all[name]
document.all.tags[tagname]
all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。

类似all集合的还有 forms[]、images[]等。

document对象常用属性、方法如下：
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。
open() 打开一个新的文档，并且接收任何
close()关闭用 document.open() 方法打开的输出流，并显示选定的数据。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

【element常用属性】
增删改复制：
parentNode.appendChild(child) 向父节点添加新的子节点，作为最后一个子节点。
parentnode.removeChild(child); 从元素中移除子节点
parentNode.insertBefore(newNode,referenceNode) 在指定的已有的子节点之前插入新节点，如果refenenode 是null，插入到父节点的最末端。
parentNode.replaceChild(newChild, oldChild) 替换节点
var dupNode=element.cloneNode(true) 克隆元素。
子节点和父节点：
element.parentNode 返回元素的父节点
element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。
element.childNodes 返回元素子节点的 NodeList。
element.lastChild 返回元素的最后一个子元素。
element.firstChild 返回元素的首个子元素

属性节点和属性值：
boolean element.hasAttribute(str attrname) 如果元素拥有指定属性，则返回true，否则返回 false。
attrnode elementgetAttributeNode(str attrname) 返回名称等于attrname的属性节点,可以使用nodename/nodevaule等查看属性名称和属性值。
element.getAttribute(str attrname) 返回元素节点的指定属性值，效果等于getAttributeNode() .value
例如：if(ele.hasAttribute(“target”) var attrvalue=getAttribute(“target”);} 返回值是_blank

element.hasAttributes() 如果某节点有任何属性时返回 true，否则返回 false。
NamedNodeMap=element.attributes 返回属性节点集合。
例如：if(btn.hasAttributes）｛x.innerHTML=btn.attributes[0].nodeName + “:”+btn.attributes[0].value;｝
显示：onclick:myFunction()

节点的属性：
element.id 设置或返回元素的 id。属性节点无效，会返回undefined
element.className 设置或返回元素的 class 属性。属性节点无效，会返回undefined。
element.nodeName 返回元素的名称。元素节点返回标签名，属性节点返回属性名。
element.nodeType 返回元素的节点类型。元素节点返回1；属性节点返回2；文本3；注释8；document9
element.nodeValue 设置或返回元素值。返回设置的value值，不是文本。文本应该用.childNodes[0].nodeValue。
element.innerHTML 设置或返回元素的内容。
element.title 设置或返回元素的 title 属性。
element.tagName 返回元素的标签名。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.ownerDocument 返回元素的根元素（文档对象）。

其他：
element.previousSibling 返回位于相同节点树层级的前一个元素。
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点。

element.style 设置或返回元素的 style 属性。

style 的CSS属性见CSS模块。

【事件类型和event】
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
注意：事件中调用的函数或代码块必须带双引号，如果是函数名，需要带（）的完整引用。
例如：<button οnclick=“document.getElementById(‘field2’).value=document.getElementById(‘field1’).value”> Copy Text</button>
<button οnclick=“godown()”>
事件可以调用多个函数，中间以,隔开。

event：
函数会默认给处理的function传入一个event参数，我们可以获取它。在一些浏览器中，window.event也是同样的对象。
属性如下：
.which 返回指定事件上哪个键盘键或鼠标按钮被按下。鼠标左键1右键3，键盘各键位有键盘码。
.pageX、.pageY 返回鼠标指针的位置，相对于文档的左边缘。
clientX/clientY 鼠标相对文档边缘的绝对位置。clientX+scrollLeft=pageX；
event.type 返回哪种事件类型被触发
event.which 返回指定事件上哪个键盘键或鼠标按钮被按下

【brower对象】
window对象属性
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本
status 设置窗口状态栏的文本
parent 属性返回当前窗口/框架的父窗口。

Location 地址栏对象，location=url 可以转到指定网页
reload(forceGet) 重新载入当前文档，类似于浏览器上的刷新页面按钮。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档=shift+F5
History 历史记录
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 可以是-1，1等数字，前进后退固定的步数。
frames 返回页面已命名的框架数组，可以用frames[framename/i]来访问frame。
window.frames[“frameName”];
window.frames.frameName
window.frames[index]
注意：framename不可以是ID！
每一个frame都等价于子页面的window，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。每个window对象都有一个 parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身

window对象方法：
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearInterval() clearTimeout()
scrollTo() 把内容滚动到指定的坐标。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
alert() 显示带有一段消息和一个确认按钮的警告框。
window.open(URL,name,specs,replace)
打开一个新的浏览器窗口或查找一个已命名的窗口。
如：window.open(“http://www.W3Cschool.com”,"_blank",“toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400”);
}
winname.close（）关闭已经打开的窗口。
winname.focus() 为元素设置焦点
winname.blur() 方法可把键盘焦点从顶层窗口移开
winname.opener() 返回对创建该窗口的 Window 对象的引用。

【其他事项】
1、select 对象有options 方法，返回一个option集合，效果和childnodes一样。
2、option对象有selected方法，返回布尔值，代表该选项有没有被选中。
3、select.multiple=“multiple”,下拉框将变成列表。
4、select.options.length=0;下拉框没有任何选项。
5、取得body节点直接用 document.body。
6、input.checkbox 是否选中由其属性 checked决定。
7、undefined和null在if语句中，都会转换为false，所以if(!a) 可以判断a未初始化。
8、使用open新打开的窗口，无法访问其history属性。
9、eval(string) 全局函数，如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

【js进阶】
this对象】
在函数体内部使用的this指向视情况而定：
1）函数作为对象方法时，正常指向对象本身
var xiaoming = {
name: ‘小明’,
birth: 1990,
age: function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};指向xiaoming
2）函数单独调用时，指向windows对象，包括var fn = xiaoming.age;fn();这样调用时，也指向Windows
3）方法内部定义了内部函数时，无论是将内部函数返回暴露出来，还是在方法内部正常调用，也都返回window，因为内部函数并不是作为方法调用了自己。如果非要获得当前对象，通常在外层先用变量存储this：var that = this; // 在方法内部一开始就捕获this
4）元素上使用οnclick="“时，”“的内容实际上被转化为代码块复制给了元素的click属性，它作为方法使用了,这是”"里面的内容是元素本身，但是如果在双引号中再定义函数时，就是3）内部函数的情况无法获得元素本身了。
5）jq元素绑定事件时，和4）类似， $click(function(){})，匿名函数被绑定成元素的click方法，其中可以运用this获得元素本身。 5）$ ().each(fn)，此时fn中的this指向each的每一个元素，但我们不经常使用，因为fn（i,v）中的v就是遍历的元素本身。

为了解决这一问题，可以在函数调用时指定this的绑定对象，这就必须使用.apply或.call函数，该函数的第一个参数即需要绑定的对象。
第二个参数稍有区别：
apply()把参数打包成Array再传入；
call()把参数按顺序传入。
对普通函数调用，我们通常把this绑定为null。

函数作用域与闭包】
js只有全局作用域和函数作用域两种，和python不同的是，下级作用域可以使用/修改上级函数的变量。
function getx () {
var x=1；
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - this.birth;
}
return getAgeFromBirth
内部函数可以使用和修改外部的x变量，甚至可以使用全局空间的变量，这个内部函数暴露给其他对象使用时，x变量因为仍旧被引用，所以x并不会被回收，这种情况包括返回闭包，和绑定内部函数作为事件回调函数给dom元素使用。

【【jqurey】】

【jq介绍与jq核心函数】
jq是一个js库文件，它提供了很多方便简介的js操作。
将jquery-1.11.0.js 放入开发环境之中，进行引入之后<script src=“js/jquery-1.11.0.js”> </script> ，即可开始开发编写代码。
也可以引入网络地址：<script src=“http://libs.baidu.com/jquery/1.10.2/jquery.min.js”>
jq事件多数都要等到文档加载完成才能运行。所以第一个需要学习的jq函数为：
$(document).ready(function(){ dosomething });
简写为：
$(f u n c t i o n () d o s o m e t h i n g); 效果等价于 w i n d o w . o n l o a d = f u n c t i o n d o s o m t h i n g; 核心函数： 1 、$ (callback) ; $(d o c u m e n t) . r e a d y () 的简写， c a l l b a c k 函数是文档加载后会发生的回调函数。 2 、$ (elements) 将一个或多个DOM元素转化为jQuery对象，若是多个对象，中间以,隔开。
3、 $(h t m l, p r o p s) 根据提供的原始 H T M L 标记字符串，动态创建由 j Q u e r y 对象包装的 D O M 元素。同时设置一系列的属性、事件等。返回值是一个 J Q 对象。$ ("<div> ", {
“class”: “test”,
text: “Click me!”,
click: function(){
$(this).toggleClass(“test”);
}
}).appendTo(“body”);
4、jQuery(html, [ownerDocument])根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。
$KaTeX parse error: Expected 'EOF', got '&' at position 3: ("&̲lt;div> <\dots$ ()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。

【选择器】
下面将对jq选择器和CSS选择器做一个对比：
1、基本选择器（标签、类、id、*、选择器分组）完全和CSS一致。
2、属性选择器、层级选择器完全和CSS一致。
3、子元素选择器完全和CSS一致。
4、输入元素选择器完全一致，并且新增一个selected，当前选中的option。
5、新增过滤选择器如下：
X:first 找到的X元素集合中，选取第一个。
X:last 找到的X元素集合中，选取倒数第一个。
X:even 找到的X集合中的奇数项（索引从0开始，所以第一个是偶数）
X.eq(number) 选择X集合中的第N个。N只能是正整数。
X：gt(index) 选择X集合中大于index的项目（index从0开始，并且不包含端点）
X：lt(index) 选择X集合中小于index的项目（index从0开始，并且不包含端点）
:header 匹配H1/H2之类的标题元素
:animated 匹配正在执行动画效果的元素。

注意：过滤选择器可以复合使用，但过滤逻辑是先执行第一层过滤，再重新编码索引后，再次执行过滤。:lt(5):gt(2)可以选择3、4号元素，但:gt(2):lt(5)选择的是所有3、4、5、6、7号元素。
得到结论：ltgt 选取n到m中间的元素，共M-N+1个；gtlt选取从n+1开始，到n+m结束，共M个元素。

6、新增表单选择器如下：
:input 所有输入项目，匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框，及input text元素。
:password/radio/checkbox/submit/image/reset/file/hidden 匹配type对应的input元素。
:botton 匹配input和button类型的两种按钮。

7、新增内容选择器
:contains(text) 匹配包含字符串类型text文本的元素，可以是直接包含在元素中的文本，或者被包含于子元素中。:contains(‘Hello’)
通常需要跟父类型，否则会选中整个body。例子$(“p,div,li:contains(is)”)
:empty 选取空的元素。空元素指的是不包含子元素或文本的元素。
:parent empty的相反，有子元素或有文本的元素。<span> </span> 为空元素，<span> </span> 有类容。
:has(selector) 选取所有包含一个或多个指定元素在其内的元素(即子元素中符合指定表达式的)。指定元素只能是子元素，不能是后代元素。
:hidden 选择器选取隐藏的元素。隐藏包括display:none/type=“hidden”/width heigt=0三种元素。

追加内容：
在已经使用选择器确定元素集合的情况下，如果还需要追加元素（jq、js元素，html标签代码），可以使用add()
$(“p”).add("<br> <span> A new span element.</span> ").appendTo(“div”);表示将所有p标签后面增加一个回车和一个span字符后放入div中。
注意：选择器无论有没有找到，都会返回一个jqobj对象，所以不能用！判断是否存在，只能用.length==0判断是否找到相应对象。

【JQ事件】
鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus[in] scroll
mouseleave blur/focusout unload

常用事件：
1、 $(s e l e c t o r) . m o u s e e n t e r (f u n c t i o n) 、$ (selector).mouseleave(function)
鼠标进入元素、离开元素触发事件，并且只触发一次。
3、.mousemove(function(event)）
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。每移动一个像素，都会触发一次该事件。该事件的处理函数可传入一个event：
$(document).mousemove(function(event){
$(“span”).text(event.pageX + ", " + event.pageY);
});
3、.mouseover(function()、.mouseout(function())
当鼠标进入、离开元素及其子元素时都会触发，所以会触发多次。

4、hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut );
} hover等于enter+leave

5、mousedown、mouseup、click 三种事件的区别。
mousedown 在元素上按下鼠标左右键瞬间就会发生，但一直按下不会重复发生，在其他地方按下，移到该元素上也不会发生。
mouseup 在元素上松开左右键瞬间发生，在其他地方按下，移动到该元素上仍会发生，在该元素按下，移开不会发生。
click 只有在该元素按下，并且仍旧在该元素松开，才会发生。
如果在一个元素上按下左键并松开，三者的顺序为down、up、click。

6、 focus() 和focusin；blur() 和focusinout
都是得到焦点和失去焦点的时间，但后者是子元素失去焦点依然可触发，所以可以在目标元素的父级元素添加焦点事件。

7、change 元素的值改变时发生。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

8、select 当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。

9、键盘事件
keydown 按下任意按键瞬间发生，一直按下会连续触发该事件，中文输入法下仍会触发事件，但得不到有效的。
使用event.which/keycode属性可以获得键盘代码,大小写的A产生的代码是同一个。
keypress 按下按键，并且产生一个ascci字符时发生，也就是说，不产生字符的按键对keypress是无效的，中文输入法下也不触发press事件。
使用event.which获得的是ascii的数字，大小写的A产生的代码是不一样的。
keyup 键盘松开时产生。
三者发生的顺序是 down-press（若有）-up

10、$(window).resize（）浏览器窗口调整事件。

11、绑定多事件：
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
$(s e l e c t o r) . o n (e v e n t, c h i l d S e l e c t o r, d a t a, f u n c t i o n, m a p) e v e n t ：事件名称字符串，中间以空格分开，多事件对应一函数时使用。如：$ (“p”).on(“mouseover mouseout”,function(){
childSelector：可选参数，事件添加到绑定元素的某个子元素时使用的过滤器。如： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").on("clic\dots$ (“p”).on(“click”, {msg: “You just clicked me!”}, handlerName)
function handlerName(event)
{
alert(event.data.msg);
}
function：可选。规定当事件发生时运行的函数。
map：事件和函数的映射map形式。多对多时使用 ({event:function, event:function, …}

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
$(selector).off(event,selector,function(eventObj),map)
$(“p”).off(“click”);

one() 方法为被选元素添加一个或多个只执行一次的事件处理程序。
$(selector).one(event,data,function)
$(“p”).one(“click”,function(){
$(this).animate({fontSize:"+=6px"});
});

12、代码触发事件。
所有事件都可以手动触发，如点击.click() 选择.select() 改变 .change()
可以触发绑定到元素上的所有事件：trigger（）;该函数也可触发指定事件.trigger(“select”);
triggerHandler() 和上述函数一样，但它不触发元素的默认事件，如表单提交。触发事件时首要选择该函数。

13、事件切换
toggle(fn, fn2, [fn3, fn4, …])每次触发后依次调用函数。

【动画效果】
$(selector).hide(speed,callback);
$(s e l e c t o r) . s h o w (s p e e d, c a l l b a c k); 可选的 s p e e d 参数规定隐藏 / 显示的速度，可以取以下值： " s l o w " 、 " f a s t " 或毫秒。可选的 c a l l b a c k 参数是隐藏或显示完成后所执行的函数名称。可选的 c a l l b a c k 参数，具有以下三点说明： 1 、$ (selector)选中的元素的个数为n个，则callback函数会执行n次
2、callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行
3、callback既可以是函数名，也可以是匿名函数
可以使用该函数来执行切换效果：
$(selector).toggle(speed,easing,callback)

淡入淡出：
fadeIn() fadeOut() fadeToggle()
fadeTo(speed,opacity,callback);方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

滑动：
slideDown() slideUp() slideToggle()

自定义动画：
$(selector).animate({params},speed,callback);
$(“div”).animate({
left:‘250px’,
opacity:‘0.5’,
height:’+=150px’,
width:’+=150px’
});
可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：
$(“div”).animate({
height:‘toggle’
})

停止动画：
stop() 方法用于在动画或效果完成前对它们进行停止。

【操作DOM】

文本处理】：
text() - 设置或返回所选元素的文本内容,（会删除 HTML 标记）
即设置或读取所有成对标签<> </> 中间的文本类容，如果标签为单独标签，则无法设置或读取。
html() - 设置或返回所选元素的内容（包括 HTML 标记）即设置或读取所有成对标签<> </> 中间的所有HTML标记。单独标签无法读取或设置。
val() - 设置或返回表单字段的值。如果元素包含value属性，可以设置或读取其value值，一般用来操作表单元素。
text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。同时回调函数可以设置返回值，该返回值就是要设置的新值。
$("#test1").text(function(i,origText){
return “Old text: " + origText + " New text: Hello world!
(index: " + i + “)”;
});
jQuery attr() 方法也用于设置/改变属性值。
.attr(“href”) 获取href属性，没有该属性返回undefined，注意，设置class属性时应该用clasname
.attr(“href”,”//www.w3cschool.cn/jquery") 单对键值对形式设置
$("#w3s").attr({ 属性集形式设置
“href” : “//www.w3cschool.cn/jquery”,
“title” : “jQuery 教程”
});
在disable、selected、readonly等只有true/false的属性，尽量使用prop();
该方法也提供带i/oldvalue两个参数的回调函数，提供了单独操作某个元素的可能。

包裹元素:】
wrap() 方法使用指定的 HTML 元素来包裹每个被选元素。参数最好是成对出现的HTML标签，可以设置好属性。
$(“p”).wrap("<div> </div> “);
unwrap() 方法移除被选元素的父元素。这能快速取消 .wrap()方法的效果。
$(“p”).unwrap()
wrapAll() 方法使用指定的 HTML 元素来包裹所有被选元素。新元素的位置是第一个选择器匹配到的位置
$(selector).wrapAll(wrappingElement)
wrapInner(html将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$(“p”).wrapInner(”<b> </b> ");

添加/复制元素】：
append() - 在被选元素内部的结尾插入指定内容l;appendto() 把自身添加到另一个容器的末尾
prepend() - 在被选元素内部的开头插入指定内容；prependto() 把自身添加到另一个容器的开头
after() - 在被选元素之后插入内容；insertafter() 把自身插入到另一个元素后面
before() - 在被选元素之前插入内容；insertbefore() 把自身插入到另一个元素前面
append/prepend 是在选择元素内部嵌入，而after/before 是在元素外面追加。
clone() 克隆匹配的DOM元素并且选中这些克隆的副本。如：$(“b”).clone().prependTo(“p”);
clone(true)会复制元素的所有绑定事件。
添加元素的内容可以是纯文本，或者html标签。方法可以添加多个标签或dom对象，中间以,隔开。

删除元素：】
remove() 方法删除被选元素及其子元素。 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").remove()\dots$ (“p”).remove(".italic");
empty() 方法删除被选元素的子元素（包含子元素的后代元素）。 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").empty();\dots$ ("#div1").addClass(“important blue”);
removeClass() 例如： $(" h 1, h 2, p ") . r e m o v e C l a s s (" b l u e "); t o g g l e C l a s s () 方法。该方法对被选元素进行添加 / 删除类的切换操作：$ (“h1,h2,p”).toggleClass(“blue”);
设置CSS属性：
获取CSS指定属性的值：css(“propertyname”);
以单对键值对形式设置：css(“propertyname”,“value”);
以属性集形式设置：css({“propertyname”:“value”,“propertyname”:“value”,…});

设置元素的尺寸：】
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
只有width、height是可设置的，元素的内边距外边距边框需要使用CSS进行设置。

【dom树遍历】
向上遍历：
parent() 方法返回被选元素的直接父元素。如： $KaTeX parse error: Expected 'EOF', got '&' at position 61: \dots它一路向上直到文档的根元素 (&̲lt;html> )。 \dots$ (“span”).parents(“ul”);表示返回所有 <span> 元素的所有<ul> 祖先元素。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 $(" s p a n ") . p a r e n t s U n t i l (" d i v "); 表示从 s p a n 向上，一直到 " d i v " 之前的所有元素。 c l o s e s t () 方法返回被选元素向上遍历的第一个匹配祖先元素。$ (“span”).closest(“ul”)
向下遍历：
children() 方法返回被选元素的所有直接子元素，所以返回值是一个集合或数组。可作为子元素选择器
可以使用可选参数来过滤对子元素的搜索。 $KaTeX parse error: Expected 'EOF', got '&' at position 41: \dots元素中类名为 "1" 的所有 &̲lt;p> 元素 co\dots$ (“div”).find(“span”);等价于 $(" d i v s p a n ") 可作为后代选择器同级遍历： s i b l i n g s () 方法返回被选元素的所有同胞元素。可使用过滤：$ (“h2”).siblings(“p”); 即jq.parent.children
next() 方法返回被选元素的下一个同胞元素。可作为兄弟选择器使用
nextAll() 方法返回被选元素的所有跟随的同胞元素。即其所有弟弟元素。可作为弟弟选择器使用
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。如： $KaTeX parse error: Expected 'EOF', got '&' at position 43: \dotsv(), prevAll() &̲ prevUntil() 方法\dots$ (“p”).filter(".intro");
not() 方法返回不匹配标准的所有元素。如： $(“p”).not(".intro");
is() 集合中如果没有一个元素匹配表达式，返回false，反之返回true
hasClass() 方法检查被选元素有没有一个元素是该类的。返回true/false
has（）子元素中是否包含指定元素。类似过滤的has
map() .map(callback(index,domElement)) 能够通过函数获取元素某个属性的JQ数组（使用get可返回JS数组）

过滤方法和过滤选择器十分类似，在操作jq对象时，可以完全被代替，但如果需要对一个js的dom集合进行过滤，那就十分方便了。

【其他方法】
$(selector).each(function(index,element))
对元素集合/数组进行遍历
$(selector).get(index) 方法获取由选择器指定的 DOM 元素。index从0开始
$(selector).index()返回获得第一个匹配元素相对于其同级元素的 index 位置，无参情况，即它在父容器的索引。如果没有该元素，返回-1
$(" . h o t ") . i n d e x ($ ("#favorite")) 有参数，返回id=favorite的元素，在类=hot集合中的位置，没有返回-1
$(selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素。

【js和jq的事件处理比较】
js 事件发生如点击事件<h1 οnclick=“this.innerHTML=‘谢谢!’”> 请点击该文本</h1>
onclick是标签的属性，程序允许我们给这个属性进行赋值，它代表着事件发生后执行的代码块，所谓代码块，当然可以是一个函数。这个函数的执行是受我们控制的，我们可以给它进行传参。
click(data,callback) 是jq的一个函数，当发生点击事件时，系统默认调用这个callback函数，它内部是这样执行的：
function click(data,callback){
var event=window.event;event.prototype.data=data;
callback(event);
}
当我们定义click(function(){})时，实际上系统是指定了callback=funcion(){};callback(event);传递参数这个步骤是系统制定的，所以我们不能控制传参，传参只能传递给click的data参数，再由系统默认传递的event进行调用。

【ajax】
ajax基础方法（最底层方法）：
jQuery.ajax([settings])
options 类型：Object，AJAX 请求。
async 类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
cache 类型：Boolean 默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
dataType 类型：String 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
以下为可选的值：“xml”、“script”、“html”、“json”、“jsonp”、“text”
contentType 类型：String 默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
context 类型：Object 这个对象用于设置 Ajax 相关回调函数的上下文。如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素
data 类型：String 发送到服务器的数据。
ifModified 类型：Boolean 仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。
timeout 类型：Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type 类型：String 默认值: “GET”)。请求方式 (“POST” 或 “GET”)，
url 类型：String 默认值: 当前页地址。发送请求的地址。
回调函数：
beforeSend 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
error 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及 “dataType” 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

高级方法（封装后的方法）：
【load】
dom对象.load(url,data,function(response,status,xhr))
load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到调用它的指定dom元素中（即在返回数据类型是html的情况下，替换指定元素的html内容）。
url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr) 可选。规定当请求完成时运行的函数。
response - 包含来自请求的结果数据
status - 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr - 包含 XMLHttpRequest 对象
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 “success” 或 “notmodified” 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。
如果提供的数据是对象，则使用 POST 方法；否则使用 GET 方法。

【get】
$(selector).get(url,data,success(response,status,xhr),dataType)
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(response,status,xhr) 可选。规定当请求成功时运行的函数。
response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象
dataType 规定预计的服务器响应的数据类型。默认，jQuery 将智能判断。
可能的类型：
“xml”
“html”
“text”
“script”
“json”
“jsonp”

【post】
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数解释：见get。

【json】
JSON.parse(jsonstr); //可以将json字符串转换成json对象

JSON.stringify(jsonobj); //可以将json对象转换成json对符串
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
$.getJSON(url, [data], [callback])

【【bootstrap】】

非常受欢迎的css和jq框架，封装了很多方便简介的样式。
使用：
网络引入：

<link rel=“stylesheet” href=“http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css”>

<script src=“http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”> </script>

<script src=“http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js”> </script>

本地引入：
首先导入下载好的文件系统，包含css/fonts/js
<link rel=“stylesheet” href=“css/bootstrap.min.css” />
<script type=“text/javascript” src=“js/jquery-1.11.0.js” > </script>
<script type=“text/javascript” src=“js/bootstrap.min.js” > </script>

【栅格系统布局】
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
布局使用：
全局容器：class="container"两边空出部分空间 "container-fluid"占据屏幕百分百宽度
行容器：row 元素在一行内的内容应该放在一个class="row"的容器中。行容器中的列容器将默认另起一行，相当于word中的硬回车。
列容器: col-xs-n 表示手机屏幕 col-sm-平板屏幕 col-md-pc屏幕 n表示该容器共占几格（一行默认最大是12格，大于12后的列容器将另起一行，相当于word中的软回车）。
列容器效果：
1、响应式显隐
visible-type-block/inline/inline-block 如：.visible-xs-block 表示xs屏幕下块级显示。
.hidden-type 如.hidden-xs 表示XS屏幕下隐藏。
2、强制列重置
.clearfix 配合响应式显隐使用。如<div class=“clearfix visible-xs”> </div> 表示在XS屏幕下强制另起一列
3、列偏移
.col-type-offset-* 表示偏移几个格子进行显示，用来达到只使用一个DIV列容器的情况下实现空出div容器的效果。
4、列嵌套
列可以多层嵌套。
5、位置变化
col-type-push-n 可以实现容器向右移动n个位置进行显示
col-type-pull-n 向左移动n个位置进行显示

【文本显示】
<small> 本行内容是在标签内</small> <br>
<strong> 本行内容是在标签内</strong> <br>
<em> 本行内容是在标签内，并呈现为斜体</em> <br>
<p class=“text-left”> 向左对齐文本</p>
<p class=“text-center”> 居中对齐文本</p>
<p class=“text-right”> 向右对齐文本</p>
<p class=“text-muted”> 本行内容是减弱的</p>
<p class=“text-primary”> 本行内容带有一个 primary class</p>
<p class=“text-success”> 本行内容带有一个 success class</p>
<p class=“text-info”> 本行内容带有一个 info class</p>
<p class=“text-warning”> 本行内容带有一个 warning class</p>
<p class=“text-danger”> 本行内容带有一个 danger class</p>
<abbr title=“World Wide Web”> WWW</abbr> <br> 表示缩写，鼠标悬停会显示完整title

【表格显示】
表格容器：<div class=“table-responsive”>
.table 基本样式，少量padding和水平分隔线
.table-striped 增加隔行显示的斑马条纹样式，不被ie8支持。
.table-bordered 带边框
.table-hover 可以对鼠标悬停状态作出响应
.table-condensed 表格更加紧凑

行、列设置颜色：
.active 鼠标悬停在行或单元格上时所设置的颜色淡灰色
.success 标识成功或积极的动作绿色
.info 标识普通的提示信息或动作蓝色
.warning 标识警告或需要用户注意黄色
.danger 标识危险或潜在的带来负面影响的动作红色

【表单布局】
0）表单需要添加 class =“form-control”，表单元素必须有label，表单、label、帮助文字，图标等标识一个表单元素的元素必须放在一个class .form-group 的 <div> 中，这样方便控制。表单元素指<input> 、<textarea> 和 <select> 等。不包括CheckBox，checkbox可以放到一个class=CheckBox的div中。

默认表单布局
<form>

<div class=“form-group”>

<label class=“control-label”> </label>

<input class=“form-control”>

</div>

</form>
每一个formgroup会垂直排列，文字靠左。

//control-label的默认对齐方式是右排列,普通label是左排列,可以自定义修改.

行内表单
<form class=“form-inline” role=“form”>
<div class=“form-group”>
<label class=“sr-only” for=“name”> 名称</label>
<input type=“text” class=“form-control” id=“name” placeholder=“请输入名称”>
</div>
<div class=“form-group”>
<label class=“sr-only” for=“inputfile”> 文件输入</label>
<input type=“file” id=“inputfile”>
</div>
</form>
该表单所有元素尽量在一行显示。默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。使用 class .sr-only，您可以隐藏内联表单的标签。
水平表单
<form class=“form-horizontal” role=“form”>
<div class=“form-group”>
<label for=“firstname” class=“col-sm-2 control-label”> 名字</label>
<div class=“col-sm-10”>
<input type=“text” class=“form-control” id=“firstname” placeholder=“请输入名字”>
</div>
</div>
<div class=“form-group”>
<label for=“lastname” class=“col-sm-2 control-label”> 姓</label>
<div class=“col-sm-10”>
<input type=“text” class=“form-control” id=“lastname” placeholder=“请输入姓”>
</div>
该表单每一个group默认占父容器的一行，而内部的label、input等可以根据栅格进行布局。

默认的栅格系统：container-> row-> col-*
默认的栅格系统：form-horizontal-> form-group-> col-*
container嵌套form-horizontal 时,可以作为col-type-12 嵌套进<div class=“row”> 中,作为列单元格使用.

注意：
1、表单一定要添加label标签，如果不希望标签显示，可以设置.sr-only 类将其隐藏，或者将控件写在laber标签内部也可以视线效果。
2、不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

【表单控件】
1 复选框checkbox和单选择按钮radio 垂直排列
　　1.1）每一组checkbox连同label标签放置在一个名为“.checkbox”的容器内
　　1.2）每一组radio连同label标签放置在一个名为“.radio”的容器内
2) 不管是checkbox还是radio都使用label包起来了,
主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。
//bootstrap指定：单选和双选按钮要放到label标签中

,再借用外层容器来使标签组对齐.
<div class=“checkbox”>
<label >
<input type=“checkbox” id=“inlineCheckbox3” value=“option1” name=‘c’> 3
</label>
</div>

2 复选框单选框水平排列
　　1)、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
　　2)、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
<label class=“control-label radio-inline”>
<input type=“radio” name=“inlineRadioOptions” id=“inlineRadio1” value=“option1” name=‘r’> 1
</label>

3 按钮
btn 将控件显示出按钮的形式,灰色
btn-primary 蓝色
btn-info 浅蓝色
btn-success 绿色
btn-warning 黄色
btn-danger 红色
btn-inverse 深灰色
btn-link 按钮显示成超链接
btn-lg 大按钮
btn-sm 小按钮
btn-xs 超小按钮
btn-block 占父容器100%的按钮
active 已激活的按钮
按钮组:<div class=“btn-group”> 在该容器内的按钮将没有margin间距,并排排列在一起.
按钮组可以设置大小:btn-group-lg/sm…
可以设置垂直方向的按钮组:<div class=“btn-group-vertical”>
按钮组可以自适应父容器的大小:btn-group-justified

按钮组下拉菜单:
这实际上是一个按钮组的嵌套，
<div class=“btn-group”>
<button type=“button” class=“btn btn-primary”> Apple</button>
<button type=“button” class=“btn btn-primary”> Samsung</button>

<div class=“btn-group”> 第二嵌套
<button type=“button” class=“btn btn-primary dropdown-toggle” data-toggle=“dropdown”> 下拉按钮
Sony <span class=“caret”> </span>
</button>
下拉列表
<ul class=“dropdown-menu” role=“menu”>
<li> <a href="#"> Tablet</a> </li>
<li> <a href="#"> Smartphone</a> </li>
</ul>
</div>
</div>

//不嵌套其实也可以，直接把按钮写在第一个按钮组中，但此时下拉框的位置显示不是很好，会移动到第一个按钮的下方。

4 控件大小和禁用
　　1、input-sm:让控件比正常大小更小
　　2、input-lg:让控件比正常大小更大
禁用直接添加 disabled属性即可.如果要禁用一些控件,需要使用<fieldset> 标签
<fieldset> 内的所有控件都会被禁用.

5 表单验证
想要使用bootstrap实现表单验证需要:
1 labal有control-lable类;控件有form-control类.
2 父元素(容器)添加适当的 class（.has-warning、 .has-error 或 .has-success）
3 如果想显示图标,需要
1)在控件后(不可以隔容器)添加一个span
2)在父容器添加.has-feedback
3)span的类名class=“glyphicon glyphicon-remove form-control-feedback”>
glyphicon-remove错误 glyphicon-warning-sign警告 glyphicon-ok
4 如果想显示提示信息,可以在input后再增加一个 <span class=“help-block”> span的文本节点写提示信息即可.

【图片】
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能，添加一些内边距（padding）和一个灰色的边框。
.img-responsive 图片响应式 (将很好地扩展到父元素)

【辅助类】
文字：text-type（primary深蓝 info浅蓝 success绿色 warning黄色 danger红色 muted浅灰色）
背景：bg-type（五种，无muted）
其他：
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.caret 显示下拉式功能

【图标glyphicons】
<span class=“glyphicon glyphicon-search”> </span>
glyphicons-* 是图标名称，将这个span标签放到要显示图标的元素内部即可。如：
<button type=“button” class=“btn btn-default btn-xs”>
<span class=“glyphicon glyphicon-user”> </span> User
</button>
<label class=“control-label” for=“inputSuccess1”> 成功状态
<span class=“glyphicon glyphicon-user”> </span> User
</label>
注意：span必须是空元素，可以在它后面增加要显示的文字
通过设置css的字体样式，可以更改图标的大小及颜色：
style=“font-size: 60px”
style="color: rgb(212, 106, 64);
style=“text-shadow: black 5px 3px 3px;”
具体图标列表：https://www.runoob.com/bootstrap/bootstrap-glyphicons.html

【下拉菜单】

<!–下拉菜单的主容器，还有一个dropup 可以指定菜单向上弹出，若在按钮组中，也可以是btn-group–>
<div class=“dropdown”>
<button type=“button” class=“btn dropdown-toggle” id=“dropdownMenu1” data-toggle=“dropdown”> 主题
<span class=“caret”> </span>
</button>
<!–下拉菜单显示的按钮，class：dropdown-toggle下拉条类型必须有一个data-toggle=dropdown的属性 -->
<!–下拉菜单显示列表根据aria-labelledby属性判定绑定的是哪一个下拉按钮，在class中增加pull-left/right可以调整菜单显示位置–>
<ul class=“dropdown-menu pull-right” role=“menu” aria-labelledby=“dropdownMenu1”>
<li role=“presentation” class=“dropdown-header”> 编程语言</li>
<li role=“presentation”>
<a role=“menuitem” tabindex=“0” href="#"> Java</a>
</li>
<!–每一个列表项设置一个a标签，用来显示具体的子项目–>
<li role=“presentation”>
<a role=“menuitem” tabindex=“0” href="#"> 数据挖掘</a>
</li>
<!–tabindex 可以设置tab按键后选择的顺序 -->
<li role=“presentation”>
<a role=“menuitem” tabindex=“0” href="#"> 数据通信/网络</a>
</li>
<li role=“presentation” class=“divider”> </li>
<li role=“presentation”>
<a role=“menuitem” tabindex=“0” href="#"> mysql</a>
</li>

	&lt;!--
    	列表项的几种类：
    	1、dropdown-header 该项作为标题，不可点击
    	2、divider 该项作为分隔线
    	4、disabled 该项禁用
    	--&gt; 
&lt;/ul&gt;

</div>

【输入框组】
可以给输入框前后添加其他内容：
1、使用一个input-group的外层容器。
2、把一个input-group-addon的span/div和你要放置的一个或多个输入框放在其中。
3、要添加的内容是文本或单选框复选框时，span/div的类必须是input-group-addon，如果是按钮，需要换成input-group-btn。
4、要添加的一个或多个输入框必须是“form-contol”类的。
<div class=“input-group”>
<span class=“input-group-addon”> @</span>
<input type=“text” class=“form-control” placeholder=“twitterhandle”>
</div>

输入框组和按钮组一样有大小：input-group-lg/sm
带有下拉菜单的按钮：
<div class=“input-group”>
<input type=“text” class=“form-control”>
<div class=“input-group-btn”>
<button type=“button” class=“btn btn-default
dropdown-toggle” data-toggle=“dropdown”> 下拉菜单
<span class=“caret”> </span>
</button>
<ul class=“dropdown-menu pull-right”>
<li>
<a href="#"> 功能</a>
</li>
<li>
<a href="#"> 另一个功能</a>
</li>
<li>
<a href="#"> 其他</a>
</li>
<li class=“divider”> </li>
<li>
<a href="#"> 分离的链接</a>
</li>
</ul>
</div> 
</div> 
解释：
1、第一层按钮组的位置换成输入框
2、第二层嵌套换成input-group-btn，其他一样。

【标签页】
表格式导航栏（标签页）是一个特殊的无序列表，ul的类必须是nav（navigation 导航的缩写）、nav-pills，列表项都是超链接即可。
1、卡片式
<ul class=“nav nav-tabs”>
<li class=“active”> <a href="#"> Home</a> </li>
<li> <a href="#"> SVN</a> </li>
<li> <a href="#"> iOS</a> </li>
<li> <a href="#"> VB.Net</a> </li>
<li> <a href="#"> Java</a> </li>
<li> <a href="#"> PHP</a> </li>
</ul>
2、基本胶囊式
只需要使用 class .nav-pills 代替 .nav-tabs
<ul class=“nav nav-pills”>
<li class=“active”> <a href="#"> Home</a> </li>
<li> <a href="#"> SVN</a> </li>
<li> <a href="#"> iOS</a> </li>
<li> <a href="#"> VB.Net</a> </li>
<li> <a href="#"> Java</a> </li>
<li> <a href="#"> PHP</a> </li>
</ul>
4、垂直胶囊式
nav nav-pills nav-stacked
5、整行对齐式
nav nav-pills nav-justified
对于导航栏中的每个li列表项，设置 .disabled 将禁用该项。
6、下拉菜单
1）整体的外层容器还是一个nav nav-tabs/pills的无序列表，列表项还是超链接。
2）带有下来菜单的那一项li选项需要包含以下元素：
2.1）下拉按钮的a标签，类名为dropdown-toggle data-toggle=dropdown，其中包含一个caret的span标签。
2.2）一个表示下来菜单的无序列表，类名为dropdown-menu，li列表项为下来菜单具体项目，同样可以有divider分割线和header标题。
2.3）菜单和按钮都必须包含在class=dropdown的li标签中。
添加带有 .dropdown-menu class 的无序列表。
<p> 带有下拉菜单的标签</p>
<ul class=“nav nav-tabs”>
<li class=“active”> <a href="#"> Home</a> </li>
<li> <a href="#"> SVN</a> </li>
<li> <a href="#"> iOS</a> </li>
<li> <a href="#"> VB.Net</a> </li>
<li class=“dropdown”>
<a class=“dropdown-toggle” data-toggle=“dropdown” href="#">
Java <span class=“caret”> </span>
</a>
<ul class=“dropdown-menu”>
<li> <a href="#"> Swing</a> </li>
<li> <a href="#"> jMeter</a> </li>
<li> <a href="#"> EJB</a> </li>
<li class=“divider”> </li>
<li> <a href="#"> 分离的链接</a> </li>
</ul>
</li>
<li> <a href="#"> PHP</a> </li>
</ul>
7、胶囊式下拉菜单
需要把 .nav-tabs class 改为 .nav-pills即可。

8、按钮组/输入框组/导航栏某个标签下拉实现详解

1、下拉功能的最外延是一个外层容器，可以是div、span、li等，当然最常用的还是div。
2、外层容器同时也可以是其他容器组的子容器，比如可以是按钮组的嵌套组btn-group，可以是输入框组的input-group-btn，可以是普通的导航栏子选项li。但要确定将这个外层容器作为下拉容器，需要指定class为dropdown/dropup,默认不写是dropdown。
3、外层容器中只能有一个控件和一个列表存在，控件一般是按钮或超链接，它作为下拉按钮存在，类名必须是dropdown-toggle，必须包含属性data-toggle=“dropdown”。同时必须有一个span子元素，<span class=“caret”> </span> 。
//如果想要显示图标，还可以放一个glyphicons的span。
4、无序列表<ul class="dropdown-menu > 中存放具体的菜单，默认位置在按钮正下方。
5、列表项li的几种类：
1、dropdown-header 该项作为标题，不可点击
2、divider 该项作为分隔线
4、disabled 该项禁用

9、导航栏中的输入表单
<nav class=“navbar navbar-default” role=“navigation”>
<div class=“container-fluid”>
<div class=“navbar-header”>
<a class=“navbar-brand” href="#"> 菜鸟教程</a>
</div>
<div>
<form class=“navbar-form navbar-left” role=“search”>
<div class=“form-group”>
<input type=“text” class=“form-control” placeholder=“Search”>
</div>
<button type=“submit” class=“btn btn-default”> 提交按钮</button>
</form>
<button type=“button” class=“btn btn-default navbar-btn”>
导航栏按钮
</button>
</div>
</div>
</nav> >

【分页】
分页和导航栏一样，也只是一种特殊的无序列表:

<ul class=“pagination”>
<li> <a href="#"> «</a> </li>
<li> <a href="#"> 1</a> </li>
<li> <a href="#"> 2</a> </li>
<li> <a href="#"> 3</a> </li>
<li> <a href="#"> 4</a> </li>
<li> <a href="#"> 5</a> </li>
<li> <a href="#"> »</a> </li>
</ul>
pagination-lg pagination-sm 表示显示的大小

同时可以创建翻页按钮，它也是一种无序列表
<ul class=“pager”>
<li class=“previous”> <a href="#"> 上一页</a> </li>
<li class=“next”> <a href="#"> 下一页</a> </li>
</ul>

//style=“margin: 0px auto;display: table;” 居中显示。

【徽章、超大屏幕、缩略图】
和图标一样，在元素内部放置一个span，可以显示一些数量。
<span class=“badge pull-right”> 3</span>

<ul class=“nav nav-pills”>
<li class=“active”>
<a href="#"> 首页
<span class=“badge”> 42</span>
</a>
</li>
<li>
<a href="#"> 简介</a>
</li>
<li>
<a href="#"> 消息
<span class=“badge”> 3</span>
</a>
</li>
</ul>
以下容器中可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。
<div class=“jumbotron”>
缩略图：四个像素的内边距（padding）和一个灰色的边框。当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<a href="#" class=“thumbnail”>
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt=“通用的占位符缩略图”>
</a>
第二种缩略图：
<div class=“thumbnail”>
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt=“通用的占位符缩略图”>
<div class=“caption”>
<h3> 缩略图标签</h3>
<p> 一些示例文本。一些示例文本。</p>
<p>
<a href="#" class=“btn btn-primary” role=“button”>
按钮
</a>
<a href="#" class=“btn btn-default” role=“button”>
按钮
</a>
</p>
</div>
</div>

【模态框】
<!–第一部分，模态框测试–>
<!–自定义模态框的呼出按钮，data-toggle 表示数据切换类型为模态框，数据目标data-target，也就是呼出的模态框ID是mymodal
还可以设置以下属性：
data-backdrop 有三个功能，设置是路径str时设定背景，true有灰色背景有效、false无背景无效、static有灰色背景，外键无无效。
data-keyboard 布尔值（默认1），当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
data-show 布尔值（默认1）当初始化时显示模态框。
–>
<button class=“btn btn-primary btn-lg” id=“b1” data-toggle=“modal” data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal）动画类型为fade，不写mode默认是hide
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。
必须加上tabindex=-1，否则无法使用keyboard功能–>
<div class=“modal fade” id=“myModal” tabindex="-1">
<!–模态框的窗口和内容容器，没有dialog模态框无法设置窗体的大小，会默认占第一行的一整行，没有content模态框会是完全透明的–>
<div class=“modal-dialog modal-content”>
<!–模态框的标题容器，显示窗体标题–>
<div class=“modal-header”>
<!–模态框的右上角关闭按钮，class=“close” 显示该按钮的外观，data-dismiss="modal"表示功能为关闭模态框–>
<button type=“button” class=“close” data-dismiss=“modal”> ×</button>
<h4 class=“modal-title” id=“myModalLabel”> 模态框（Modal）标题</h4>
</div>
<!–模态框的体部分，可以添加文字、输入框、下拉按钮等–>
<div class=“modal-body”>
在这里添加一些文本
</div>
<!–模态框的页脚部分，一般放置确定或取消按钮–>
<div class=“modal-footer”>
<button type=“button” class=“btn btn-default” data-dismiss=“modal”> 关闭</button>
<button type=“button” class=“btn btn-primary”> 提交更改</button>
</div>

&lt;/div&gt; &lt;!-- /.modal --&gt;

</div>

当然，data-target触发器完全可以用jq代替，jq方法如下：
$("#b1").click(function(){
$("#myModal").modal({
backdrop:false,
kkeyboard:true
});

})

同时，bs还提供了四个和模态框有关的自定义事件，我们可以用on进行绑定：
show.bs.modal 开始前触发该事件，点击后立即触发，对话框未弹出前
shown.bs.modal 开始后触发该事件，点击后等对话框弹出再触发该事件
hide.bs.modal 隐藏时触发该事件，即点击关闭按钮后，对话框还未消失时触发
hidden.bs.moda 对话框消失后触发。

【标签页内容更换实现】
<ul class=“nav nav-tabs”>
<li class=“active”> <a href="#tabpane" data-toggle=“tab”> Home</a> </li>
<li> <a href="#tabpane1" data-toggle=“tab”> SVN</a> </li>
<li> <a href="#tabpane2" data-toggle=“tab”> iOS</a> </li>
<li> <a href="#tabpane3" data-toggle=“tab”> VB.Net</a> </li>
<li> <a href="#tabpane4" data-toggle=“tab”> Java</a> </li>
<li> <a href="#tabpane5" data-toggle=“tab”> PHP</a> </li>
</ul>
<div class=“tab-content”>
<div class="tab-pane fade " id=“tabpane1”>
<p> 这是第1个内容</p>
</div>
<div class="tab-pane fade " id=“tabpane2”>
<p> 这是第2个内容</p>
</div>
<div class="tab-pane fade " id=“tabpane3”>
<p> 你以为这是第三个类容？</p>
</div>
<div class="tab-pane fade " id=“tabpane4”>
<p> 错了，这也不是第四个内容</p>
</div>
<div class="tab-pane fade " id=“tabpane5”>
<p> 你以为这不是第五个内容，这是第5个内容！</p>
</div>
<div class=“tab-pane fade active in” id=“tabpane”>
<p> 默认显示界面</p>
</div>
</div>

1、html样式方面，列表项的a标签需要添加data-toggle=“tab”，这代表标签可切换，切换的目标会自动获得active样式。
2、内容容器是通过class="tab-content"实现的，所有的具体类容列表都放在这个容器中。
3、具体的标签页内容放在class="tab-pane fade “的div 中，其中fade表示切换方式为淡入淡出。第一个显示的内容，需要添加active和in两个类，以获得默认显示内容和默认的active样式。
4、标签页的超链接通过href=”#?"来具体连接到哪个页面，?表示具体内容层的id号。

jq方法：
$().tab 该方法可以激活标签页中的超链接。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。
$("#tabtest li:eq(2) a").tab(“show”);

jq事件：
show.bs.tab 显示前触发
shown.bs.tab 显示后触发
$(‘a[data-toggle=“tab”]’).on(‘show.bs.tab’, function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})

【提示框和弹出框】
对于按钮或超链接可以添加提示框:
data-toggle=“tooltip” 表示点击切换功能是提示工具
data-placement=“left/top/right/bottom” 表示提示框显示的位置
title="" 表示提示的文字内容
提示工具需要使用jq先进行激活：
$(function () { $("[data-toggle=‘tooltip’]").tooltip(); });

同样，对于按钮和超链接也可以添加弹出框：
先进行激活:
$("[data-toggle=‘popover’]").popover();
data-toggle=“popover” 表明点击的功能是弹出弹出框
data-placement=“left/top/right/bottom” 表示提示框显示的位置
title="" 弹出框的标题内容
data-content="" 弹出框的内容
data-trigger=“click| hover | focus | manual” 定义如何触发弹出框，默认是click，可以设定多个值，中间用空格隔开。

一些选项:
animation(1) 向弹出框应用 CSS 褪色过渡效果。
html(0) 向弹出框插入 HTML。默认是插入text
placement 略
trigger 略
delay 延迟显示和隐藏弹出框的毫秒数，对 manual 手动触发类型不适用delay:{ show: 500, hide: 100 }

jq方法：
popover(option)
option可以为:
options:{key:value…} 形式设置属性集
‘toggle’ 切换显示/隐藏元素的弹出框。
‘show’‘hide’ 开关
‘destroy’ 隐藏并销毁

jq事件
可以添加四种四件，见模态框即可。

【警告框】
<div class=“alert alert-warning”>
<a href="#" class=“close” data-dismiss=“alert”>
×
</a>
<strong> 警告！</strong> 您的网络连接有问题。
</div>

除了警告，其实还可以添加成功标识alert-success

【按钮插件】
1、加载状态
data-loading-text=“Loading…”
2、单个切换及按钮组切换、按钮组单选
data-toggle=“button”
data-toggle=“buttons”
按钮组单选：
<div class=“btn-group” data-toggle=“buttons”>
<label class=“btn btn-primary”>
<input type=“radio” name=“options” id=“option1”> 选项 1
</label>
<label class=“btn btn-primary”>
<input type=“radio” name=“options” id=“option2”> 选项 2
</label>
<label class=“btn btn-primary”>
<input type=“radio” name=“options” id=“option3”> 选项 3
</label>
</div>

jq方法：
button(option):
button(‘toggle’) 切换按压状态
button(‘loading’ 当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
button(‘reset’) 重置按钮状态，文本内容恢复为最初的内容。
button(string) 重置按钮状态，并添加新的内容。

【折叠面板】
折叠面板分为以下几个部分：
1、主面板:<div class=“panel panel-default”> 主面板包括了外观面板和内容面板两部分。
2、外观面板，也称为头面板<div class=“panel-heading”> ，它通常包含一个标题和标题中的超链接/按钮。
2.1 外观面板中的标题样式:<h4 class=“panel-title”> ，该样式决定文字风格。
2.2 切换按钮 data-toggle=“collapse” href="#collapseOne" href链接的内容是相关内容面板的ID。如果多个主面板从属于一个折叠面板组，可以指定 data-parent="#accordion"，这回使折叠面板组的面板都呈现单选效果。
3、内容面板<div id=“collapseOne” class=“panel-collapse collapse in”> 其中in表示默认显示这个面板的内容。id必需，使得外观面板可以连接到它。
3.1 内容面板的主面板<div class=“panel-body”> ，具体内容写在body div中，它决定了段落缩进等格式。

//如果需要实现单选效果，外面再套一层<div class=“panel-group” id=“accordion”> ，每个超级的parent 指向这个id即可。
其实，也可以创建简单的不带有面板属性的折叠功能：
<button type=“button” class=“btn btn-primary” data-toggle=“collapse”
data-target="#demo">
简单的可折叠组件
</button>
<div id=“demo” class=“collapse in”>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>

方法和事件：略

【轮播图】
轮播图分为以下几部分：
1、主容器<div id=“myCarousel” class=“carousel slide” data-ride=“carousel”> carousel设置轮播图的基本样式，silde表示动画效果为滑动。data-ride=“carousel"表示标记轮播在页面加载时就开始动画播放。
2、项目（图片、视频）部分<div class=“carousel-inner”> 该容器设置轮播图的主要显示元素，即元素都应该放在这个div中。
2.1、显示元素<div class=“item active”> 每个div表示一个轮播的界面，具体的img放在这里面即可。
2.2 item层中可以与img并行存放一个<div class=“carousel-caption”> ，可以使用文字为图片显示标题。
4、可选元素，轮播图的中间图标部分，该部分表现为数个空心圆，点击可进行轮播图切换，当前显示的指针是实心圆：
<ol class=“carousel-indicators”>
<li data-target=”#myCarousel" data-slide-to=“0” class=“active”> </li>
<li data-target="#myCarousel" data-slide-to=“1”> </li>
<li data-target="#myCarousel" data-slide-to=“2”> </li>
</ol>
indicators是指针的意思，有序列表每一个列表项可以看成一个超链接，target即超链接的href，data-slide-to便是链接到第几个index。active表示默认的白点是第几个。
5、可选元素，轮播图左右的按钮：
<a class=“left carousel-control” href="#myCarousel" data-slide=“prev”>
<span class=“glyphicon glyphicon-chevron-left” > </span>
</a>
class="left carousel-control"表示超链接显示的样式，可以选择是左边的还是右边的。href和data-slide表示点击滑动的具体目标。

一些选项:
interval(5000) 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause(“hover”) 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap(true) 轮播是否连续循环。
// 这些选项可以在jq中使用，在data中使用时，添加在主容器上。

jq方法：
.carousel(options)如:
$(’#identifier’).carousel({
interval: 2000
})
.carousel(‘cycle’) 从左到右循环轮播项目。 $(’#identifier’).carousel(‘cycle’)
.carousel(‘pause’) 停止轮播循环项目。 $(’#identifier’).carousel(‘pause’)
.carousel(number) 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 $(’#identifier’).carousel(number)
.carousel(‘prev’) 循环轮播到上一个项目。 $(’#identifier’).carousel(‘prev’)
.carousel(‘next’) 循环轮播到下一个项目。 $(’#identifier’).carousel(‘next’)

jq事件：
slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。
slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。

【【selectize控件】】
引入】：
<link rel=“stylesheet” href={% static ‘xadmin/vendor/selectize/selectize.css’ %}/>
<link rel=“stylesheet” href={% static ‘xadmin/vendor/selectize/selectize.bootstrap3.css’%}/>
<script src={% static ‘xadmin/vendor/selectize/selectize.js’%}> </script>
初始化】：
$(’#example2’).selectize({ })
属性】：

maxItems:1 最大多选条目，默认为null，无限
delimiter: “,” 选中时显示的分隔符，默认为,
create:bool_or_funciton 是否允许手动添加条目
createOnBlur: true, 光标离开自动添加到选中
persist: true,添加到选项中，为否只添加到选中，不添加到选项中，默认为True
allowEmptyOption: true,允许为空，显示我None
maxOptions:5, 设置选项最大显示条目
valueField: ‘id’, 给value字段起名
labelField: ‘name’,给text字段起名
searchField: [‘id’, ‘name’],搜索名称
sortField: {
field: ‘text’,
direction: ‘asc’
}, 排序字段
plugins: [ ‘remove_button’ ],是否有取消按钮
options:[{id:1,name:‘java’},{id:2,name:‘html’}] 一个对象数组，提供初始化的数据
render:{
自定义选项的显示
option:function(item,escape) {
return “<div> 【” + item.id + “】” + item.name + "</div> ";
},
自定义选中项的显示
item:function(item) {
return ‘<div> 【’ + item.id + “】” + item.name + '</div> ';
}
｝
onItemAdd: function(value, item) 添加选中事件，value是id，item是value/text的obj
onItemRemove: function(value, item) 添加取消选中事件
onChange
onOptionAdd
onOptionRemove
onDropdownOpen
onDropdownClose
onFocus
onBlur
onInitialize

获取控件】：
var selectize = $(’#example’)[0].selectize;
控件的Api需要通过该变量来使用：
选项相关option：
.options 所有选项的数组，格式为{id:[option],}
.addOption() 参数是一个{}对象或者数组
.clearOptions()清空所有选项
updateOption(value, data) 更新选项，需要调用refreshOptions() 更新界面
getOption(value) 得到jq元素的选项

选中相关item：
items 所有选中的数组，格式为[id,]
.getValue() 获取当前选中的所有选项，单选框，返回一个字符串。多选框返回字符串数组。可以通过selectize.getValue().join(",")返回字符串
.setValue(0,“000”)
.setValue([0,1,2])根据id设置多值
.setValue(selectize.getValue())根据另一个select的选中值设置
clear(silent) 清除所有选中条目，silent为真不触发change event
getItem(value) 通过字符串得到选中项的jq元素
removeItem(value) 清除某个选中项
refreshItems()
addItem(value, silent)，添加选中，只能添加一个，后一个参数为true不触发change event

实例相关：
.disable();
.enable();

【【layer学习】】
弹出层种类：
dialog 0 信息框
page 1 页面
iframe 2 iframe
loading 3 加载层
tips 4 tips层

【方法】：
底层方法：ayer.open(options) options是一个json对象，如{type: 1}
基础参数中最基础的三项为：title - 标题 content - 内容 type - 基本层类型
其他参数在方法介绍完毕后介绍。
layer.alert(content, options, yes) 普通信息框，第二个参数可以忽略，直接填点击后的回调函数yes

layer.confirm(content, options, yes, cancel) - 询问框同样，第二个参数可以忽略，直接填函数，注意，该方法是异步非阻塞的，yesorno的逻辑应该写在回调函数中。如果需要确认表单提交，可以在submit中先offsubmit事件，然后调用调用submit()方法提交，当然最后要返回false。
有关submit，有以下需要注意：1）点击submit按钮或调用submit方法时，onsubmit事件和动态绑定的事件都会运行，前者在先。2）仅按钮会触发验证，验证成功后触发submit事件，验证不成功并不触发；而submit方法会直接提交表单，并不会触发验证。

layer.msg(content, options, end) - 提示框比较简单的黑色窗体，根据内容自动确定大小，默认3S消失。如果options里确定了icon，窗体会变成白色。end是消失后执行的函数

layer.load(icon, options) - 加载层刷新加载的显示，icon支持传入0-2如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，但它同样是异步非阻塞执行的，在后期调用layer.close(index)即可关闭它。

layer.tips(content, follow, options) - tips层小提示，content是内容，follow是一个selector，也可以直接传入jq元素，如绑定事件重点this，它指示提示框出现在那个元素附近。基础参数有一个 tips参数可以指定出现的位置，分别是1234上右下左，默认为右边，但会智能判断。

layer.prompt(options, yes) - 输入层，也即inputbox，options中有一些专用的选项：
formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
value: ‘’, //初始时的值，默认空字符
maxlength: 140, //可输入文本的最大长度，默认500
yes是按确定后的回调函数，默认传入value, index, elem，多了一个value即表单的输入值。

layer.tab(options) - tab层独特参数为：tab:[] 如：
layer.tab({
area: [‘600px’, ‘300px’],
tab: [{
title: ‘TAB1’,
content: ‘内容1’
}, {
title: ‘TAB2’,
content: ‘内容2’
}, {
title: ‘TAB3’,
content: ‘内容3’
}]
});

layer.close(index) - 关闭特定层 index是元素唯一索引，所有layer方法，如open、msg、load都会返回一个index，所有回调函数，也都会传入index，layero两个对象，也即唯一索引和jq元素本身。
layer.closeAll(type) type为弹出层种类，本说明第一个表的英文部分。
layer.title(title, index) - 改变层的标题
layer.setTop(layero) -置顶当前窗口
layer.ready(callback) - 初始化就绪

【基础参数介绍】
rea - 宽高默认：‘auto’
area: ‘500px’ 宽 area: [‘500px’, ‘300px’] 宽高

offset - 坐标默认：'auto’垂直水平居中
值备注
offset: ‘auto’ 默认坐标，即垂直水平居中
offset: ‘100px’ 只定义top坐标，水平保持居中
offset: [‘100px’, ‘50px’] 同时定义top、left坐标
offset: ‘t’ 快捷设置顶部坐标
offset: ‘r’ 快捷设置右边缘坐标
offset: ‘b’ 快捷设置底部坐标
offset: ‘l’ 快捷设置左边缘坐标
offset: ‘lt’ 快捷设置左上角
offset: ‘lb’ 快捷设置左下角
offset: ‘rt’ 快捷设置右上角
offset: ‘rb’ 快捷设置右下角

icon - 图标。信息框和加载层的私有参数默认：-1（信息框）/0（加载层）
信息框皮肤可以传入0-6如果是加载层，可以传入0-2
0 感叹号 1 绿色勾 2 红色叉 3 黄色问 4 灰色锁定 5表情不高兴 6 表情高兴
0 …红色加载 1 圆形加载 2 方形加载

btn - 按钮
基础参数中的btn参数可以设置按钮的显示内容和个数，对于alert、confirm等定制化的高层方法，该参数可以覆盖默认的按钮框。
对于回调函数，除了在msg、alert等高层函数的第三参数、第四参数来描述按钮的回调，也可以直接在基础参数中写函数。
layer.confirm(‘纳尼？’, {
btn: [‘按钮一’, ‘按钮二’, ‘按钮三’] },fn1,fn2,fn3)
layer.confirm(‘纳尼？’, {
btn: [‘按钮一’, ‘按钮二’, ‘按钮三’],yes:fn1,btn2:fn2,btn3:fn3 })
在基础函数中写回调时，yes默认是第一个，其他的着按照btn2…这样排列。
注意：按钮中第二个开始默认点击即取消弹出层，如果不想取消，需要返回false
注意2：所有按钮回调默认传递index，layero，位置可以呼唤，根据类型匹配。
一些特殊的回调：
cancel:右上角关闭回调；success - 层弹出后的成功回调方法；end，层消失后的回调方法。full/min/restore -分别代表最大化、最小化、还原后触发的回调

btnAlign - 按钮对齐原则默认：r
值备注
btnAlign: ‘l’ 按钮左对齐
btnAlign: ‘c’ 按钮居中对齐
btnAlign: ‘r’ 按钮右对齐。默认值，不用设置

closeBtn - 关闭按钮样式默认：1
ayer提供了两种风格的关闭按钮，可通过配置1（普通）和2（圆形外延）来展示，如果不显示，则closeBtn: 0

shade - 遮罩，及模态框呼出后背景区域的颜色透明度默认：0.3
shade: 0 不显示
shade: 0.5 黑色对比度身高
shade: [0.8, ‘#393D49’] 使用其他颜色

shadeClose - 是否点击遮罩关闭
类型：Boolean，默认：false

time - 自动关闭所需毫秒默认：0不关闭 msg默认为3000

anim - 弹出动画类型：Number，默认：0
值备注
anim: 0 平滑放大。默认
anim: 1 从上掉落
anim: 2 从最底部往上滑入
anim: 3 从左滑入
anim: 4 从左翻滚
anim: 5 渐显
anim: 6 抖动

maxmin - 最大最小化默认：false
该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

fixed - 固定
即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可

scrollbar - 是否允许浏览器出现滚动条
默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽

maxWidth - 最大宽度 maxHeight - 最大高度
只有当area: 'auto’时，maxWidth的设定才有效。

tips：layer.index可以得到最新的索引
判断是否ie浏览器：
document.documentMode//IE11返回11，IE10返回10，IE9返回9，IE8返回8，IE7返回7，IE6返回6
“ActiveXObject” in window

ajax异步下载：

if (typeof window.navigator.msSaveOrOpenBlob === "function") {
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
                var link = document.createElement("a");
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;

                document.body.appendChild(link);
                link.click();
            }