前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html
Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。
就是给文本加上含有语义的标签。
接下来应该学习更多具体语义标签：
一、结构（固定的结构）
二、Html中的标签
标签：用“<>”包起来的内容。
Html标签：
由于现在学习的html页面还是很简单的，为了能够让页面更加的“充实”我们要学习更多的标签。
h系列的标签(Header)：h1,h2,h3,h4,h5,h6
作用：把页面上的文字加上标题的语义。
代码：
h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）
注意：一个页面只能有一个h1标签。
p标签(Paragraph)：段落标签
作用：给页面的上一段文字加上段落的说语义
代码：
这是段落
特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。
hr标签(Horizontal Rule)
作用：在页面显示一条横线。
代码：
特点：在页面显示一条横线，默认占整行。
br标签(break)
作用：换行。
代码：
特点：换行。
b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins
作用：
b：加粗
u: 下划线
i: 倾斜
s: 删除线
建议不要使用，因为这些标签没有语义。
作用：
strong:加粗
ins:下划线
em:倾斜
del:删除线
可以使用
img标签(image)：
作用：在页面显示一张图片。
代码：
特点：就是显示图片.
属性：
| src |
图片显示的路径 |
| alt |
如果图片加载不出来会显示这个属性中的文字 |
| title |
介绍这张图片 |
a标签(Anchor)：锚
a标签的其它名称：
超级链接，超链接，锚链接。
作用：可以在一个页面跳转到另一个页面。
代码：
注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。
a标签的其它用法：
1.可以不跳转（跳转到当前页面）href=”#”
2.可以跳转到另外的页面。
3.可以在当前页面进行定位。
A.设置a标签的href属性为“#id名”，
B.在页面的指定位置加入一个目标标签（可以是任意标签）
C.必须给这个标签设置一个id名：
这是目标
4.在跳转的页面进行定位。
5.可以进行下载。（强烈不推荐使用）
a标签的属性：
| href |
a标签跳转的目标地址 |
| target |
_blank:保留原始页面，再进行跳转 _self:在当前页面进行跳转 |
| base |
为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面） |
列表
有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
- 列表项1
- 列表项2
- 列表项3
......
无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
- 列表项1
- 列表项2
- 列表项3
......
自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
- 名词1
- 名词1解释1
- 名词1解释2
...
- 名词2
- 名词2解释1
- 名词2解释2
...
表格
创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
单元格内的文字
...
...
在上面的语法中包含三对HTML标签，分别为
1、<
：用于定义一个表格。
2、< ：用于定义表格中的一行，必须嵌套在
3、
4、thead：表格头部
5、tbody：表格主体
6、tfoot：表格底部
7、caption表格标题
表格属性
表单控件
input控件
标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标签还可以定义很多其他的属性，其常用属性如下表所示。
label 标签
label 标签为input 元素定义标注（标记）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。
textarea 标签
如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
select标签
使用select控件定义下拉菜单的基本语法格式如下
中至少应包含一对。
在option 中定义selected=" selected "时，当前项即为默认选中项。
button标签
单独的一个表单控件，就是普通按钮的意思。只不过它是双标签哦！
form表单
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
常用属性：
Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method 用于设置表单数据的提交方式，其取值为get或post。
name 用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
三、当前的主流文档类型：
| 文档类型 |
分类 |
备注 |
| HTML |
HTML Strict DTD |
请求比较严格的html类型 |
| HTML Transitional DTD |
相对而言比较规范不太严禁 |
|
| Frameset DTD
|
框架级的类型 |
|
| xHTML |
HTML Strict DTD |
请求比较严格的html类型 |
| HTML Transitional DTD |
相对而言比较规范不太严禁 |
|
| Frameset DTD
|
框架级的类型 |
xHtml(html2.0版本（是一种相对html语法更加严谨的hmtl）):
注意：将来在使用DOCTYPE的时候建议使用html5的类型。每个页面都要设置一个doctype，如果不设置，浏览器会默认开启quirks mode（怪异模式）解析（quirks mode（怪异模式）是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。
Html标签
作用所有html中标签的一个根节点。
Head标签
作用：用于存放：
title,meta,base,style,script,link
注意：每个head标签中都必须有一个有title标签，其它的可选。
Body标签
作用：用于存放所有的html的结构标签：
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
Title标签：
作用：让页面拥有一个属于自己的标题。
meta 标签：
常用用法：
1. Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
2. Keywords：关键词，可以用来提高页面的关健词的比重（提升排名的一种方式。）
3. 字符集（编码格式）：
Charset（字符集的格式）：UTF-8.
注意：字符集（文字在电脑是存储的字典）：
电脑是不能直接存储文字的，一般情况下电脑存储的是这个文字在“字典”里对应的位置。
gb2313---->gbk;
国标2313---->国标
gbk,utf-8之间的区别：
相同点：都是字符的编码格式。
区别：
utf-8:收录是全世界所有的语言中的文字。
gbk:收录了汉字，片假名。
大小：
utf-8>gbk
性能：
uft-8 约定：将来我们在整个学习过程中都用utf-8; utf-8存储一个汉字占3个字节， gbk存储一个汉字上2个字节 双标签：有开始有结束，开始和结束之间是存在内容四、标签的分类
单标签：只有一个标签，自己闭合自己。
,
五、标签与标签之间的关系
嵌套关系：一个标签包含另外一个标签，他们之间构造父子关系。
并列关系：两个标签并列，他们构造兄弟关系。
注意：将来在书写代码的时候如果两个标签之间的关系是嵌套关系，最好通过代码直接反映出来（子元素相对于父元素有一个缩进）。如果是并列关系，最好要有对齐。
六、标签的属性
属性为 HTML 元素提供附加信息，img标签中的src就是img标签的一个属性。
七、路径问题
第一种：绝对路径
带有盘符的路径：C:\上课内容\上课视频\01html第一天\4-源代码\1.jpg.
第二种：相对路径
由页面是一个文件，图片 也是一个文件，而现在需要在页面上输出图片，所以需要得到图片相对于文件的路径.
a.如果页面与图片在同一目录下面：
b.如果页面在图片一上级目录：
c.如果图片在页面的上一级目录：
只要不出意外情况都是用相对路径：因为相对路径的可移植性要强。
第2章CSS
一、字体设置及选择器
1、font属性的设置
font-size字体大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少
Google和火狐默认字体大小为：16px；
font-family字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:"微软雅黑";}可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
font-weight字体粗细
字体加粗除了用 b 和 strong标签之外，可以使用css 来实现，但是css 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
font-style字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用css 来实现，但是css 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
2、CSS中注释写法
CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。
3、颜色的不同写法
a、直接写英文单词yellow red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgba（0,0,0,0.5）a为透明度
4、css各类选择器
标签选择器
标签选择器写法
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
效果：会将所有的这类标签都加上相同的css属性
类选择器
类选择器的写法
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器最大的优势是可以为元素定义单独或相同的样式。
将拥有这个类名的所有元素加上css样式
命名的取值规范只能是：0-9，a-z，A-Z，_，-，不能以数字开头
id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
将拥有这个id名的唯一元素加上css样式
5、关于text属性的设置
line-height行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
text-align文本内容水平对齐
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent首行文本缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
二、复合选择器及伪元素
1、复合选择器
交集选择器
选择器选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
注意：两个选择器之间是没有空格的。
并集选择器
选择器 ，选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
将两种类型的元素全部选择出来。
后代选择器
选择器 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
注意：两个选择器之间是要有空格的。
子代选择器
选择器>选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
注意：两个选择器之间是要有大于号隔开。
2、元素的三种显示方式
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
3、伪类和伪元素的使用
伪类
| :link |
伪类将应用于未被访问过的链接 |
| :hover |
伪类将应用于有鼠标指针悬停于其上的元素。 |
| :active |
伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。 |
| :visited |
伪类将应用于已经被访问过的链接 |
| :focus |
伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持） |
链接伪类，他们规定执行有顺序的，不能随便更改位置：
要按照 :link --> :visited --> :hover--> :active 的顺序。
text-decoration检索或设置对象中的文本的装饰
text-decoration : none || underline || blink || overline || line-through
none : 无装饰
underline : 下划线
line-through : 删除线
overline : 上划线
伪元素
更改第一个字或字母的样式：first-letter
更改第一行文本的样式：first-line
向前面添加：before
向后面添加：after
4、css三大特性：继承性、层叠性、优先级、权重
| 继承或者* 的贡献值 |
0,0,0,0 |
| 每个元素（标签）贡献值为 |
0,0,0,1 |
| 每个类，伪类贡献值为 |
0,0,1,0 |
| 每个ID贡献值为 |
0,1,0,0 |
| 每个行内样式贡献值 |
1,0,0,0 |
| 每个!important贡献值 |
∞ 无穷大 |
三、背景及盒模型
1、background背景
背景颜色
background-color：
背景图片
语法：
background-image: none | url (url)
参数：
none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像
background-image属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
背景平铺
语法：
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat: 背景图像不平铺
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向平铺
背景位置
语法：
background-position: length || length
background-position: position || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left |center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
背景附着
background-attachment：scroll（滚动）
background-attachment：fixed（固定）
2、盒子模型
border边框
语法：
border :border-width || border-style || border-color
边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
表格边框问题
border-collapse:collapse;表示边框合并在一起。
border-spacing:px;定义边框之间的间距。
padding内边距
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
| 值的个数 |
表达意思 |
| 1个值 |
padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 |
padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3个值 |
padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4个值 |
padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
margin外边距
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
宽度高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
四、浮动与定位
浮动
选择器{float:属性值;}
| 属性值 |
描述 |
| left |
元素向左浮动 |
| right |
元素向右浮动 |
| none |
元素不浮动（默认值） |
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}| 属性值 |
描述 |
| left |
不允许左侧有浮动元素（清除左侧浮动的影响） |
| right |
不允许右侧有浮动元素（清除右侧浮动的影响） |
| both |
同时清除左右两侧浮动的影响 |
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 ，或则其他标签br等亦可。优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
给父级添加overflow属性
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素
使用方法：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} //ie6、7 专有优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用zoom:1触发 hasLayout。
注意：content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox7.0前的版本会有生成空格。
给伪元素添加空白字符
content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.当然有些网站也用 content:"\0200" 的，都是空格的意思。
使用before和after双伪元素
使用方法：
.clearfix:before,.clearfix:after{
content:".";
display:table;
clear:both;
}
.clearfix{*zoom:1;}优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用zoom:1触发 hasLayout。
定位
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比。具体解释如下表所示：
| 边偏移属性 |
描述 |
| top |
顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom |
底部偏移量，定义元素相对于其父元素下边线的距离 |
| left |
左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right |
右侧偏移量，定义元素相对于其父元素右边线的距离 |
也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等
2、定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值
| 值 |
描述 |
| static |
自动定位（默认定位方式） |
| relative |
相对定位，相对于其原文档流的位置进行定位（不脱标） |
| absolute |
绝对定位，相对于其上一个已经定位的父元素进行定位（脱标） |
| fixed |
固定定位，相对于浏览器窗口进行定位（脱标） |
总结
| 定位模式 |
是否脱标占有位置 |
是否可以使用边偏移 |
移动位置基准 |
| 静态static |
不脱标，正常模式 |
不可以 |
正常模式 |
| 相对定位relative |
不脱标，占有位置 |
可以 |
相对自身位置移动 |
| 绝对定位absolute |
完全脱标，不占有位置 |
可以 |
相对于定位父级移动位置 |
| 固定定位fixed |
完全脱标，不占有位置 |
可以 |
相对于浏览器移动位置 |
3、叠放次序z-index
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
4、display显示
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 与它相反的是display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
5、visibility可见性
设置或检索是否显示对象。
visible: 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
6、overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible: 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
六、界面样式及精灵图
1、界面样式
cursor鼠标样式
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor :default 小白 | pointer 小手 | move 移动 | text 文本
尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline轮廓
outline: outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0;
resize防止拖拽
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动文本域。
vertical-align垂直居中
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单等。
| 模式 |
单词 |
| 基线对齐： 默认的是文字和图片基线对齐 |
vertical-align: baseline; |
| 垂直居中： 默认的是文字和图片基线对齐 |
vertical-align: middle; |
| 顶部对齐： 默认的是文字和图片基线对齐 |
vertical-align: top; |
2、精灵图
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
七、CSS文本属性及优化
1、margin负值
margin是可以设置为负数的
定位后元素的层级要高于标准流的层级
2、给网站添加favicon图标
3、logo优化
1、我们要在logo里面放一个h1标签，就是为提权，说明这个盒子很重要。
2、我们继续在h1 里面放一个链接a 要和 logo盒子一样大。
3、注意 a链接 里面要放上网站标题。（是为了优化）
4、链接里面的文字对用户体验不好，这里不需要看见。有两种方法实现：
5、利用text-indent:-2000em; 或者 利用padding 挤开盒子并且overflow 切割
6、给链接添加 title 提示文本 增强用户体验。
4、文本属性
letter-spacing字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
word-break自动换行
normal 使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
white-space空白符处理
使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：
normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记
。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。(重要)
text-overflow文字溢出
text-overflow: clip | ellipsis
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip : 不显示省略标记（...），而是简单的裁切
ellipsis: 当对象内文本溢出时显示省略标记（...）
文本超出以省略号代替:
white-space: nowrap;//（强制一行显示）
overflow: hidden;//（溢出隐藏）
text-overflow: ellipsis;//（溢出显示省略号）
5、css条件注释语法的使用
要判断非ie
第3章JS
一、流程控制语句
程序三种基本结构--顺序结构、选择结构、循环结构
1、选择结构
if语句
if (判断条件) {
执行语句
}elseif (判断条件) {
执行语句
}else{
执行语句
}switch语句
switch(表达式) {
case 取值：
执行语句
break；
case 取值：
执行语句
break；
default：
执行语句
}case里必须是具体的值，但是如果表达式可以返回一个具体的值true或者false也可以是表达式，这时switch里面是true
三元表达式：判断条件？条件为真的结果：条件为假的结果；
2、循环结构
for语句:1初始化表达式、2控制表达式、3循环后表达式
for(vari = 0; i < n ; i ++){
执行语句
}while语句
var i=0；
which(判断条件){
执行语句
}do while 语句 先执行后判断至少执行一次
var i= 0;
do {
执行语句
}while(判断条件)二、基本类型和复杂类型
基本数据类型（值类型）：直接存储值
number、string、boolean、undefined、null（基本类型只有这五个）
复杂数据类型（引用类型）：存储引用 object
一、数组
1、数组的声明
①通过构造函数
var arr = new Array ();②通过字面量
var arr = [];2、数组的赋值和取值
赋值：arr [索引号] = 1；
批量赋值 for循环
取值：arr [索引号]；
3、数组的遍历（重点）
for (var i = 0; i < arr.length; i++){
}防止稀疏数组 arr (arr.length)= i;
4、转换数组
|
|
console.log(arr.);打印输出 |
|
| console.log(arr); |
[1, 2, 3] |
先以对象的形式输出，刷新后把直接量输出，其实就是调用了valueOf |
| valueOf() |
[1, 2, 3] |
某种程度上说 它就是调用了toString |
| toString() |
1,2,3 |
调用了join，把每一项的值取出来用逗号拼接 |
| join("-") |
1-2-3 |
不传参数，默认用逗号拼接1,2,3，传入参数，会用这个参数拼接 |
5、检测数组（掌握）
| var arr = [1, 2, 3]; |
console.log打印输出的返回值 |
| typeOf arr; |
object |
| arr instanceof Array; |
true |
| {} instanceof Array |
false |
| Array.isArray([]); |
true |
| Array.inArray({}); |
false |
| Array.prototype.isArray; |
|
| Array.isArray; |
|
| Ovject.prototype.toString.cell(arr); |
[object Array] |
6、增删方法
| push(1,2,3,4); |
从后面添加元素，可以同时加入多个 |
| console.log(arr.push(1,2,3,4)); |
返回值是新数组的长度 |
| unshift(a); |
从前面添加 可以添加多个 |
| console.log(arr.unshift(a)); |
返回值是新数组的长度 |
| shift(); 无参数 |
从前面删除一个 |
| console.log(arr.shift()); |
返回删除的元素 |
| pop(); 无参数 |
从后面删除最后一个 |
| console.log(arr.pop()); |
返回删除的元素 |
找到数组中第一个a的位置：arr.indexOf(a);
找到数组中最后一个a的位置arr.lastindexOf(a);
找到数组中所有的a的位置
function getIndex (arr,str) {
var index = -1;
do {
index = arr.indexOf(str, index + 1);
console.log(index);
if (index != -1) {
console.log(index);
}
}while(index != -1);
}MDN官方介绍indexof:
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1语法
arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])参数
searchElement
要查找的元素
fromIndex
开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.
返回值
首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
在数组中元素出现的次数
var arr = ["c", "a","z", "a", "x", "a"]
var o = {}; //属性名 元素--> 属性值 次数
for (var i = 0; i < arr.length; i++){
var item = arr[i];
if(o[item]) { //能进来说明有值，没有进来说明之前没有出现过
o[item]++; //等于o[item] = o[item] + 1;
}else{
o[item]= 1; //能进来说明是undefined，也就是说之前没有出现过，这是第一次出现
}
}
7、操作方法
concat();把参数拼接到当前数组
slice[begin，end);从当前数组中把要的东西复制一份，不影响原来的数组
splice(begin，删除个数，插入的新元素);删除或替换当前数组的某些元素，返回这些元素
8、位置方法
indexOf(); 从前往后寻找元素在数组中的位置
lastIndexOf(); 从后往前找，没有找到返回-1
9、迭代方法
every();
filter();
forEach(); 对数组遍历
arr.forEach(function(element, index, array) {
console.log(element);
})
map();
some();
10、sort 方法（了解）
原理：
function sort(arr, fn) {
for(var i = 0; i < arr.length - 1; i ++) {
var flag = true;
for(var j = 0; j < arr.length - 1 - i; j ++){
if(fn(arr[j] > arr[j + 1]) > 0){
vartemp = arr[j];
arr[j]= arr[j+1];
arr[j+1]= temp;
flag =false;
}
}
if(flag) {
break;
}
}
returnarr;
}
var array = [3, 2, 1];
console.log(arr);
console.log(sort(array, function (a, b){
return a - b;
}));
console.log(arr);
二、函数
1、函数的定义和调用
函数的定义
①函数的声明：function 函数名 () {
函数体（要执行的代码）
}
②函数表达式：var 函数名 = function () {
函数体
};
函数的调用：函数名 ();（要调用先引用）
2、函数的参数
有参数的函数的声明：function 函数名 (参1，参2) { //函数声明时的参数只是一个占位符，是形式参数
函数体
}
有参数的函数的调用：函数名 (参1，参2) //函数调用时传入的参数是具体的数值，是实际参数
形参和实参没有关系，只不过在调用的时候把实参的值复制了一份赋值给了形参
3、函数返回值
①return 要返回的值；（函数的返回值是什么，调用这个函数就相当于调用了什么）
②函数在执行完成return语句后便会退出函数，后面的代码不会执行
③如果只打印函数名，会通过函数名找到函数体，如果想打印的是函数的返回值，那么一定要加小括号()
4、匿名函数
匿名函数：函数定义完后就赋值给了一个变量，通过变量名来调用这个函数，所以就没有必要起名字
5、递归函数
函数自己调用自己的编程技巧
6、回调函数(重点)
被当做函数传递的函数
三、对象
1、键值对
一种对应关系，通过键能够方便地找到值 key:value; 对象也是键值对
属性名：属性值、索引：元素的值
2、对象的声明
①通过构造函数
varobj = new.Object();
②通过字面量
varobj = {};
3、属性
用来描述对象的特征 一般是名词 对应变量
定义：对象.属性名 = 要赋的值；
调用：对象.属性名；
4、方法
用来描述对象的行为 一般是动词 是一种函数（属于某个对象的函数就叫方法）
定义：对象.方法名 =function(){ //函数体}；
调用：对象.方法名；
5、访问属性的两种方式（重点）
①点语法（属性名是什么就必须写什么）：obj.属性名；
②中括号（通过字符串找属性名，字符串可以通过编程拼接）：obj["属性名"];
6、遍历的两种方式（重点）
①for循环
②for-in
for(var k in json) { 语句}
k变量代表的是json中的各个属性（key）和 var i= 0中的i是一个意思 名字不同而已
json JavaScript Object Notation（JavaScript对象标记法）是仿照JS中对象字面量的格式去书写的一串 用来记录对象数据的字符串，可以用于数据传输。
7、Null
null常被用于期望一个对象，但是当前先不附加任何值的情况
undefined派生自null
undefined== null //true
undefined=== null //false
四、字符串的方法
字符串的所有方法都不会修改字符串本身
1、操作方法（重点）
slice(参1，参2) 从start开始，截取到end位置，end取不到；参1：开始的位置 ；参2：结束的位置[start,end).遇到负数把length和负数相加
substring() 从start开始，截取到end位置，end取不到；遇到负数，把负数变为0，两个参数交换位置
substr() 从参1，start开始，截取参2，length个字符
charAt() 获取指定位置处的字符
str[0]; 和charAt 等效，IE8+支持
trim() 只能去除字符串前后的空白
split() 把字符串切割成字符数组
大小写转换：
to(Locale)UpperCase() 转换大写
to(Locale)LowerCase() 转换小写
2、查找字符串中所有的o的位置
var str= "dmsosekkdsoosns";
varindex= -1；
do{
index = str.indexOf("o",index +1);
console.log(index);
}while(index != -1);
3、将字符串中所有的o替换成！
do{
str =str.replace("o","!");
}while(str.indexOf("o")!= -1);
console.log(str);
4、统计字符串中每个字符出现的次数
var o = {};
for (var i = 0; i < str.length; i ++){
varitem = str.charAt(i);
if(o[item]) {
o[item]++; //如果以前有了值，让这个值加一
}else{
o[item]= 1; //如果之前没有，现在进来就有了一次了
}
}
for (var key in o) {
console.log(key+"出现了" + o[key] + "次");
}
5、去掉字符串中所有的空格
var str = " aaa di djsoa jdi wd";
str =str.trim(); //trim可以去除两边的空格
var arr = str.split(" ");//按照空格分隔
str = arr.join(" ");
6、replaceClassName:替换类名，封装函数（了解）
functionreplaceClassName(element, oldStr, newStr) {
//把类名这个字符串按照空格分隔，把里面每一个类名做判断
vararr = element.className.split(" ");
for(var i = 0; i < arr.length; i ++) {
if(arr[i] === oldStr) {
arr[i]= newStr;
}
}
element.className= arr.join (" ");
}
7、getElementsByClassName
functiongetElementsByClassName(element,className) {
if(element.getElementsByClassName){
returnelement.getElementsByClassName(className);
}else{
var filterArr = [];
var elements =element.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
var nameArr =elements[i].className.split(" ");
for (var j =0; j < nameArr.length; j++) {
if (nameArr[j] === className) {
filterArr.push(elements[i]);
break;
}
}
}
returnfilterArr;}}
三、作用域、预解析和声明提升
预解析
解析器在执行当前作用域下的代码之前有一个预解析的过程
预解析的时候 会将变量和函数的声明提升到当前作用域的顶部 然后才执行
声明提升
变量提升：解析器会将变量提升到作用域的最上面，但是变量的赋值不会提升
函数提升：解析器会率先读取函数声明，并使其在执行任何代码之前可用
另外解析器会先找var再找function，因此如果变量和函数重名后找到的函数会把先找到的变量覆盖（如果代码执行后有赋值语句，该值又会把函数覆盖）
变量作用域
最外层的是全局变量
函数内的是局部变量
特殊：函数内部不加var的是全局变量
递归概念：程序调用自身的编程技巧称为递归
回调函数：函数也是一种普通的数据类型，因此函数也可以被当作参数传递，被当作参数传递的函数叫做回调函数
四、构造函数创建对象
@this和new
利用new 关键字可以声明新的对象。new 关键字可以让构造函数中this的指向改变，并让构造函数把this返回。
@构造函数
构造函数也是函数，只不过会默认返回一个对象。
@构造函数创建对象
通过构造函数创建对象更方便（不需要创建对象并返回）。更重要的是可以通过instanceof来判断实例的类型了。
1、工厂模式（了解）
function Student (name, age, sex, score){
varstu = new Object();
stu.name= name;
stu.age= age;
stu.sex= sex;
stu.score= score;
stu.sayHi= function () {
console.log("大家好我叫" + this.name + "我今年" + this.age);
};
returnstu;
}
varstu = new Student("zs", 18, 1, 100);
stu.sayHi();
2、构造函数模式（重点）
function Student (name, age, sex, score){
var stu = new Object(); 这回就不需要手动的创建对象了，直接使用this
this.name= name;
this.age= age;
this.sex= sex;
this.score= score;
this.sayHi= function () {
console.log("大家好我叫" + this.name + "我今年" + this.age);
};
return stu; 也不需要返回对象了,因为new 可以让this返回
}
调用：
varstu 1= new Student("zs", 18, 1, 100);
varstu 2= new Student("zs", 18, 1, 100);
stu1.sayHi();
stu2.sayHi();
console.log(stu1.sayHi=== stu2.sayHi);
通过构造函数模式创建出来的对象，可以通过instanceof 来辨别具体类型
五、原型属性：prototype
如果希望所有的数组对象都能调用某个方法，可以在这个对象的构造函数的原型属性上绑定方法
Array.prototype.jump = function (){
console.log("去吧，皮卡丘！");
};
var arr = new Array();
arr.jump()
原型模式：
function Student (name, age, sex, score){
this.name= name;
this.age= age;
this.sex= sex;
this.score= score;
}
Student.prototype.sayHi = function () {
console.log("大家好我叫" + this.name + "我今年" + this.age);
};
调用：
varstu 1= new Student("zs", 18, 1, 100);
varstu 2= new Student("zs", 18, 1, 100);
stu1.sayHi();
stu2.sayHi();
console.log(stu1.sayHi=== stu2.sayHi);
console.log(stu1);
prototype 是构造函数的原型属性
__proto__ 是对象的原型属性,一环套一环，
形成了一个链条，就是原型链，通过原型链
可以让它现原形
六、深层复制数组（了解）
function deepClone(arr) {
varnewArr = [];
for (vari = 0; i < arr.length; i ++{
newArr[newArr.length]= arr[i];
}
return newArr;
}
var arr1 = [3, 2, 1];
var arr2 = arr1;
var arr2 = deepClone(arr1);
arr[0] = 100;
console.log(arr1);
console.log(deepClone(arr1).sort(function(a, b){
returna - b;
}));
七、形参和实参（重点）
调用函数的时候是把实际参数的值复制一份赋值给形参它们只是值一样没有任何关系
function fn(a, b) { -->形式参数
a =100; //对形参进行改变
//console.log(a);//形参改变了
return a + b;
}
var a = 10;
var b = 20;
fn(a, b);//实际参数
//console.log(a);//实参不会改变
对形参的改变一定不会影响实参 这个说法是不严谨的
var array = [3, 2, 1];//实际参数
console.log(array);//把实际参数array复制了一份 赋值给了形式参数arr 我们是对形式参数arr进行的修改
console.log(sort(array, function (a, b) {
return a - b;
}));//这个函数内部只是对形式参数arr进行了修改
console.log(array); 实际参数也改变了
八、JS面试题
1、谈谈你对递归的认识？
递归：程序调用自身的编程技巧称为递归，自己调用自己。
functionfactorial(num) {
return ( num <=1 ) ? 1 ： num *factorial(num - 1)；
}
console.log(factorial(8))；
2、简述forin 循环的特点及使用场景？
for...in 语句用于对数组或者对象的属性进行循环操作。 for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。注意：forin循环不会按照属性的下标来排列输出。
for (变量 in 对象){
在此执行代码
}
“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。
3、split()join()的区别？
split()方法通过把字符串分割成子字符串来把一个String 对象分割成一个字符串数组。
语法 str.split([separator][， limit])
参数 separator 指定用来分割字符串的字符（串）。separator 可以是一个字符串或正则表达式。如果忽略 separator，则返回整个字符串的数组形式。如果 separator 是一个空字符串，则 str 将会把原字符串中每个字符的数组形式返回。参数limit是一个整数，限定返回的分割片段数量。split 方法仍然分割每一个匹配的 separator，但是返回的数组只会截取最多 limit 个元素。
"|a|b|c".split("|")//将返回[""， "a"， "b"， "c"]
"hello".split("")//可返回 ["h"， "e"， "l"， "l"， "o"]
"hello".split(""， 3) //可返回 ["h"， "e"， "l"]
join()方法将数组中的所有元素连接成一个字符串。
语法 str = arr.join([separator = '，'])
参数separator 可选，用于指定连接每个数组元素的分隔符。分隔符会被转成字符串类型；如果省略的话，默认为一个逗号。如果 seprator 是一个空字符串，那么数组中的所有元素将被直接连接。
例子： var a = ['Wind'， 'Rain'， 'Fire']；
var myVar1 =a.join()； // myVar1的值变为"Wind，Rain，Fire"
var myVar3 =a.join(' + ')； // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('')； // myVar4的值变为"WindRainFire"
4、如何消除一个数组里面重复的元素？
vararr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];for(vari =0,len= arr1.length; i<len; i++){
if(arr2.indexOf(arr1[i]) <0){
arr2.push(arr1[i]);
} } document.write(arr2); // 1,2,3,4,5,65、请说出==和===的区别？
== 判断内容是否相等不比较类型 console.log(1 =="1")； true
=== 判断内容相等且类型也相等 console.log(1==="1")； false
6、请列举字符串操作的方法？
charCodeAt() 方法返回一个整数，代表指定位置字符的Unicode编码；
charAt() 方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串；
slice() 方法返回字符串的片段；
substring() 方法返回位于String对象中指定位置的子字符串。
substr() 方法返回一个从指定位置开始的指定长度的子字符串。
indexOf() 方法返回String对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1；
lastIndexOf() 方法返回String对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1；
search() 方法返回与正则表达式查找内容匹配的第一个字符串的位置。
concat() 方法返回字符串值，该值包含了两个或多个提供的字符串的连接；
split() 将一个字符串分割为子字符串，然后将结果作为字符串数组返回；
第4章DOM
一、事件
1、阻止a标签的默认行为（重点）
returnfalse;
2、事件三要素
事件源.事件 = function（）{事件处理程序}；
3、批量操作
①批量获取元素（通过标签名） getElementsByTagName ）
②批量添加事件 for循环遍历
replace 方法
replace(要找的值，要替换的值)
function函数名（element, 要找的值，要替换的值）{
element.className= element.className.replace(要找的值，要替换的值)
}
Document Object Model 文档对象模型，就是把HTML文档模型化，当作对象来处理
二、DOM结构
1、概念
文档(Document)：就是指HTML或者XML文件
节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有
元素节点 属性节点 文本节点 注释节点
元素(Element)：HTML文档中的标签可以称为元素
2、结构概念
父节点 当前节点的父级
子节点 当前节点的子级
兄弟节点 和当前节点同属一个父级的节点
3、.获取元素
getElementById
getElementsByTagName 通过标签名寻找一类元素（伪数组）
4、设置属性
元素对象.属性名 = “属性值”;
<标签 属性名=”属性值”>
5、绑定事件
事件三要素
事件源.事件 = function(){ 事件处理程序 };
对象方法中的this永远指的是该方法所属的那个对象
6、常用属性（重点）
a常用标签属性
DOM对象的属性和HTML的标签属性几乎是一致的，常用的有src、title、className、href和style
b内部文本属性
innerHTML获取和设置标签中的内容，设置的内容会当作节点对象被解析到DOM树上
innerText获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版ff不支持）
textContent获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版IE不支持）
c常用表单属性
常见的表单元素属性有： type、value、checked、selected、disabled
type设置input元素的类型
value设置input元素的值
checked设置input元素是否选中
selected设置下拉列表select中的option是否被选中
disabled设置input元素是否被禁用
获取焦点事件是onfocus 失去焦点事件是onblur
d自定义属性--必须以data-开头
getAttribute() 获取标签属性
setAttribute() 设置标签属性
removeAttribute()移除标签属性
7、节点（重点）
childNodes //子节点
children //子元素
nextSibling //下一个兄弟节点
nextElementSibling //下一个兄弟元素 有兼容性问题
previousSibling//上一个兄弟节点
previousElementSibling //上一个兄弟元素 有兼容性问题
firstChild //第一个节点
firstElementChild //第一个子元素 有兼容性问题
lastChild //最后一个子节点
lastElementChild //最后一个子元素 有兼容性问题
parentNode //父节点 （一定是元素节点，所以无需处理）
8、样式属性
style属性是对象，style对象的属性是字符串
style只能获取和设置行内样式
JS中 - 不能作为标识符，涉及到计算的时候必须直接通过JS加样式
9、动态创建元素（掌握）
①插入和移除节点
在父元素中的最后追加子元素：father.appendChild(要追加的元素);
在父元素中的某个子元素前面插入子元素：father.insertBefore(要插入的元素,插到这个元素的前面);
从父元素中移除子元素：father.removeChild(要移除的子元素);
②js动态创建结构
方式一：直接在文档中书写 document.write(“内容”)
方式二：改变元素对象内部的HTML：innerHTML=”内容”
使用字符串或者数组 先拼接再用innerHTML去添加到页面
方式三：创建或克隆节点并追加，参数是一个布尔值 true表示深层复制 false是浅层复制
document.createElement()
document.cloneNode()
三、BOM
1、window.onload
加载完成事件
onload 加载完成，指的是页面所有资源都加载完成
涉及到图片内容的一定要写在onload里面
2、addLoadEvent
给同一个对象注册相同的事件会相互抵消，给window追加onload事件不会顶掉之前的函数
function addLoadEvent（fn） {
var oldOnload =window.onload;
//检查现在的window.onload是否绑定了事件
if (typeofoldOnLoad === "function") {//说明之前绑定了事件
window.onload =function () {
oldOnLoad();//之前的要执行
fn ();//传入的新的要绑定的将来也要执行
};
}else {
window.onload =fn();
}
}
3、open方法
①url
②windowName窗口名
_self 当前窗口
_black 新窗口
③窗口的一些属性（长、宽、背景）
4、close 方法
window.close 关闭当前窗口
win.close 关闭调用它的窗口
5、setTimeout
延时定时器
setTimeout（参1，参2）参1：回调函数，要执行的代码，参2：延迟的时间,毫秒
6、clearTimeout
（要清理的定时器）清理定时器
clearTimeout（）
var timerId = null;
var btn1 = document.getElementById("btn1");
var btn2 =document.getElementById("btn2");
btn1.onclick =function () {
timerId =setTimeout(function () {
console.log("嘣")
}，3000);
};
btn2.onclick =function () {
clearTimeout(timerId);
};
7、setInterval间歇定时器（重点）
setInterval（参1，参2）参1：回调函数，要执行的代码，参2：延迟的时间,毫秒
点击按钮，让按钮中的文字倒计时
var num = 5;
var timer = null;
btn.onclick =function () {
this.disabled =true;//1、禁用按钮
timer =setInterval(function () {//2、设置按钮的值
num--;
btn.value = num + "秒后可再次发送";//一定注意此时不能用this，定时器的回调函数是被window调用的
if (num === 0) {
clearInterval(timer);
btn.value = "点击发送验证码"；
btn.disable =false;//此时不需要再禁用了
num = 5;
}
},1000);
};
clearInterval(要清理的定时器) 清理间歇定时器
8、window的location对象（重点后期获取数据经常用到）
location.href ="要跳转的地址";
location.reload();让页面重新加载
location.hash; 锚点
location.host; 服务器
location.hostname; 服务器名
location.pathname
9、navigator对象（了解）
navigator.userAgent
10、history对象
history.forward(); 前进
history.back(); 后退
11、screen对象，屏幕对象（重点）
screen.width; 屏幕的宽度
screen.height; 屏幕的高度
screen.availWidth; 可用宽度
screen.availHeight;可用高度
12、date日期对象（掌握）
date.toString();Sat Jul 23 2016 15:47:38 GMT+0800 （中国标准时间）
date.valueOf();这是一个13位的数字，从1970-1-100:00:00:000 开始到现在的毫秒值，方便运算
var date =Date.now(); 返回数值，13位的数字
var date = +newDate (); 加了+号转换成13位数字，不加就是字符串同date.toString或console.log（date）;
可以接受三种参数：2003,10,1 日期的每一部分
"2003-10-1"字符串的日期格式
表示日期的毫秒形式 1128094003232
var date =Date.parse("2003-10-1"); 转化成毫秒形式，格式不对返回NaN
toDateString(); SatJul 23 2016
toTimrString();15:47:38 GMT+0800
toLocaleDateString();2016/7/23
toLocaleTimeString();下午3:52:11
getTine();返回毫秒数 getMilliseconds(); 当前的毫秒
getSecond(); 秒
getMinutes(); 分
getHours(); 时
getDay(); 返回周几0-6
getDate(); 返回当前月的第几天
getMonth(); 返回0-11
getFullYear(); 返回4位的年份 2016
四、DOM面试题
1、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
（1）创建新节点
createDocumentFragment()//创建一个DOM片段
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点
（2）添加、移除、替换、插入、复制
appendChild()//添加
removeChild()//移除
replaceChild()//替换
insertBefore()//在已有的子节点前插入一个新的子节点cloneNode()//复制
（3）查找
getElementsByTagName()//通过标签名称
getElementsByName()//通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
2、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个？
对象：Window、 document、 location、 screen、 history、 navigator 、data
方法：Alert()、 confirm() 、prompt()、 open() 、close()
3、document.ready和onload有什么区别？
document.ready和onload的区别——JavaScript文档加载完成事件。页面加载完成有两种事件:
一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
jQuery中$(function(){/*do something*/});他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
4、当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
5、window.location.search() 返回的是什么？
答：查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
返回值：?ver=1.0&id=timlq 也就是问号后面的！
6、简述列举文档对象模型DOM里document的常用的查找访问节点的方法做简单说明？
document.getElementById根据元素id查找元素
document.getElementByName根据元素name查找元素
document.getElementTagName根据指定的元素名查找元素
第5章网页特效
一、offset系列属性
1、offset-- 偏移量（重点）
相对于原来的位置移动了多少，用于获取元素真实的自身的位置和大小，是数值可以直接计算，是只读属性，无法设置
offsetWidth
offsetHeight =height + padding + border；
style 可以获取或者设置行内样式，是字符串而且有单位
offsetParent 距离自身最近的带有定位的父级，
如果父级没有定位继续往前找，直到找到body
parentNode 父节点，只和结构有关
offsetLeft 从自身的border的左侧到父级的padding左侧
2、Math对象
Math.abs();取绝对值
Math.round();就近取整 Math.round(-1.5)--> -1;
3、动画
原理：每次让对象向前移动一点，连起来形成动画，一秒25帧就有动画效果了
公式：对象当前位置 = 对象当前位置 + 每个时间段要移动的长度
leader = leader + step；
注意：
判断运动方向
一定要加定位
完善终点检测
终点清除定时器
手动设置对象位置到终点
调用开始先清理定时器，防止多次调用
动画函数的封装：
functionanimate(obj, target) {
clearInterval(obj.timer);
obj.timer =setInterval(function () {
var leader =obj.offsetLeft;
var step = 10;
step = leader if (Math.abs(target- leader) >= Math.abs(step)) { leader = leader +step; obj.style.left =leader + "px"; }else { obj.style.left =target + "px"; clearInterval(obj.timer); }}, 15);} 动画轮播图具体的思路： 1、要做事先找人 把所有能用到的标签全部获取到 2、动态生成结构：按钮li 2.1 根据ul 中的li 动态生成ol中的li，ul中有几个li 生成ol中几个li 2.2设置li中的文本，把li追加到ol中 2.3获取ol中的li 2.4根据第一张图，动态克隆，并追加到ul最后 3、鼠标经过按钮，移动ul到指定的位置 3.1鼠标经过按钮，按钮排他（干掉所有人，留下我自己） 3.2经过按钮，ul移动到指定位置 指定位置：-this.index * imgWidth和当前按钮的索引以及图片的宽度有关，向左移动是负数 ①设置索引②取图片的宽度③调用动画函数 4、鼠标点击箭头 4.1 显示出箭头 4.2 点击右箭头，把ul移动到指定位置 ①鼠标点击事件 ②ul移动到指定位置：-pic * imgWidth 和图片索引和图片宽度有关 ③判断图片移动到最后一张后（假的第一张），瞬间调到开头，然后做从第一张到第二张的动画 ul.style.left = 0;//瞬间移动到开头 pic = 0;//索引后归零，后续让ul从第一张渐渐移动到第二张 4.3点击左箭头 当图片移动到第一张后，瞬间跳到最后，然后做从最后一张到倒数第二张的动画 5、按钮也要跟着左右箭头移动 根据当前图片的索引，计算出下一个应该亮起的按钮的索引 干掉所有人、、留下相应的 6、添加自动滚动 每隔一秒播放下一张（让点击右箭头的事件每隔一秒执行一次） 鼠标放在图片上自动滚动停止，离开后继续自动滚动 鼠标经过图片清除自动滚动，离开时继续自动滚动 在图片自动滚动时，经过按钮放开后，图片会接着自动滚动时的顺序继续滚动，而不是从经过按钮的图片开始滚动：把记录显示按钮的索引变为当前按钮的索引 把记录显示图片的索引变为当前图片的索引 offset 元素自身的大小 scroll 元素内部内容的大小 scrollTop 顶部被卷去的内容的高度 scrollLeft 左侧被卷去的内容的宽度 onscroll 滚动事件 var scrollTop =window.pageYoffset || document.documentElement.scrollTop ||document.body.scrollTop || 0 document.body 获取的是body标签，是对象 document.head 获取的是head 标签，是对象 document.title 获取的是title 标签中的内容，是字符串 document 没有html 这个属性，html 标签是documentElement 封装一个函数，调用这个函数 .top 就可以获取被卷去的头部的高度 .left 就可以获取被卷去的左侧的宽度 function scroll() { var scrollTop =window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop || 0; var scrollLeft=window.pageXOffset || document.documentElement.scrollLeft ||document.body.scrollLeft || 0; var o = {}; o.top = scrollTop; o.left =scrollLeft; return o; } 缓动动画公式：step = (target -leader) / 10 leader = leader + step 缓动函数的封装：让任意对象移动到指定位置 function animate(obj, target){ clearInterval(obj.timer); obj.timer =setInterval(function(){ var leader =obj.offsetLeft; var step = (target -leader) / 10; step = step > 0 ?Math.ceil(step) : Math.floor(step); leader = leader +step; obj.style.left = leader + "px"; if (leader === target){ clearInterval(obj.timer); } },15); }; 访问属性的两种方式：obj.name、obj["name"] 获取计算后样式属性：window.getComputedStyle ie 6,7,8 :currentStyle function getStyle (obj,attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj,null)[attr]; } else {return obj.currentStyle[attr];}} 封装缓动框架 function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json){ //json {attr : taget} if (k === "opacity") { //opacity要特殊处理 //opacity没有单位参与运算自动转换成数值所以不用parsetInt //取值范围 0-1 0.1 0.33 33 为了让以前的计算公式生效要扩大100倍 var leader =getStyle(obj, k) * 100; var target =json[k] * 100; var step = (target - leader) / 10; step = step> 0 ? Math.ceil(step) : Math.floor(step); leader =leader + step; obj.style[k] =leader / 100; //opacity没有单位 } else if (k ==="zIndex") { obj.style.zIndex = json[k]; //层级不需要渐变直接设置即可 } else { var leader =parseInt(getStyle(obj, k)) || 0; var target =json[k]; var step =(target - leader) / 10; step = step> 0 ? Math.ceil(step) : Math.floor(step); leader =leader + step; obj.style[k] =leader + "px"; } if (leader != target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15); } //全部属性都到达目标值才能清空 function getStyle(obj, attr) { if(window.getComputedStyle) { returnwindow.getComputedStyle(obj, null)[attr]; } else { returnobj.currentStyle[attr]; } } 偏移offsetWidth:width + padding + border 卷曲scrollWidth: width + padding 不包含border 内部内容的大小 可视clientWidth: width + padding 不包含border function client() { return { width:window.innerWidth || document.documentElement.clientWidth ||document.body.clientWidth || 0, height :window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight || 0; } } window.onresize 窗体大小发生改变事件 a A zqQ ZQAZAzqqaaAq q Q qAA qqqqqqqqq window.onresize = function () { clearTimeout(); timer =setTimeout(responsive, 500) }; respinsive(); function responsive() { if(client()).width> 960){ document.body.style.backgroundColor= "red"; document.body.innerHTML= "computer"; } else if (client()).width > 640){ document.body.style.backgroundColor= "green"; .body.innerHTML ="tabletr"; }else { document.body.style.backgroundColor= "yellow"; document.body.innerHTML= "mobile"; }} my 要使用animate 中的代码，要先加载animate 方法：windo.scrollTo(x轴坐标，y轴坐标) 窗体滚动 1、实际上，事件发生的时候，是浏览器让我们注册的这个浏览器执行的，浏览器在调用这个函数的时候会传入一个参数 2、形参和实参可以不一致，如果传入了实参没有形参接收也不会出错，只是实参没有用 document.onclick =function (event) { var event = event|| window.event; }; clientX clientY 在浏览器上的位置 pageX pageY 在页面上的位置 page page 有兼容问题，client 没有，我们可以用client 来计算page = client + screen.left var pageX =event.pageX || event.clientX + document.documentElement.scrollLeft; var pageY =event.pageY || event.clientY + document.documentElement.scrollTop; screenX screenY 电脑屏幕 onmousedown 鼠标按下事件 onmouseup 鼠标弹起事件 onmousemove 鼠标移动事件 event.stopPropagation();停止传播，防止冒泡 event.cancelBubble 阻止冒泡 ie678 event.target 通过事件目标可以找到事件的源头 判断是否选中文字 var txt = window.getSelection ? window.getSelection().toString() :document.selection.createRange().text; 参1：要委托事件的父元素，参2：事件类型，参3：事件发生在哪些标签上，参4：发生事件后要执行的代码 绑定事件的两种方式： 1、普通事件 addEventListener(参1，参2，参3) 参1：事件的类型，参2：事件处理函数，参3：是否使用捕获 是否使用捕获：false 不使用捕获，是冒泡的顺序，从子级到父级 true 使用捕获，从父级到子级 解绑事件的两种方式： 直接顶掉 事件监听器的 声明和使用 var 变量名= new RegExp(/表达式/); var 变量名= /表达式/; 变量名可以是 regEx 常用方法，可用于检测传入的字符串是否符合该规则并返回布尔值 预定义类 . [^\n\r] 除了换行和回车之外的任意字符 \d [0-9] 数字字符digit \D [^0-9] 非数字字符 \w [a-zA-Z0-9_] 单词字符(所有的字母数字和_) word \W [^a-zA-Z0-9_] 非单词字符 \s [\f\r\n\t\v] 不可见字符 space-->空字符串、空格、换行 \S [^\f\r\n\t\v] 可见字符 转义符 \f 表示换页 form feed \t 表示水平制表符 table \v 表示垂直制表符 vertical table | 表示或， /f|boot/.test("foot");这个表达式表示的意思是 f或者 boot 只不过foot里面有了f所以会返回true 1.1.3字符类 @字符类 简单类[abc] 表示该位置可以出现的字符，/[abc]/.test("a");返回true，可以是a或b或c 负向类[^abc] 表示该位置不可以出现的字符 范围类[a-e] 表示该位置可以出现的字符的范围 组合类[a-xA-E0-9] 范围类的组合 @验证密码强度 边界量词括号 @边界 ^ 会匹配行或者字符串的起始位置 ^只有在[]内才表示非在外边表示开始 $ 会匹配行或字符串的结尾位置 ^$在一起表示必须是这个（精确匹配），必须是我要的那个 @量词 自定义出现的次数放在 {} 中 "*" 重复零次或多次 x>=0 "+" 重复一次或多次 x>=1 "?" 重复零次或一次 x=(0||1) {n} n次x=n {n,} 重复n次或更多 x>=n {n,m} 重复出现的次数比n多但比m少 n<=x<=m @括号总结 ()表示一组 []表示一个字符的位置 {}表示次数 常见项目的匹配 常见项目的匹配网上有很多（例如搜索常用正则表达式大全），无需记忆，能看懂即可 匹配国内电话号码：@验证座机 /^0\d{2,3}-\d{7,8}$/ 匹配姓名：@验证姓名/^[\u4e00-\u9fa5]{2,}$/ 匹配腾讯QQ号： /^[1-9]\d{4,10}$/ 匹配手机号： /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/ 匹配邮箱： /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ function check(inp, reg) { inp.onblur =function () { if(reg.test(this.value)){ this.nextSibling.innerHTML= "输入正确"; this.nextSibling.className= ""; } else { this.nextSibling.innerHTML= "输入不正确"; } }; } @replace() 方法 格式： 字符串对象.replace(正则式或字符串，替换的目标字符) 返回值: 替换后的新字符串 @封装自己的trim()方法 function trim(str) { returnstr.replace(/^\s+/g,"").replace(/\s+$/g,""); } ----->> function trim(str) { returnstr.replace(/^\s+|\s+$/g,""); } 键盘事件： onkeydown: 键盘按下，按着不放会一直执行 onkeyup: 键盘弹起 onkeypress: 键盘按下，用的是Ascll码 获取焦点： 检测按下的是哪一个键：e.keyCode 元素获取焦点：obj.focus(); 1、请谈下团购倒计时如何实现？ 团购倒计时页面端的效果比较好实现，主要是样式和时间的操作，重要的考虑时间要和服务器端同步，其实这个效果也可以基于服务器端推送技术来实现。 2、轮播图有哪几种？如何实现？ 纯CSS可以实现轮播图；JS实现轮播图；Boostrap 3、JavaScript的事件流模型都有什么，以及怎么阻止他们？ 1、原始事件模型普通的事件绑定，比如事件赋值，按钮上绑定事件等 2、DOM2事件模型 addEventListener("eventType"，"handler"，"true!false")； removeEventListner("eventType"，"handler"，"true!false")； 气泡模型（与ie有点区别），冒泡和捕获 3、IE模型气泡模型 attachEvent("eventType"，"handler") detachEvent("eventType"，"handler") 与dom2不同的是eventType有on前缀 4、什么是事件冒泡/捕获？ 事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，也就是子元素事件的触发会影响父元素的事件； 开关事件冒泡： A，开启事件冒泡：event.addEventListener(eventName，handler，false)； B，关闭事件冒泡：假设传统方式事件的返回值为e，就可以通过e.stopPropagation()来关闭事件冒泡； C ,return false; 同时具有阻止冒泡和阻止默认行为的功能 事件捕获：父元素的事件会影响子元素的事件； 开启事件捕获：event.addEventListener(eventName，handler，true) 5、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms 6、documen.write和innerHTML的区别? document.write只能重绘整个页面 jQuery的入口函数：$(function(){}); 或者 $(document).ready(function(){}); jQuery === $; $ 在jQuery中就是一个函数，根据传入参数类型的不同，分别进行不同的处理，来实现不同的功能 js入口函数指的是：window.onload =function() {}; jQuery对象和DOM对象的相互转换 $("#btn")本质上存储的就是DOM对象，所以可以使用[]的形式，来获取数组里面的元素 DOM对象此处指的是：使用js操作DOM返回的结果。 var btn =document.getElementById(“btnShow”); // btn就是一个DOM对象 jQkuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。 jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。 DOM对象转换成jQuery对象： var $btn1 = $(btn);// 此时就把DOM对象btn转换成了jQuery对象$btn1 // $(document）.ready(function(){}); // 调用入口函数 // 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready jQuery对象转换成DOM对象： // 第一种方式var btn1 = $btn[0];// 此时就把jQuery对象$btn转换成了DOM对象btn1 // 第二种方式var btn2 =$btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2 符号(名称) 说明 # Id选择器 . 类选择器 element 标签选择器 符号(名称) 说明 空格 后代选择器 > 子代选择器 one+two 选取所有one元素同辈的下一个元素two（如果有几个one，就有几个two，除非紧挨着one后面没有同级元素two） one~two 选取one元素同辈的two的所有元素 符号(名称) 说明 :first 选取第一个元素 :last 选取最后一个元素 :not(selector) 选取不是这个元素的其他元素 :eq(index) 选择索引号为index的一个元素，index从0开始 :odd 选择索引号为奇数的所有元素，index从0开始 :even 选择索引号为偶数的所有元素，index从0开始 :gt(index) 选取索引大于index的元素 :lt(index) 选取索引小于index的元素 :header 选取所有的标题元素，如h1,h2,h3 :animated 选取当前正在执行动画的所有元素 :focus 选取当前获取焦点的元素 符号(名称) 说明 find(selector) 查找指定元素的所有后代元素（子子孙孙） children() 查找指定元素的直接子元素（亲儿子元素） siblings() 查找所有兄弟元素（不包括自己） :parent() 查找父元素（亲的） :nth-child(index/even/odd/equation) 选取父元素下的第index个子元素或者奇偶元素，index从1算起 :first-child 获取个父元素的第一个子元素 :last-child 选取父元素的最后一个子元素 :eq(index) 查找指定元素的第index个元素， index是索引号，从0开始 index() 获取指定元素的索引号（从0开始的） prevAll() 获取指定元素之前的所有兄弟元素 nextAll() 获取指定元素之后的所有兄弟元素 内容过滤选择器 :contains(text) 选取含有文本内容为“text”的元素 :empty 选取不包含子元素或者文本的空元素 :has(selector) 选取含有选择器所匹配的元素的元素 :parent() 选取含有子元素或者文本的元素 可见性过滤选择器 :hidden 选取所有不可见的元素 :visible 选取所有可见的元素 属性过滤选择器 [ attribute ] 选取拥有此属性的元素 [ attribute = value ] 选取属性的值为value的元素 [ attribute != value ] 选取属性的值不等于value的元素 [ attribute ^= value ] 选取以属性的值value开始的元素 [ attribute $= value ] 选取属性的值以value结束的元素 [ attribute *= value ] 选取属性的值含有value的元素 [ attribute |= value ] 选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符‘-’）的元素 [ attribute ~= value ] 选取属性的值含有value的元素 检查某个元素是否存在的方法：if($("#tt").length> 0) {} .css() 作用：设置或获取元素的样式属性值 a设置单个样式：$(selector).css(“color”,“red”); b设置多个样式：$(selector).css({“color”:“red”, “font-size”: “30px”}) var cssStyle ={“color”: “red”, “font-size”: “30px”};$(selector).css(cssSTyle); c获取样式属性操作：$(selector).css(“font-size”); 添加类样式： $(selector).addClass(className)为指定元素添加类classNam 移除类样式： $(selector).removeClass(className)为指定元素移除类 className $(selector).removeClass();不指定参数，表示移除被选中元素的所有类 判断有没有类样式： $(selector).hasClass(calssName)判断指定元素是否包含类 className 切换类样式： $(selector).toggleClass(className)为指定元素切换类，该元素有类则移除，没有指定类则添加。 （1）show() 参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。 参数一可以是数值类型或者字符串类型 参数二表示：动画执行完后立即执行的回调函数 $(selector).show(2000,function() {}); hide方法作用：让匹配元素隐藏掉 （1）滑入动画效果（联想：生活中的卷帘门） 作用：让元素以下拉动画效果展示出来 $(selector).slideDown(speed,callback);默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp） （2）滑出动画效果 作用：让元素以上拉动画效果隐藏起来 $(selector).slideUp(speed,callback); （3）滑入滑出切换动画效果 $(selector).slideToggle(speed,callback); （1）淡入动画效果 作用：让元素以淡淡的进入视线的方式展示出来 $(selector).fadeIn(speed, callback); （2）淡出动画效果 $(selector).fadeOut(1000);作用：让元素以渐渐消失的方式隐藏起来 （3）淡入淡出切换动画效果 作用：通过改变不透明度，切换匹配元素的显示或隐藏状态 $(selector).fadeToggle('fast',function(){}); （4）改变不透明度到某个值 与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！ 作用：调节匹配元素的不透明度 $(selector).fadeTo(1000, .5); 参1：时长，参2：不透明值、 0全透，1全不透 有规律的体现： jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px;width:300px; opacity:.4;}这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。 注意：所有能够执行动画的属性必须只有一个数字类型的值。 $(selector).animate({params},speed,callback); 作用：执行一组CSS属性的自定义动画 参1：要执行动画的CSS属性（必选） 参2：执行动画时长（可选） 参3：动画执行完后立即执行的回调函数（可选） $(selector).stop(clearQueue,jumpToEnd); 参1：是否清空所有的后续动画 参2：是否立即执行完当前正在执行的动画 解释： 当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。 如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。 注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。 （1）动态创建元素 varspanNode = $(“我是一个span元素”); （2）添加元素append() 参数jQuery对象 $(selector).append($node);//在$(selector)中追加$node 作用：在被选元素的最后一个子元素（或内容）后面插入内容（页面中存在或者创建出来的元素都可以） 如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新 的位置。如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去。 （3）$(selector).append('二、scroll系列属性（重点）
1、页面滚动坐标（重点）
2、封装自己的scroll
3、缓动动画
三、client系列
1、client可视（重点）
2、网页可视区兼容性写法的封装（所有的浏览器）
3、响应式布局
4、函数节流
四、事件对象
1、事件对象的兼容性写法
2、三个重要坐标（重点）
3、事件委托
4、事件监听器（重点）
五、正则表达式
1、通过构造函数定义
2、通过直接量定义(只能使用一次)
exp.test("要检测的字符串") true、false 可以匹配数字，字母不行，只要有想要的（数字）就是true3、封装自己的trim方法
六、网页特效面试题
innerHTML可以重绘页面的一部分
第6章jQuery
一、jQuery入口函数和js入口函数的区别
二、jQuery选择器（重点）
1、基本选择器
2、层级选择器
3、基本过滤选择器
4、筛选选择器（方法）
三、样式操作 （重点）
1、样式属性操作
2、类操作
四、jQuery动画（掌握）
1、隐藏显示动画
2、滑入滑出动画
3、淡入淡出动画
4、自定义动画
5、stop()停止动画
五、jQuery节点操作
1、操作元素节点（掌握）
①appendTo()
$(selector).appendTo(node);把$(selector)追加到node中去
②prepend()
$(selector).prepend(node);作用：在元素的第一个子元素前面追加内容或节点
③after()
$(selector).after(node);作用：在被选元素之后，作为兄弟元素插入内容或节点
④before()
$(selector).before(node);作用：在被选元素之前，作为兄弟元素插入内容或节点
（4）html创建元素（推荐使用，重点）
作用：①设置内容，参数为普通字符串
②创建元素，如果传入的是符合html规则的字符串，就会创建出相应的元素
$(selector).html(‘传智播客’);// 动态创建元素
③获取内容$(selector).html();// 获取html内容，有什么返回什么
调用这个方法，首先会清空原来的内容，然后再设置新的内容
（5）清空元素
$(selector).empty();//清空指定元素的所有子元素（光杆司令）// 没有参数
$(selector).html(“”);//“自杀” 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();
（6）复制元素
(selector).clone();// 复制$(selector)所匹配到的元素// 返回值为复制的新元素
总结：推荐使用html(“”)方法来创建元素或者html(“”)清空元素
2、操作form表单
（1）属性操作
①设置属性：
$(selector).attr("title",''美女");参1：要设置的属性名称，参2：属性值，参2不存在返回属性对应的值
$(selector).prop();参2不存在返回false
用法和attr 一样，设置input和button的disabled属性，以及checkbox的checked属性、selected属性，这几种动态改变的属性必须用prop
②获取属性：
$(selector).attr(“title”);参数：要获取的属性的名称，返回要获取的属性对应的值
此时，返回指定属性的值
③移除属性：
$(selector).removeAttr(“title”);// 参数为：要移除的属性的名称
④：selected 选择selected中被选中的元素
注意：设置selected、checked、disabled要使用.prop()方法。
（2）值和内容
①val()方法：
作用：设置或返回表单元素的值，例如：input,select,textarea的值
$(selector).val();//获取匹配元素的值，只匹配第一个元素
$(selector).val(“具体值”);// 设置所有匹配到的元素的值
另外：val()能使select、checkBox、radio相应的选项被选中 val(' 上海 ');
②text() 方法:
作用：设置或获取匹配元素的文本内容
$(selector).text();//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串）
$(selector).text(“我是内容”);//参数表示要设置的文本内容，会清空原有内容
3、尺寸位置操作
（1）高度操作height() ：作用：设置或获取匹配元素的高度值
$(selector).height(200);//带参数表示设置高度 $(selector).height();//不带参数获取高度
（2）宽度操作width() ：作用：设置或获取匹配元素的宽度值
(selector).width(200);//带参数表示设置宽度 $(selector).width();//不带参数获取宽度
（3）坐标值操作
①offset() 作用：获取或设置元素相对于文档左上角的位置
$(selector).offset();//无参数表示获取，返回值为：{top:num,left:num}，值是相对于document的位置
$(selector).offset({left:100,top: 150});// 设置，参数数值类型不带单位
如果没有定位，会设置position：relative，如果有非static，则不会设置，但会把原来的值给覆盖掉
注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative
②scrollTop() 作用：获取或者设置元素垂直方向滚动的位置
$(selector).scrollTop();//无参数表示获取偏移
$(selector).scrollTop(100);//有参数表示设置偏移，参数为数值类型
对scrollTop的理解：
垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度。
如果滚动条在最上方没有滚动或者当前元素没有出现滚动条，那么这个距离为0
③scrollLeft() 作用：获取或者设置元素水平方向滚动的位置
$(selector).scrollLeft(100);
六、jQuery事件机制（重点）
jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。
1、事件绑定
简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on【重点】
1、简单事件绑定：VC
click() 单击事件
mouseenter() 鼠标进入事件
mouseleave() 鼠标离开事件
dbclick() 双击事件
change() 改变事件，如：文本框值改变，下拉列表值改变等
focus() 获得焦点事件
blur() 失去焦点事件
keydown() 键盘按下事件
2、on方式
语法：$(selector).on(events,[selector],[data],function());
// 第一个参数：events，绑定事件的类型
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用(用处不大)
// 第四个参数：function()，事件处理函数
绑定多个事件
$(selector).on(“clickmouseenter”, function(){});
表示给$(selector)匹配的元素绑定单击和鼠标进入事件
2、事件解绑off
off解绑on方式绑定的事件（重点）。
$(selector).off(); 解绑匹配元素的所有事件
$(selector).off(“click”);解绑匹配元素的所有click事件,自身的和动态的。
$(selector).off(“click”,“**”);参1：要解绑的事件，参2：解绑动态创建的事件。自身绑定的事件还在
3、事件触发
事件触发的时候只会触发当前元素被执行的事件，单击按钮触发div的单击事件
1、$(selector).click();简单事件触发，触发 click事件
2、trigger()方法触发事件，触发浏览器的默认行为
$("button").on("click",function(){
$("div").trigger("click");
});
$(selector).trigger(“click”);参数：要触发事件的名称
3、triggerHandler触发事件响应方法，不触发浏览器行为
$(selector).triggerHandler(“focus”);比如:文本框获得焦点是浏览器的默认行为
4、事件对象
$(function(event){}): event 事件对象
event.data 传递给事件处理程序的额外数据
event.delegateTarget 代理绑定事件的元素
event.currentTarget 绑定事件的元素，等同于this，this：哪个元素触发的事件，this就指向这个元素
event.target 触发事件的元素，不一定===this
event.pageX 鼠标相对于页面的位置
event.clientX 距离浏览器的位置
event.screenX 相对于电脑屏幕
event.offsetX 相对于定位的父元素，或者body
event.stopPropagation()；阻止事件冒泡
event.preventDefault(); 阻止浏览器默认行为
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码
事件执行的顺序：
如果是单击的按钮，首先会触发按钮的单击事件，然后再触发div的单击事件
阻止事件冒泡：
event.stopPropagation()；阻止事件冒泡
return false; 同时具有阻止冒泡和阻止默认行为的功能
5、链式编程
链式编程代码示例：
$(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“内容”);
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的一次状态
6、隐式迭代
// 设置操作$(“div”).css(“color”,“red”);
// 获取操作$(“div”).css(“color”);// 返回第一个元素的值
1、隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，不用我们再进行循环
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
2、each方法
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
$(selector).each(function(index,element){});参1:当前元素在所有匹配元素中的索引号,参2：当前元素（DOM对象）
7、多库共存（了解）
此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
// 模拟另外的库使用了 $ 这个变量
// 此时，就与jQuery库产生了冲突
var $ = { name : “itecast” };
解决方式：$.noConflict();
// 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法
8、jQuery插件机制
第三方插件
jQuery.color.js
animate()自定义动画：不支持背景的动画效果
animate动画支持的属性列表
使用步骤：
1.引入jQuery文件
2.引入插件
3.使用插件
全局jQuery函数扩展方法
$.pluginName =function() {};
jQuery对象扩展方法
$.fn. pluginName =function() {};
七、jQuery面试题
25、简述在jQuery中.eq()和.get()的异同？
相同：
get() ：取得其中一个匹配的元素。数字序号表示取得第几个匹配的元素
eq()：获取第N个元素，下标都是从0开始，用法基本相同。
不同：
eq返回的是一个jquery对象；返回的是jQuery对象，就可以继续调用其他方法。
get返回的是一个html 对象数组；不能调用jQuery的其他方法；
2、jQuery各个版本有哪些差异？
目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
3、原生JS的window.onload与Jquery的$(document).ready(function(){})，$(function(){})有什么不同？
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
1.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个$(document).ready()可以同时编写多个，并且都可以得到执行
2.简化写法
window.onload没有简化写法$(document).ready(function(){})可以简写成$(function(){})；
4、Jquery.on这个方法怎么看？
答： jQuery.on()方法可以给匹配元素（可以是多个）绑定一个或多个函数, off 可以解除绑定。
5、Jquery与jQueryUI有啥区别？
*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。 提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
6、描述一下.attr()和.prop()方法的区别。
.attr()方法是操作属性节点，.prop()方法是操作获取到的对应js对象的属性。在遇到要获取或设置checked、selected、readonly和disabled等属性时，用prop方法显然更好。.prop()方法更高效，因为.attr()方法要访问DOM。
第7章HTML5+CSS3
一、HTML5新增标签和重新定义的标签
1、结构标签 （重点）
块级元素，有意义的div
2、多媒体标签（掌握）
3、Web 应用标签（了解）
表示主题结束，是一条水平线
表示小字体，例如注释或者法律条款