python基础整理3——前端
html概述和基本结构
html概述
HTML意思是超文本标记语言javascript
html基本结构
一个html的基本结构以下：css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的总体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它通常做为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
HTML文档类型
目前经常使用的两种文档类型是xhtml 1.0和html5html
两种文档的区别
一、文档声明和编码声明前端
二、html5新增了标签元素以及元素属性html5
html文档规范
xhtml制定了文档的编写规范，html5可部分遵照，也可所有遵照，看开发要求。java
一、全部的标签必须小写node
二、全部的属性必须用双引号括起来jquery
三、全部标签必须闭合css3
四、img必需要加alt属性(对图片的描述)git
html注释：
html文档代码中能够插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
html标签特色：
html的标签大部分是成对出现的,少许是单个出现的，特定标签之间能够相互嵌套，嵌套就是指一个标签里面能够包含一个或多个其余的标签，包含的标签和父标签能够是同类型的，也能够是不一样类型的：
<!-- 成对出现的标签 -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>
<!-- 单个出现的标签 -->
<br />
<img src="..." />
<input type="..." />
<!-- 标签之间的嵌套 -->
<p>
<span>...</span>
<a href="...">...</a>
</p>
<div>
<h3>...</h3>
<div>
<span>...</span>
<p>...</p>
</div>
</div>
html标题
经过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签能够在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，好比说： <h1>用做主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，因此网页上使用标题是很重要的。
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
html段落、换行与字符实体
<p>标签订义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
html换行
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，若是真想换行，能够在代码的段落中插入<br />来强制换行
html字符实体
代码中成段的文字，若是文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，若是想显示多个空格，可使用空格的字符实体
html块、含样式的标签
html块
一、div标签 块元素，表示一块内容，没有具体的语义。
二、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
一、em标签 行内元素，表示语气中的强调词
二、i标签 行内元素，本来没有语义，w3c强加了语义，表示专业词汇
三、b标签 行内元素，本来没有语义，w3c强加了语义，表示文档中的关键字或者产品名
四、strong标签 行内元素，表示很是重要的内容
html图像、绝对路径和相对路径
html图像
<img>标签能够在网页上插入一张图片，它是独立使用的标签，经过“src”属性定义图片的地址，经过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件，须要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件自己去定位被引用的文件地址
绝对地址在总体文件迁移时会由于磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
-
“ ./ ” 表示当前文件所在目录下，好比：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时能够省略。
-
“ ../ ” 表示当前文件所在目录下的上一级目录，好比：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
html连接
html连接
<a>标签能够在网页上定义一个连接地址，经过src属性定义跳转的地址，经过title属性定义鼠标悬停时弹出的提示文字框。
定义页面内滚动跳转
页面内定义了“id”或者“name”的元素，能够经过a标签连接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，不然页面不会滚动。
<a href="#mao1">标题一</a> ...... ...... <h3 id="mao1">跳转到的标题</h3>
html列表
有序列表
在网页上定义一个有编号的内容列表能够用<ol>、<li>配合使用来实现，代码以下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在网页上生成的列表，每条项目上会按一、二、3编号，有序列表在实际开发中较少使用。
无序列表
在网页上定义一个无编号的内容列表能够用<ul>、<li>配合使用来实现，代码以下：
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不一样浏览器上显示效果不一样，因此通常会用样式去掉默认的小图标，若是须要图标，能够用样式自定义图标，从而达到在不一样浏览器上显示的效果相同,实际开发中通常用这种列表。
定义列表
定义列表一般用于术语的定义。<dl>标签表示列表的总体。<dt>标签订义术语的题目。<dd>标签是术语的解释。一个<dl>中能够有多个题目和解释，代码以下：
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
html表格
table经常使用标签
一、table标签：声明一个表格
二、tr标签：定义表格中的一行
三、td和th标签：定义一行中的一个单元格，td表明普通单元格，th表示表头单元格
table经常使用属性：
一、border 定义表格的边框
二、cellpadding 定义单元格内内容与边框的距离
三、cellspacing 定义单元格与单元格之间的距离
四、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
五、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
六、colspan 设置单元格水平合并
七、rowspan 设置单元格垂直合并
传统布局：
传统的布局方式就是使用table来作总体页面的布局，布局的技巧概括为以下几点：
一、定义表格宽高，将border、cellpadding、cellspacing所有设置为0
二、单元格里面嵌套表格
三、单元格中的元素和嵌套的表格用align和valign设置对齐方式
四、经过属性或者css样式设置单元格中元素的样式
css基本语法及页面引用
css基本语法
css的定义方法是：
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是但愿设置的样式属性每一个属性有一个或多个值。代码示例：
div{ width:100px; height:100px; color:red }
css页面引入方法：
一、外联式：经过link标签，连接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
二、嵌入式：经过style标签，在网页上建立嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
三、内联式：经过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; color:red ">......</div>
css文本设置
经常使用的应用文本的css样式：
-
color 设置文字的颜色，如： color:red;
-
font-size 设置文字的大小，如：font-size:12px;
-
font-family 设置文字的字体，如：font-family:'微软雅黑';
-
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
-
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照以下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
-
line-height 设置文字的行高，如：line-height:24px;
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
css颜色表示法
css颜色值主要有三种表示方法：
一、颜色名表示，好比：red 红色，gold 金色
二、rgb表示，好比：rgb(255,0,0)表示红色
三、16进制数值表示，好比：#ff0000 表示红色，这种能够简写成 #f00
css选择器
经常使用的选择器有以下几种：
一、标签选择器
标签选择器，此种选择器影响范围大，建议尽可能应用在层级选择器中。
举例：
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
二、id选择器
经过id名来选择元素，元素的id名称不能重复，因此一个样式设置项只能对应于页面上一个元素，不能复用，id名通常给程序使用，因此不推荐使用id做为选择器。
举例：
#box{color:red}
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不容许应用此样式 -->
三、类选择器
经过类名来选择元素，一个类可应用于多个元素，一个元素上也可使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
四、层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减小命名，同时也能够经过层级，防止命名冲突。
举例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
五、组选择器
多个选择器，若是有一样的样式设置，可使用组选择器。
举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
六、伪类及伪元素选择器
经常使用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们能够经过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
CSS盒子模型
盒子模型解释
元素在页面中显示成一个方块，相似一个盒子，CSS盒子模型就是使用现实中盒子来作比喻，帮助咱们设置元素对应的样式。盒子模型示意图以下：
把元素叫作盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置边框
设置一边的边框，好比顶部边框，能够按以下设置：
border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线，经常使用的有：solid(实线) dashed(虚线) dotted(点线); */
上面三句能够简写成一句：
border-top:10px solid red;
设置其它三个边的方法和上面同样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边若是设置同样，能够将四个边的设置合并成一句：
border:10px solid red;
设置内间距padding
设置盒子四边的内间距，可设置以下：
padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /* 设置左边内间距30px */ padding-right:40px; /* 设置右边内间距40px */ padding-bottom:50px; /* 设置底部内间距50px */
上面的设置能够简写以下：
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左 四个方向的内边距值。 */
padding后面还能够跟3个值，2个值和1个值，它们分别设置的项目以下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
margin相关技巧
一、设置元素水平居中： margin:x auto;
二、margin负值让元素位移及边框合并
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法以下：
一、使用这种特性
二、设置一边的外边距，通常设置margin-top
三、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，致使内部的盒子margin-top设置失败，解决方法以下：
一、外部盒子设置一个边框
二、外部盒子设置 overflow:hidden
三、使用伪元素类：
.clearfix:before{
content: '';
display:table;
}
css元素溢出
当子元素的尺寸超过父元素的尺寸时，须要设置父元素显示溢出的子元素的方式，设置的方法是经过overflow属性来设置。
overflow的设置项：
一、visible 默认值。内容不会被修剪，会呈如今元素框以外。
二、hidden 内容会被修剪，而且其他内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
三、scroll 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。
四、auto 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
五、inherit 规定应该从父元素继承 overflow 属性的值。
块元素、内联元素、内联块元素
元素就是标签，布局中经常使用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。
块元素
块元素，也能够称为行元素，布局中经常使用的标签如：div、p、ul、li、h1~h六、dl、dt、dd等等都是块元素，它在布局中的行为：
- 支持所有的样式
- 若是没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行、即便设置了宽度
内联元素
内联元素，也能够称为行内元素，布局中经常使用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
- 支持部分样式（不支持宽、高、margin上下、padding上下）
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素能够用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式
解决内联元素间隙的方法
一、去掉内联元素之间的换行
二、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为相似这种元素，可是也归类于内联元素，咱们能够用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
- 支持所有样式
- 若是没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素能够用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式
这三种元素，能够经过display属性来相互转化，不过实际开发中，块元素用得比较多，因此咱们常常把内联元素转化为块元素，少许转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
display属性
display属性是用来设置元素的类型及隐藏的，经常使用的属性有：
一、none 元素隐藏且不占位置
二、block 元素以块元素显示
三、inline 元素之内联元素显示
四、inline-block 元素之内联块元素显示
浮动
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行以内从左到右排列，先写的先排列，后写的排在后面，每一个盒子都占据本身的位置。
浮动特性
一、浮动元素有左浮动(float:left)和右浮动(float:right)两种
二、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
三、相邻浮动的块元素能够并在一行，超出父级宽度就换行
四、浮动让行内元素或块元素自动转化为行内块元素
五、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，造成文字饶图的效果
六、父元素内总体浮动的元素没法撑开父元素，须要清除浮动
七、浮动元素之间没有垂直margin的合并
清除浮动
- 父级上增长属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清浮动样式类，clearfix
-
定位
关于定位
咱们可使用css的position属性来设置元素的定位类型，postion的设置项以下：- relative 生成相对定位元素，元素所占据的文档流的位置不变，元素自己相对文档流的位置进行偏移
- absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，能够理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，若是找不到，则相对于body元素进行定位。
- fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，能够理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
- static 默认值，没有定位，元素出如今正常的文档流中，至关于取消定位属性或者不设置定位属性
- inherit 从父元素继承 position 属性的值
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素定位元素层级
定位元素是浮动的正常的文档流之上的，能够用z-index属性来设置元素的层级典型定位布局
一、固定在顶部的菜单
二、水平垂直居中的弹框
三、固定的侧边的工具栏
四、固定在底部的按钮background属性
属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它能够分解成以下几个设置项：- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定仍是随着页面滚动条滚动
经常使用图片格式
总结
在网页制做中，如何选择合适的图片格式呢？
一、网页制做中，若是要使用不透明背景的图片，就使用jpg图片；若是要使用透明或者半透明背景的图片，就使用png图片；
二、制做网页图标时候，若是图标含多种颜色，可使用gif或png图片；若是图标是单色，并且要求有很好的显示效果，可使用svg；若是是动画图标，可使用gif。
CSS权重
CSS权重指的是样式的优先级，有两条或多条样式做用于一个元素，权重高的那条样式对元素起做用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
能够把样式的应用方式分为几个等级，按照等级来计算权重
一、!important，加在样式属性值后，权重值为 10000
二、内联样式，如：style=””，权重值为1000
三、ID选择器，如：#content，权重值为100
四、类，伪类和属性选择器，如： content、:hover 权重值为10
五、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
六、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
CSS3新增选择器
一、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
二、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
三、E:first-child：匹配元素类型为E且是父元素的第一个子元素
四、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
五、E:only-child：匹配元素类型为E且是父元素中惟一的子元素
六、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
七、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
八、E:first-of-type：匹配父元素的第一个类型为E的子元素
九、E:last-of-type：匹配父元素的最后一个类型为E的子元素
十、E:only-of-type：匹配父元素中惟一子元素是E的子元素
十一、E:empty 选择一个空的元素
十二、E:enabled 可用的表单控件
1三、E:disabled 失效的表单控件
1四、E:checked 选中的checkbox
1五、E:not(s) 不包含某元素
1六、E:target 对应锚点的样式
CSS3圆角、阴影、rgba
CSS3圆角
设置某一个角的圆角，好比设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
CSS3阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
rgba（新的颜色值表示法）
一、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
二、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
CSS3 transition动画
一、transition-property 设置过渡的属性，好比：width height background-color
二、transition-duration 设置过渡的时间，好比：1s 500ms
三、transition-timing-function 设置过渡的运动方式
- linear 匀速
- ease 开始和结束慢速
- ease-in 开始是慢速
- ease-out 结束时慢速
- ease-in-out 开始和结束时慢速
- cubic-bezier(n,n,n,n)
- 好比：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲线设置网站：https://matthewlein.com/ceaser/
四、transition-delay 设置动画的延迟
五、transition: property duration timing-function delay 同时设置四个属性
CSS3 transform变换
一、translate(x,y) 设置盒子位移
二、scale(x,y) 设置盒子缩放
三、rotate(deg) 设置盒子旋转
四、skew(x-angle,y-angle) 设置盒子斜切
五、perspective 设置透视距离
六、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
七、translateX、translateY、translateZ 设置三维移动
八、rotateX、rotateY、rotateZ 设置三维旋转
九、scaleX、scaleY、scaleZ 设置三维缩放
十、tranform-origin 设置变形的中心点
十一、backface-visibility 设置盒子背面是否可见
CSS3 animation动画
一、@keyframes 定义关键帧动画
二、animation-name 动画名称
三、animation-duration 动画时间
四、animation-timing-function 动画曲线
- linear 匀速
- ease 开始和结束慢速
- ease-in 开始是慢速
- ease-out 结束时慢速
- ease-in-out 开始和结束时慢速
- steps 动画步数
五、animation-delay 动画延迟
六、animation-iteration-count 动画播放次数 n|infinite
七、animation-direction
- normal 默认动画结束不返回
- Alternate 动画结束后返回
八、animation-play-state 动画状态
- paused 中止
- running 运动
九、animation-fill-mode 动画先后的状态
- none 不改变默认行为
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
- backwards 在 animation-delay 所指定的一段时间内，在动画显示以前，应用开始属性值（在第一个关键帧中定义）
- both 向前和向后填充模式都被应用
十、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
CSS浏览器前缀
浏览器样式前缀
为了让CSS3样式兼容，须要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
自动添加浏览器前缀
目前的情况是，有些CSS3属性须要加前缀，有些不须要加，有些只须要加一部分，这些加前缀的工做能够交给插件来完成，好比安装： autoprefixer
Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 经过此工具能够按照最新的前缀使用状况给样式自动加前缀。
HTML5新结构标签
h5新增的主要语义化标签以下：
一、header 页面头部、页眉
二、nav 页面导航
三、article 一篇文章
四、section 文章中的章节
五、aside 侧边栏
六、footer 页面底部、页脚
页面使用标签布局示意图：
HTML5 音频和视频
html5增长了audio和video标签，提供了在页面上插入音频和视频的标准方法。
audio标签
支持格式：ogg、wav、mp3
对应属性：
一、autoplay 自动播放
二、controls 显示播放器
三、loop 循环播放
四、preload 预加载
五、muted 静音
source标签的做用是提供多个媒体文件地址，若是一个地址的文件不兼容，就使用下一个地址。
video标签
支持格式：ogg、mp四、webM
属性：
一、width
二、height
三、Poster
可选第三方播放器：
一、cyberplayer
二、tencentPlayer
三、youkuplayer
Viewport 视口
视口是移动设备上用来显示网页的区域，通常会比移动设备可视区域大，宽度多是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了不这种状况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，能够用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区同样的大小。
背景图强制改变大小，可使用background新属性
background新属性
background-size:
- length：用长度值指定背景图像大小。不容许负值。
- percentage：用百分比指定背景图像大小。不容许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到彻底覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
背景图强制改变大小，可使用background新属性
background新属性
background-size:
- length：用长度值指定背景图像大小。不容许负值。
- percentage：用百分比指定背景图像大小。不容许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到彻底覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
背景图强制改变大小，可使用background新属性
background新属性
background-size:
- length：用长度值指定背景图像大小。不容许负值。
- percentage：用百分比指定背景图像大小。不容许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到彻底覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
移动端页面布局
PC及移动端页面适配方法
设备屏幕有多种不一样的分辨率，页面适配方案有以下几种：
一、全适配：流体布局+响应式布局
二、移动端适配：
- 流体布局+少许响应式
- 基于rem的布局
- 弹性盒模型
流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线没法用百分比，可使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
calc()
能够经过计算的方式给元素加尺寸，好比： width：calc(25% - 4px);
box-sizing
一、content-box 默认的盒子尺寸计算方式
二、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
响应式布局
响应式布局就是使用媒体查询的方式，经过查询浏览器宽度，不一样的宽度应用不一样的样式块，每一个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面能够适配多种终端屏幕（pc、平板、手机）。
相应布局的伪代码以下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基于rem的布局
首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其余的元素相关尺寸设置用rem，这样，全部元素都有了统一的参照标准，改变html文字的大小，就会改变全部元素用rem设置的尺寸大小。
cssrem安装
cssrem插件能够动态地将px尺寸换算成rem尺寸
下载本项目，好比：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。
配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。
弹性盒模型布局
一、容器属性
display : flex
声明使用弹性盒布局
flex-direction : row | row-reverse | column | column-reverse
肯定子元素排列的方向
flex-wrap : nowrap | wrap | wrap-reverse
元素超过父容器尺寸时是否换行
flex-flow : flex-direction | flex-wrap
同时设置flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸肯定以后，用此属性来设置flex-direction定义方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸肯定以后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
设置多行子元素在行方向上的对齐方式
二、条目属性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同时设置flex-grow 和 flex-shrink 以及 flex-basis
flex-grow ： number
表示的是当父元素有多余的空间时，这些空间在不一样子元素之间的分配比例
flex-shrink： number
当父元素的空间不足时，各个子元素的尺寸缩小的比例
flex-basis ：length | percentage | auto | content
用来肯定弹性条目的初始主轴尺寸。
align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆写父元素指定的对齐方式
order : integer
改变条目在容器中的出现顺序
JavaScript
JavaScript介绍
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，须要插件)等。
前端三大块
一、HTML：页面结构
二、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
三、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript嵌入页面的方式
一、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
二、页面script标签嵌入
<script type="text/javascript">
var a = '你好！';
alert(a);
</script>
三、外部引入
<script type="text/javascript" src="js/index.js"></script>
javascript语句与注释
一、一条javascript语句应该以“;”结尾
<script type="text/javascript">
var a = 123;
var b = 'str';
function fn(){
alert(a);
};
fn();
</script>
二、javascript注释
<script type="text/javascript">
// 单行注释
var a = 123;
/*
多行注释
一、...
二、...
*/
var b = 'str';
</script>
变量
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量须要用关键字 'var'
var a = 123; var b = 'asd'; //同时定义多个变量能够用","隔开，公用一个‘var’关键字 var c = 45,d='qwe',f='68';
变量类型
5种基本数据类型：
number、string、boolean、undefined、null
1种复合类型：
object
变量、函数、属性、函数参数命名规范
一、区分大小写
二、第一个字符必须是字母、下划线（_）或者美圆符号（$）
三、其余字符能够是字母、下划线、美圆符或数字
获取元素方法一
可使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，而后将它赋值给一个变量，好比：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
上面的语句，若是把javascript写在元素的上面，就会出错，由于页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1尚未加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>
操做元素属性
获取的页面元素，就能够对页面元素的属性进行操做，属性的操做包括属性的读和写。
操做属性的方法
一、“.” 操做
二、“[ ]”操做
属性写法
一、html的属性和js里面属性写法同样
二、“class” 属性写成 “className”
三、“style” 属性里面的属性，有横杠的改为驼峰式，好比：“font-size”，改为”style.fontSize”
经过“.”操做属性：
经过“.”操做属性：
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var val = oInput.value;
var typ = oInput.type;
var nam = oInput.name;
var links = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = val;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
经过“[ ]”操做属性：
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var val1 = oInput1.value;
var val2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[val1] = val2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
innerHTML
innerHTML能够读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var txt = oDiv.innerHTML;
alert(txt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
......
<div id="div1">这是一个div元素</div>
函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function aa(){
alert('hello!');
}
// 函数执行
aa();
</script>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，而后执行阶段，在编译阶段会将function定义的函数提早，而且将var定义的变量声明提早，将它赋值为undefined。
<script type="text/javascript">
aa(); // 弹出 hello！
alert(bb); // 弹出 undefined
function aa(){
alert('hello!');
}
var bb = 123;
</script>
提取行间事件
在html行间调用的事件能够提取到javascript中调用，从而作到结构与行为分离。
<!--行间事件调用函数 -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
匿名函数
定义的函数能够不给名称，这个叫作匿名函数，能够将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
函数传参
<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>
函数'return'关键字
函数中'return'关键字的做用：
一、返回函数执行的结果
二、结束函数的运行
三、阻止默认行为
<script type="text/javascript">
function add(a,b){
var c = a + b;
return c;
alert('here!');
}
var d = add(3,4);
alert(d); //弹出7
</script>
条件语句
经过条件来控制程序的走向，就须要用到条件语句。
运算符
一、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
二、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
三、条件运算符：==、===、>、>=、<、<=、!=、&&(并且)、||(或者)、!(否)
if else
switch
数组及操做方法
数组就是一组数据的集合，javascript中，数组里面的数据能够是不一样类型的。
定义数组的方法
//对象的实例建立 var aList = new Array(1,2,3); //直接量建立 var aList2 = [1,2,3,'asd'];
操做数组中数据的方法
一、获取数组的长度：aList.length;
var aList = [1,2,3,4]; alert(aList.length); // 弹出4
二、用下标操做数组的某个数据：aList[0];
var aList = [1,2,3,4]; alert(aList[0]); // 弹出1
三、join() 将数组成员经过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
四、push() 和 pop() 从数组最后增长成员或删除成员
var aList = [1,2,3,4]; aList.push(5); alert(aList); //弹出1,2,3,4,5 aList.pop(); alert(aList); // 弹出1,2,3,4
五、unshift()和 shift() 从数组前面增长成员或删除成员
var aList = [1,2,3,4]; aList.unshift(5); alert(aList); //弹出5,1,2,3,4 aList.shift(); alert(aList); // 弹出1,2,3,4
六、reverse() 将数组反转
var aList = [1,2,3,4]; aList.reverse(); alert(aList); // 弹出4,3,2,1
七、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4]; alert(aList.indexOf(1));
八、splice() 在数组中增长或删除成员
var aList = [1,2,3,4]; aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，而后在此位置增长'7,8,9'三个元素 alert(aList); //弹出 1,2,7,8,9,4
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']]; alert(aList[0][1]); //弹出2;
获取元素的第二种方法
document.getElementsByTagName(''),获取的是一个选择集，不是数组，可是能够用下标的方式操做选择集里面的dom元素。
Javascript组成
一、ECMAscript javascript的语法（变量、函数、循环语句等语法）
二、DOM 文档对象模型 操做html和css的方法
三、BOM 浏览器对象模型 操做浏览器的一些方法
字符串处理方法
一、字符串合并操做：“ + ”
二、parseInt() 将数字字符串转化为整数
三、parseFloat() 将数字字符串转化为小数
四、split() 把一个字符串分隔成字符串组成的数组
五、charAt() 获取字符串中的某一个字符
六、indexOf() 查找字符串是否含有某字符
七、substring() 截取字符串 用法： substring(start,end)（不包括end）
八、toUpperCase() 字符串转大写
九、toLowerCase() 字符串转小写
调试程序的方法
一、alert
二、console.log
三、document.title
定时器
定时器在javascript中的做用
一、制做动画
二、异步操做
三、函数缓冲与节流
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
变量做用域
变量做用域指的是变量的做用范围，javascript中的变量分为全局变量和局部变量。
一、全局变量：在函数以外定义的变量，为整个页面公用，函数内部外部均可以访问。
二、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部没法访问。
封闭函数
封闭函数是javascript中匿名函数的另一种写法，建立一个一开始就执行而不用命名的函数。
通常定义的函数和执行函数：
function changecolor(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
}
changecolor();
封闭函数：
(function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
})();
还能够在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
闭包
什么是闭包
函数嵌套函数，内部函数能够引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回
function aaa(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
}
var ccc = aaa(2);
ccc();
ccc();
改写成封闭函数的形式：
var ccc = (function(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
})(2);
ccc();
ccc();
用处
一、将一个变量长期驻扎在内存当中，可用于循环中存索引值
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++)
{
(function(i){
aLi[i].onclick = function(){
alert(i);
}
})(i);
}
}
</script>
......
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
二、私有变量计数器，外部没法访问，避免全局变量的污染
<script type="text/javascript">
var count = (function(){
var a = 0;
function add(){
a++;
return a;
}
return add;
})()
count();
count();
var nowcount = count();
alert(nowcount);
</script>
内置对象
一、document
document.referrer //获取上一个跳转页面的地址(须要服务器环境)
二、location
window.location.href //获取或者重定url地址 window.location.search //获取地址参数部分 window.location.hash //获取页面锚点或者叫哈希值
三、Math
Math.random 获取0-1的随机数 Math.floor 向下取整 Math.ceil 向上取整
面向对象
面向过程与面向对象编程
一、面向过程：全部的工做都是现写现用。
二、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只须要关注功能的运用，而不须要这个功能的具体实现过程。
javascript对象
将相关的变量和函数组合成一个总体，这个总体叫作对象，对象中的变量叫作属性，变量中的函数叫作方法。javascript中的对象相似字典。
建立对象的方法
一、单体
<script type="text/javascript">
var Tom = {
name : 'tom',
age : 18,
showname : function(){
alert('个人名字叫'+this.name);
},
showage : function(){
alert('我今年'+this.age+'岁');
}
}
</script>
二、工厂模式
<script type="text/javascript">
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.showname = function(){
alert('个人名字叫'+this.name);
};
o.showage = function(){
alert('我今年'+this.age+'岁');
};
o.showjob = function(){
alert('个人工做是'+this.job);
};
return o;
}
var tom = Person('tom',18,'程序员');
tom.showname();
</script>
二、构造函数
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showname = function(){
alert('个人名字叫'+this.name);
};
this.showage = function(){
alert('我今年'+this.age+'岁');
};
this.showjob = function(){
alert('个人工做是'+this.job);
};
}
var tom = new Person('tom',18,'程序员');
var jack = new Person('jack',19,'销售');
alert(tom.showjob==jack.showjob);
</script>
三、原型模式
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.showname = function(){
alert('个人名字叫'+this.name);
};
Person.prototype.showage = function(){
alert('我今年'+this.age+'岁');
};
Person.prototype.showjob = function(){
alert('个人工做是'+this.job);
};
var tom = new Person('tom',18,'程序员');
var jack = new Person('jack',19,'销售');
alert(tom.showjob==jack.showjob);
</script>
四、继承
<script type="text/javascript">
function fclass(name,age){
this.name = name;
this.age = age;
}
fclass.prototype.showname = function(){
alert(this.name);
}
fclass.prototype.showage = function(){
alert(this.age);
}
function sclass(name,age,job)
{
fclass.call(this,name,age);
this.job = job;
}
sclass.prototype = new fclass();
sclass.prototype.showjob = function(){
alert(this.job);
}
var tom = new sclass('tom',19,'全栈工程师');
tom.showname();
tom.showage();
tom.showjob();
</script>
新选择器
一、document.querySlector()
二、document.querySlectorAll()
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jQuery
jquery介绍
jquery加载
将获取元素的语句写到页面头部，会由于元素尚未加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
能够简写为：
<script type="text/javascript">
$(function(){
......
});
</script>
jquery选择器
jquery用法思想一
选择某个网页元素，而后对它进行某种操做
jquery选择器
jquery选择器能够快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$(document) //选择整个文档对象
$('li') //选择全部的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的全部li下的span元素
对选择集进行修饰过滤(相似CSS伪类)
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个以后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
对选择集进行函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的全部子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
jquery样式操做
jquery用法思想二
同一个函数完成取值和赋值
操做行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素，获取信息获取的是第一个，好比：$("div").css("width")，获取的是第一个div的width。
操做样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
jquery属性操做
一、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
二、text() 取出或设置text内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');
三、attr() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
绑定click事件
给元素绑定click事件，能够用以下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展现或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，全部jquery对象的方法能够连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的全部兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
jquery动画
经过animate方法能够设置元素某属性值上的动画，能够设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数能够写成数字表达式：
$('#div1').animate({ width:'+=100', height:300 },1000,swing,function(){ alert('done!'); });
尺寸相关、滚动事件
一、获取和设置元素的尺寸
width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
二、获取元素相对页面的绝对位置
offse()
三、获取可视区高度
$(window).height();
四、获取页面高度
$(document).height();
五、获取页面滚动距离
$(document).scrollTop(); $(document).scrollLeft();
六、页面滚动事件
$(window).scroll(function(){ ...... })
jquery事件
事件函数列表：
blur() 元素失去焦点 focus() 元素得到焦点 change() 表单元素的值发生变化 click() 鼠标单击 dblclick() 鼠标双击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 mouseup() 松开鼠标 mousedown() 按下鼠标 mousemove() 鼠标在元素内部移动 keydown() 按下键盘 keypress() 按下键盘 keyup() 松开键盘 load() 元素加载完毕 ready() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 select() 用户选中文本框中的内容 submit() 用户递交表单 toggle() 根据鼠标点击的次数，依次运行多个函数 unload() 用户离开页面
绑定事件的其余方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消绑定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
// $(this).unbind();
$(this).unbind('mouseover');
});
});
主动触发与自定义事件
主动触发
可以使用jquery对象上的trigger方法来触发对象上绑定的事件。
自定义事件
除了系统事件外，能够经过bind方法自定义事件，而后用tiggle方法触发这些事件。
//给element绑定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//触发hello事件
element.trigger("hello");
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（好比单击onclick事件），若是此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，若是没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象全部同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的做用
事件冒泡容许多个操做被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可让你在对象层的不一样级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不须要的，须要阻止掉，经过 event.stopPropagation() 来阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默认行为
阻止右键菜单
$(document).contextmenu(function(event) {
event.preventDefault();
});
合并阻止操做
实际开发中，通常把阻止冒泡和阻止默认行为合并起来写，合并写法能够用
// event.stopPropagation(); // event.preventDefault(); // 合并写法： return false;
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，经过判断事件来源的子集，执行相应的操做，事件委托首先能够极大减小事件绑定次数，提升性能；其次可让新加入的子元素也能够拥有相同的操做。
通常绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
取消事件委托
// ev.delegateTarge 委托对象 $(ev.delegateTarge).undelegate(); // 上面的例子可以使用 $list.undelegate();
jquery元素节点操做
建立节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点
一、append()和appendTo()：在现存元素的内部，从后面插入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
二、prepend()和prependTo()：在现存元素的内部，从前面插入元素
三、after()和insertAfter()：在现存元素的外部，从后面插入元素
四、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点
$('#div1').remove();
滚轮事件与函数节流
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可使用jquery的滚轮事件插件jquery.mousewheel.js。
函数节流
javascript中有些事件的触发频率很是高，好比onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，能够巧妙地使用定时器来减小触发的次数，实现函数节流。
json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是相似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
javascript对象字面量：
var tom = {
name:'tom',
age:18
}
json格式的数据：
{
"name":'tom',
"age":18
}
与json对象不一样的是，json数据格式的属性名称须要用双引号引发来，用单引号或者不用引号会致使读取数据错误。
json的另一个数据格式是数组，和javascript中的数组字面量相同。
['tom',18,'programmer']
Ajax
ajax与jsonp
ajax技术的目的是让javascript发送http请求，与后台通讯，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通讯。ajax通讯的过程不会影响后续javascript的执行，从而实现异步。
同步和异步
现实生活中，同步指的是同时作几件事情，异步指的是作完一件过后再作另一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
局部刷新和无刷新
ajax能够实现局部刷新，也叫作无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax能够本身发送http请求，不用经过浏览器的地址栏，因此页面总体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就作到了页面局部刷新。
同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其余域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：
XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
$.ajax使用方法
经常使用参数：
一、url 请求地址
二、type 请求方式，默认是'GET'，经常使用的还有'POST'
三、dataType 设置返回的数据格式，经常使用的是'json'格式，也能够设置为'html'
四、data 设置发送给服务器的数据
五、success 设置请求成功后的回调函数
六、error 设置请求失败后的回调函数
七、async 设置是否异步，默认值是'true'，表示异步
之前的写法：
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
......
},
error:function(){
alert('服务器超时，请重试！');
}
});
新的写法(推荐)：
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
......
})
.fail(function() {
alert('服务器超时，请重试！');
});
jsonp
ajax只能请求同一个域下的数据或资源，有时候须要跨域请求数据，就须要用到jsonp技术，jsonp能够跨域请求数据，它的原理主要是利用了script标签能够跨域连接资源的特性。
jsonp的原理以下：
<script type="text/javascript">
function aa(dat){
alert(dat.name);
}
</script>
<script type="text/javascript" src="....../js/data.js"></script>
页面上定义一个函数，引用一个外部js文件，外部js文件的地址能够是不一样域的地址，外部js文件的内容以下：
aa({"name":"tom","age":18});
外部js文件调用页面上定义的函数，经过参数把数据传进去。
正则表达式
一、什么是正则表达式：
能让计算机读懂的字符串匹配规则。
二、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
三、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符，除了换行符‘\n’和回车符‘\r’
\1 重复子项
四、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或屡次（至少出现一次）
* 出现零次或屡次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
五、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
六、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
七、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接中止
i： ingore case，忽略大小写，默认大小写敏感
m： multiple lines，多行搜索（更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不只仅在整个字符串的开头和结尾匹配）
八、经常使用函数
一、test
用法：正则.test(字符串) 匹配成功，就返回真，不然就返回假
二、search
用法：字符串.search(正则) 匹配成功，返回位置，不然返回-1
三、match
用法： 字符串.match(正则)；匹配成功，就返回匹配成功的数组，不然就返回null
四、replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
本地存储
本地存储分为cookie，以及新增的localStorage和sessionStorage
一、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过时时间以前有效。
jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 获取cookie
$.cookie('mycookie');
二、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在全部同源窗口中共享，数据一直有效，除非人为删除，可做为长期数据。
//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';
//获取：
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat");
三、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。
localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，能够将数据更新的通知监听者，Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage，只能用cookie。
jqueryUI
jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。咱们能够直接用它来构建具备很好交互性的web应用程序。
jqueryUI 网址
http://jqueryui.com/
经常使用jqueryUI插件：
Draggable
一、设置数值的滑动条
二、自定义滚动条
移动端js事件
移动端的操做方式和PC端是不一样的，移动端主要用手指操做，因此有特殊的touch事件，touch事件包括以下几个事件：
一、touchstart: //手指放到屏幕上时触发
二、touchmove: //手指在屏幕上滑动式触发
三、touchend: //手指离开屏幕时触发
四、touchcancel: //系统取消touch事件的时候触发，比较少用
移动端通常有三种操做，点击、滑动、拖动，这三种操做通常是组合使用上面的几个事件来完成的，全部上面的4个事件通常不多单独使用，通常是封装使用来实现这三种操做，可使用封装成熟的js库。
zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着相似的api。 若是你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的相似jquery的js库。
zepto官网：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含不少模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，若是还须要其余的模块，能够自定义构建。
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/
touch模块封装了针对移动端经常使用的事件，可以使用此模块进行移动端特定效果开发，这些事件有：
- tap 元素tap的时候触发，此事件相似click，可是比click快。
- longTap 当一个元素被按住超过750ms触发。
- swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过期触发。(可选择给定的方向)
-
swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，通常用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。
2.x版本中文网址：http://2.swiper.com.cn/
3.x版本中文网地址：http://www.swiper.com.cn/swiper使用方法：
<script type="text/javascript" src="js/swiper.min.js"></script> ...... <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> ...... <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', initialSlide :1, paginationClickable: true, loop: true, autoplay:3000, autoplayDisableOnInteraction:false }); </script>swiper使用参数：
一、initialSlide：初始索引值，从0开始
二、direction：滑动方向 horizontal | vertical
三、speed：滑动速度，单位ms
四、autoplay：设置自动播放及播放时间
五、autoplayDisableOnInteraction：用户操做swipe后是否还自动播放，默认是true，再也不自动播放
六、pagination：分页圆点
七、paginationClickable：分页圆点是否点击
八、prevButton：上一页箭头
九、nextButton：下一页箭头
十、loop：是否首尾衔接
十一、onSlideChangeEnd：回调函数，滑动结束时执行swiper制做实例：
一、swiper制做移动端焦点图实例
二、swiper制做整页滚动效果 -
bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。
bootstrap中文网址：http://www.bootcss.com/
bootstrap 容器
- container-fluid 流体
- container
- 1170
- 970
- 750
- 100%
bootstrap 栅格系统
bootstrap将页面横向分为12等分，按照12等分定义了适应不一样宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
一、col-lg-
二、col-md-
三、col-sm-
四、col-xs-bootstrap响应式查询区间：
一、大于等于768
二、大于等于992
三、大于等于1200bootstrap 表单
一、form 声明一个表单域
二、form-inline 内联表单域
三、form-horizontal 水平排列表单域
四、form-group 表单组、包括表单文字和表单控件
五、form-control 文本输入框、下拉列表控件样式
六、checkbox checkbox-inline 多选框样式
七、radio radio-inline 单选框样式
八、input-group 表单控件组
九、input-group-addon 表单控件组物件样式 十、input-group-btn 表单控件组物件为按钮的样式
十、form-group-lg 大尺寸表单
十一、form-group-sm 小尺寸表单bootstrap 按钮
一、btn 声明按钮
二、btn-default 默认按钮样式
三、btn-primay
四、btn-success
五、btn-info
六、btn-warning
七、btn-danger
八、btn-link
九、btn-lg
十、btn-md
十一、btn-xs
十二、btn-block 宽度是父级宽100%的按钮
1三、active
1四、disabled
1五、btn-group 定义按钮组bootstrap 图片
img-responsive 声明响应式图片
bootstrap 隐藏类
一、hidden-xs
二、hidden-sm
三、hidden-md
四、hidden-lgbootstrap 字体图标
经过字体代替图标，font文件夹须要和css文件夹在同一目录
bootstrap 下拉菜单
一、dropdown-toggle
二、dropdown-menubootstrap 选项卡
一、nav
二、nav-tabs
三、nav-pills
四、tab-contentbootstrap 导航条
一、navbar 声明导航条
二、navbar-default 声明默认的导航条样式
三、navbar-inverse 声明反白的导航条样式
四、navbar-static-top 去掉导航条的圆角
五、navbar-fixed-top 固定到顶部的导航条
六、navbar-fixed-bottom 固定到底部的导航条
七、navbar-header 申明logo的容器
八、navbar-brand 针对logo等固定内容的样式
十一、nav navbar-nav 定义导航条中的菜单
十二、navbar-form 定义导航条中的表单
1三、navbar-btn 定义导航条中的按钮
1四、navbar-text 定义导航条中的文本
九、navbar-left 菜单靠左
十、navbar-right 菜单靠右bootstrap 模态框
一、modal 声明一个模态框
二、modal-dialog 定义模态框尺寸
三、modal-lg 定义大尺寸模态框
四、modal-sm 定义小尺寸模态框
五、modal-header
六、modal-body
七、modal-footerbootstrap 响应式专题网站实例
-
less、sass、stylus
它们是三种相似的样式动态语言，属于css预处理语言，它们有相似css的语法，为css赋予了动态语言的特性、如变量、继承、运算、函数等。这么作是为了css的编写和维护。
它们使用的文件分别是：.less、.scss、*.styl,这些文件是不能再网页上直接使用的，最终要编译成css文件来使用，编译的方法有软件编译，或者用nodejs程序。
less、sass编译软件：
http://koala-app.com/index-zh.htmlless中文网址：http://lesscss.cn/
less语法：
一、注释
// 不会被编译的注释 /* 会被编译的注释 */二、变量
@w:200px; .box{ width:@w; height:@w; background-color:red; }三、混合
.border{ border:1px solid #ddd; } .box(@w:100px,@h:50px,@bw:1px){ width:@w; height:@h; border:@bw solid #ddd; } .box{ .border; background-color:red; }四、匹配模式
.p(r){ postion:relative; } .p(a){ postion:absolute; } .p(f){ postion:fixed; } .box{ .p(f); }五、运算
@w:300px; .box{ width:@w+20; }四、嵌套
.list{ li{ ... } a{ ... &:hover{ ... } } span{ ... } }五、导入
// 导入common.less,导入a.css文件 @import "common"; @import (less) "a.css";
-
前端自动化
Node.js
Node.js能够理解为是一门后端脚本语言，使用了和JavaScript相同的语法，会使用JavaScript的程序员能很快上手node.js、nodjs在处理高并发方面性能卓越，目前许多公司都在使用nodejs做为后端数据服务和前端开发的中间层。
node.js的中文网站：https://nodejs.org/zh-cn/
前端自动化
前端开发的流程愈来愈复杂，其中有代码的合并和压缩、图片的压缩；对less、sass的预处理；文件操做等，这些工做是重复乏味的，为了优化开发流程，提升工做效率，前端自动化工具就出现了，自动化工具能够经过配置，自动完成这些工做。
grunt、gulp
grunt和gulp是使用node.js编写的，前端首选的自动化工具，gulp在书写配置上比grunt更简洁，运行的性能更高，gulp逐渐成为主流。
gulp的使用
gulp使用步骤： 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 gulp网站：http://gulpjs.com/
经常使用gulp插件：
压缩js代码（gulp-uglify）
less的编译（gulp-less）
css的压缩 （gulp-minify-css）
自动添加css3前缀（gulp-autoprefixer）
文件更名字 (gulp-rename) -
前端性能优化
从用户访问资源到资源完整的展示在用户面前的过程当中，经过技术手段和优化策略，缩短每一个步骤的处理时间从而提高整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，全部前端性能优化很重要。
前端性能优化分为以下几个方面：
1、代码部署：
一、代码的压缩与合并
二、图片、js、css等静态资源使用和主站不一样域名地址存储，从而使得在传输资源时不会带上没必要要的cookie信息。
三、使用内容分发网络 CDN
四、为文件设置Last-Modified、Expires和Etag
五、使用GZIP压缩传送
六、权衡DNS查找次数(使用不一样域名会增长DNS查找)
七、避免没必要要的重定向(加"/")2、编码
html：
一、使用结构清晰，简单，语义化标签
二、避免空的src和href
三、不要在HTML中缩放图片css：
一、精简css选择器 二、把CSS放到顶部
三、避免@import方式引入样式
四、css中使用base64图片数据取代图片文件，减小请求数，在线转base64网站：http://tool.css-js.com/base64.html
五、使用css动画来取代javascript动画
六、使用字体图标,图标库网站：http://fontawesome.io/icons/，在线制做网站：www.iconfont.cn
七、使用css sprite
八、使用svg图形
九、避免使用CSS表达式a {star : expression(onfocus=this.blur)}十、避免使用滤镜
javascript：
一、减小引用库的个数二、使用requirejs或seajs异步加载js三、JS放到页面底部引入四、避免全局查找五、减小属性查找六、使用原生方法七、用switch语句代替复杂的if else语句八、减小语句数，好比说多个变量声明能够写成一句九、使用字面量表达式来初始化数组或者对象十、使用DocumentFragments或innerHTML取代复杂的元素注入十一、使用事件代理(事件委托)十二、避免屡次访问dom选择集1三、高频触发事件设置使用函数节流，如：onmousemove、onmouseover1四、使用Web Storage缓存数据1五、使用Array的join方法来代替字符串的“+”链接(先将要链接的字符串放进数组)
-
- 1. 前端基础整理
- 2. Python 基础知识整理－3 （bytes-strings）
- 3. Python前端基础
- 4. Web前端基础知识整理（一）
- 5. day49学习整理-前端基础-html
- 6. 前端面试基础整理
- 7. 前端基础知识整理（一）
- 8. 前端基础概念的整理
- 9. 前端基础资料整理
- 10. 前端基础整理-MVVM相关
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
- 1. 前端基础整理
- 2. Python 基础知识整理－3 （bytes-strings）
- 3. Python前端基础
- 4. Web前端基础知识整理（一）
- 5. day49学习整理-前端基础-html
- 6. 前端面试基础整理
- 7. 前端基础知识整理（一）
- 8. 前端基础概念的整理
- 9. 前端基础资料整理
- 10. 前端基础整理-MVVM相关