前端——基础
Posted siplips
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端——基础相关的知识，希望对你有一定的参考价值。
html html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写 意思是超文本标记语言， 超文本指的是超链接， 标记指的是标签 html注释 <!-- 这是一段注释 --> html标题标签 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> html段落标签、换行标签与字符实体 html段落标签 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网 页可以从一个网页链接跳转到另外一个网页。</p> html换行标签 插入<br />来强制换行 html字符实体 空格的字符实体： “<”和“>”的字符实体： < 和 > html块标签、含样式的标签 html块标签 1、<div> 标签 块元素，表示一块内容，没有具体的语义。 2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。 含样式和语义的标签 1、<em> 标签 行内元素，表示语气中的强调词 2、<i> 标签 行内元素，表示专业词汇 3、<b> 标签 行内元素，表示文档中的关键字或者产品名 4、<strong> 标签 行内元素，表示非常重要的内容 语义化的标签 语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。 html图像标签、绝对路径和相对路径 html图像标签 <img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有： ?src属性 定义图片的引用地址 ?alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要 <img src="images/pic.jpg" alt="产品图片" /> 绝对路径和相对路径 绝对地址：相对于磁盘的位置去定位文件的地址 相对地址：相对于引用文件本身去定位被引用的文件地址 绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件， 相对路径就没有这个问题。 html链接标签 ?href属性 定义跳转的地址 ?title属性 定义鼠标悬停时弹出的提示文字框 ?target属性 定义链接窗口打开的位置 ?target="_self" 缺省值，新页面替换原来的页面，在原来位置打开 ?target="_blank" 新页面会在新开的一个浏览器窗口打开 html列表标签 有序列表 <ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol> 无序列表 <ul> <li><a href="#">新闻标题一</a></li> <li><a href="#">新闻标题二</a></li> <li><a href="#">新闻标题三</a></li> </ul> 定义列表 <h3>前端三大块</h3> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl> html表单 <form>标签 定义整体的表单区域 ?action属性 定义表单数据提交地址 ?method属性 定义表单提交的方式，一般有“get”方式和“post”方式 <label>标签 为表单元素定义文字标注 <input>标签 定义通用的表单元素 ?type属性?type="text" 定义单行文本输入框 ?type="password" 定义密码输入框 ?type="radio" 定义单选框 ?type="checkbox" 定义复选框 ?type="file" 定义上传文件 ?type="submit" 定义提交按钮 ?type="reset" 定义重置按钮 ?type="button" 定义一个普通按钮 ?type="image" 定义图片作为提交按钮，用src属性定义图片地址 ?type="hidden" 定义一个隐藏的表单域，用来存储值 ?value属性 定义表单元素的值 ?name属性 定义表单元素的名称，此名称是提交数据时的键名 <textarea>标签 定义多行文本输入框 <select>标签 定义下拉表单元素 <option>标签 与<select>标签配合，定义下拉表单元素中的选项 注册表单实例 <form action="http://www..." method="get"> <p> <label>姓名：</label><input type="text" name="username" /> </p> <p> <label>密码：</label><input type="password" name="password" /> </p> <p> <label>性别：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>爱好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片：</label> <input type="file" name="person_pic"> </p> <p> <label>个人描述：</label> <textarea name="about"></textarea> </p> <p> <label>籍贯：</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <!-- input类型为submit定义提交按钮 还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如： <input type="image" src="xxx.gif"> --> <input type="reset" name="" value="重置"> </p> </form> html表格 1、<table>标签：声明一个表格，它的常用属性如下： ?border属性 定义表格的边框，设置值是数值 ?cellpadding属性 定义单元格内容与边框的距离，设置值是数值 ?cellspacing属性 定义单元格与单元格之间的距离，设置值是数值 ?align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right 2、<tr>标签：定义表格中的一行 3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下： ?align 设置单元格中内容的水平对齐方式,设置值有：left | center | right ?valign 设置单元格中内容的垂直对齐方式 top | middle | bottom ?colspan 设置单元格水平合并，设置值是数值 ?rowspan 设置单元格垂直合并，设置值是数值 页面布局概述 布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种： 1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。 2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。 CSS css基本语法及页面引用 css基本语法 选择器 { 属性:值; 属性:值; 属性:值;} /* css注释 ctrl+shift+"/" */ 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 设置不加粗 ?line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px; 行高示例图片 ?font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑‘; ?text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 ?text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 行高示例图片 ?text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 css颜色表示法 css颜色值主要有三种表示方法： 1、颜色名表示，比如：red 红色，gold 金色 2、rgb表示，比如：rgb(255,0,0)表示红色 3、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> 伪类及伪元素选择器 .box1:hover{color:red} .box2:before{content:‘行首文字‘;} .box3:after{content:‘行尾文字‘;} <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div> CSS盒子模型 把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。 设置宽高 width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */ 设置边框 设置一边的边框，比如顶部边框，可以按如下设置： 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‘就是外边距设置方法。 盒模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的真实尺寸</title> <style type="text/css"> .box01{width:50px;height:50px;background-color:gold;} .box02{width:50px;height:50px;background-color:gold;border:50px solid #000} .box03{width:50px;height:50px;background-color:gold;border:50px solid #000;padding: 50px;} </style> </head> <body> <div class="box01">1</div> <br /> <div class="box02">2</div> <br /> <div class="box03">3</div> </body> </html> 盒模型使用技巧及相关问题 margin相关技巧 1、设置元素水平居中： margin:x auto; 2、margin负值让元素位移及边框合并 外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 解决方法如下： 1、使用这种特性 2、设置一边的外边距，一般设置margin-top 3、将元素浮动或者定位 margin-top 塌陷 在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败 解决方法如下： 1、外部盒子设置一个边框 2、外部盒子设置 overflow:hidden 3、使用伪元素类： .clearfix:before{ content: ‘‘; display:table; } css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置 overflow的设置项： 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。 2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。 3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 5、inherit 规定应该从父元素继承 overflow 属性的值。 块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： ?支持全部的样式 ?如果没有设置宽度，默认的宽度为父级宽度100% ?盒子占据一行、即使设置了宽度 内联元素 内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为： ?支持部分样式（不支持宽、高、margin上下、padding上下） ?宽高由内容决定 ?盒子并在一行 ?代码换行，盒子之间会产生间距 ?子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式 解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 内联块元素 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为： ?支持全部样式 ?如果没有设置宽高，宽高由内容决定 ?盒子并在一行 ?代码换行，盒子会产生间距 ?子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。 这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。 display属性 display属性是用来设置元素的类型及隐藏的，常用的属性有： 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 3、inline 元素以内联元素显示 4、inline-block 元素以内联块元素显示 浮动 浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动 7、浮动元素之间没有垂直margin的合并 清除浮动 父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐） 使用成熟的清浮动样式类，clearfix .clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;} 清除浮动的使用方法 .con2{... overflow:hidden} 或者 <div class="con2 clearfix"> 定位 文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置 关于定位 使用css的position属性来设置元素的定位类型，postion的设置项如下： ?relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 ?absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。 ?fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。 ?static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。 ?inherit 从父元素继承 position 属性的值。 定位元素的偏移 定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值 定位元素层级 定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级 .box01{ ...... position:absolute; /* 设置了绝对定位 */ left:200px; /* 相对于参照元素左边向右偏移200px */ top:100px; /* 相对于参照元素顶部向下偏移100px */ z-index:10 /* 将元素层级设置为10 */ } 定位元素特性 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素 前端女侠-博客园 background属性 属性解释 background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项： ?background-color 设置背景颜色 ?background-image 设置背景图片地址 ?background-repeat 设置背景图片如何重复平铺 ?background-position 设置背景图片的位置 ?background-attachment 设置背景图片是固定还是随着页面滚动条滚动 实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。 HTML5与CSS3 CSS权重 CSS权重 CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式 权重的等级 可以把样式的应用方式分为几个等级，按照等级来计算权重 1、!important，加在样式属性值后，权重值为 10000 2、内联样式，如：style=””，权重值为1000 3、ID选择器，如：#content，权重值为100 4、类，伪类和属性选择器，如： content、:hover 权重值为10 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0 权重的计算实例 实例一： <style type="text/css"> div{ color:red !important; } </style> ...... <div style="color:blue">这是一个div元素</div> <!-- 两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000， 所以文字的最终颜色为red --> 实例二： <style type="text/css"> #content div.main_content h2{ color:red; } #content .main_content h2{ color:blue; } </style> ...... <div id="content"> <div class="main_content"> <h2>这是一个h2标题</h2> </div> </div> <!-- 第一条样式的权重计算： 100+1+10+1，结果为112； 第二条样式的权重计算： 100+10+1，结果为111； h2标题的最终颜色为red --> CSS3新增选择器 元素选择器 E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 E:first-child：匹配元素类型为E且是父元素的第一个子元素 E:last-child：匹配元素类型为E且是父元素的最后一个子元素 E > F E元素下面第一层子集 E ~ F E元素后面的兄弟元素 E + F 紧挨着的后面的兄弟元素 <style type="text/css"> .list div:nth-child(2){ background-color:red; } </style> ...... <div class="list"> <h2>1</h2> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <!-- 第2个子元素div匹配 --> 属性选择器 E[attr] 含有attr属性的元素 E[attr=‘ok‘] 含有attr属性的元素且它的值为“ok” E[attr^=‘ok‘] 含有attr属性的元素且它的值的开头含有“ok” E[attr$=‘ok‘] 含有attr属性的元素且它的值的结尾含有“ok” E[attr*=‘ok‘] 含有attr属性的元素且它的值中含有“ok” <style type="text/css"> div[data-attr=‘ok‘]{ color:red; } </style> ...... <div data-attr="ok">这是一个div元素</div> CSS3圆角、rgba CSS3圆角 设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px; 同时分别设置四个角： border-radius:30px 60px 120px 150px; 设置四个圆角相同： border-radius:50%; rgba（新的颜色值表示法） 盒子透明度表示法 rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度 .box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); } CSS3 transition动画 1、transition-property 设置过渡的属性，比如：width height background-color 2、transition-duration 设置过渡的时间，比如：1s 500ms 3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动) 4、transition-delay 设置动画的延迟 5、transition: property duration timing-function delay 同时设置四个属性 CSS3 transform变换 1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg) 设置盒子旋转 4、skew(x-angle,y-angle) 设置盒子斜切 5、perspective 设置透视距离 6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示 7、translateX、translateY、translateZ 设置三维移动 8、rotateX、rotateY、rotateZ 设置三维旋转 9、scaleX、scaleY、scaleZ 设置三维缩放 10、tranform-origin 设置变形的中心点 11、backface-visibility 设置盒子背面是否可见 CSS3 animation动画 1、@keyframes 定义关键帧动画 2、animation-name 动画名称 3、animation-duration 动画时间 4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数) 5、animation-delay 动画延迟 6、animation-iteration-count 动画播放次数 n|infinite 7、animation-direction 动画结束后是否反向还原 normal|alternate 8、animation-play-state 动画状态 paused(停止)|running(运动) 9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用) 10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性 CSS3 浏览器前缀 浏览器样式前缀 为了让CSS3样式兼容，需要将某些样式加上浏览器前缀 -ms- 兼容IE浏览器 -moz- 兼容firefox -o- 兼容opera -webkit- 兼容chrome 和 safari div { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); } 自动添加浏览器前缀 目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer 可以在Sublime text中通过package control 安装 autoprefixer Autoprefixer在Sublime text中的设置 preferences/key Bindings-User { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } Preferences>package setting>AutoPrefixer>Setting-User { "browsers": ["last 7 versions"], "cascade": true, "remove": true } last 7 versions：最新的浏览器的7个版本 cascade：缩进美化属性值 remove：是否去掉不必要的前缀 HTML5新增标签 新增语义标签 1、<header> 页面头部、页眉 2、<nav> 页面导航 3、<article> 一篇文章 4、<section> 文章中的章节 5、<aside> 侧边栏 6、<footer> 页面底部、页脚 音频视频 1、<audio> 2、<video> PC端兼容h5的新标签的方法，在页面中引入以下js文件: <script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script> HTML5 新增表单控件 新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索 <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type="email" name="" required><br><br> <label>日期:</label><input type="date" name=""><br><br> <label>时间:</label><input type="time" name=""><br><br> <label>星期:</label><input type="week" name=""><br><br> <label>数量:</label><input type="number" name=""> <br><br> <label>范围:</label><input type="range" name=""><br><br> <label>电话:</label><input type="tel" name=""><br><br> <label>颜色:</label><input type="color" name=""><br><br> <label>搜索:</label><input type="search" name=""><br><br> 新增常用表单控件属性： 1、placeholder 设置文本框默认提示文字 2、autofocus 自动获得焦点 3、autocomplete 联想关键词 常用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 设置不加粗 line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px; font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑‘; text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 text-overflow 设置一行文字宽度超过容器宽度时的显示方式，如：text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号 white-space 一般用来设置文本不换行，如：white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号 list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如：list-style:none width 设置盒子内容的宽度，如： width：100px; height 设置盒子内容的高度，如： height：100px; border-top 设置盒子顶部边框的三个属性 如：border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线，详细设置说明：盒子模型 border-left 设置盒子左边边框的三个属性 如：border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线，详细设置说明：盒子模型 border-right 设置盒子右边边框的三个属性 如：border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线，详细设置说明：盒子模型 border-bottom 设置盒子底部边框的三个属性 如：border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线，详细设置说明：盒子模型 border 同时设置盒子的四个边框，如果四个边的样式统一就使用它 如：border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线，详细设置说明：盒子模型 padding 设置盒子四个边的内边距 如：padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针)，详细设置说明：盒子模型 margin 设置盒子四个边的外边距 如：margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针)，详细设置说明：盒子模型 overflow 设置当子元素的尺寸超过父元素的尺寸时，盒子及子元素的显示方式 如：overflow:hidden 超出的子元素被裁切，详细设置说明：元素溢出 display 设置盒子的显示类型及隐藏，如：display:block 将盒子设置为以块元素显示 display:none 将元素隐藏，详细设置说明：元素类型 float 设置元浮动 如：float:left 设置左浮动 float:right 设置右浮动，详细设置说明：元素浮动 clear 在盒子两侧清除浮动 如：clear:both 在盒子两侧都不允许浮动，详细设置说明：元素浮动 position 设置元素定位 如：position:relative 设置元素相对定位，详细设置说明：元素定位 background 设置元素的背景色和背景图片，如：background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg，背景色为cyan，详细设置说明：元素背景 background-size 设置盒子背景图的尺寸，如：background-size:30px 40px;设置背景图的尺寸宽为30px，高为40px，这个属性不能合到background属性中，详细设置说明：retina屏适配 opacity 设置元素整体透明度，一般为了兼容需要加上filter属性设置 如：opacity:0.1;filter:alpha(opacity=10) cursor 设置鼠标悬停在元素上时指针的形状 如：cursor:pointer 设置为手型 outline 设置文本输入框周围凸显的蓝色的线，一般是设为没有 如：outline:none border-radius 设置盒子的圆角 如：border-radius:10px 设置盒子的四个角为10px半径的圆角，详细设置说明：css圆角 box-shadow 设置盒子的阴影，如：box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影，详细设置说明：css阴影 transition 设置盒子的过渡动画，如：transition:all 1s ease;设置元素过渡动画为1秒完成，所有变动的属性都做动画，详细设置说明：过渡动画 animation 设置盒子的关键帧动画，详细设置说明：关键帧动画 transform 设置盒子的位移、旋转、缩放、斜切等变形，如：transform:rotate(45deg);设置盒子旋转45度，详细设置说明：元素变形 box-sizing 设置盒子的尺寸计算方式，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸 border-collapse 设置表格边框是否合并，如：border-collapse:collapse，将表格边框合并，这样就可以制作1px边框的表格。 JavaScript JavaScript介绍 前端三大块 1、HTML：页面结构 2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果 3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能 JavaScript嵌入页面的方式 行间事件（主要用于事件） <input type="button" name="" onclick="alert(‘ok！‘);"> 页面script标签嵌入 <script type="text/javascript"> alert(‘ok！‘); </script> 外部引入 <script type="text/javascript" src="js/index.js"></script> 变量 JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var‘ 变量类型 5种基本数据类型： 1、number 数字类型 2、string 字符串类型 3、boolean 布尔类型 true 或 false 4、undefined undefined类型，变量声明未初始化，它的值就是undefined 5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null 1种复合类型： object javascript注释 <script type="text/javascript"> // 单行注释 var iNum = 123; /* 多行注释 1、... 2、... */ var sTr = ‘abc123‘; </script> 变量、函数、属性、函数参数命名规范 1、区分大小写 2、第一个字符必须是字母、下划线（_）或者美元符号（$） 3、其他字符可以是字母、下划线、美元符或数字 获取元素方法一 可以使用内置对象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> 操作元素属性 获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写 操作属性的方法 1、“.” 操作 2、“[ ]”操作 属性写法 1、html的属性和js里面属性写法一样 2、“class” 属性写成 “className” 3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize” 通过“.”操作属性： <script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById(‘input1‘); var oA = document.getElementById(‘link1‘); // 读取属性值 var sValue = oInput.value; var sType = oInput.type; var sName = oInput.name; var sLinks = oA.href; // 写(设置)属性 oA.style.color = ‘red‘; oA.style.fontSize = sValue; } </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 sVal1 = oInput1.value; var sVal2 = oInput2.value; // 写(设置)属性 // oA.style.val1 = val2; 没反应 oA.style[sVal1] = sVal2; } </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 sTxt = oDiv.innerHTML; alert(sTxt); //写入 oDiv.innerHTML = ‘<a href="http://www.itcast.cn">传智播客<a/>‘; } </script> ...... <div id="div1">这是一个div元素</div> 函数 变量与函数预解析 JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined <script type="text/javascript"> fnAlert(); // 弹出 hello！ alert(iNum); // 弹出 undefined function fnAlert(){ alert(‘hello!‘); } var iNum = 123; </script> 提取行间事件 在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离 <!--行间事件调用函数 --> <script type="text/javascript"> function fnAlert(){ alert(‘ok!‘); } </script> ...... <input type="button" name="" value="弹出" onclick="fnAlert()"> <!-- 提取行间事件 --> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById(‘btn1‘); oBtn.onclick = fnAlert; function fnAlert(){ 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> 条件语句 switch语句 多重if else语句可以换成性能更高的switch语句 var iNow = 1; switch (iNow){ case 1: ...; break; case 2: ...; break; default: ...; } 数组及操作方法 数组就是一组数据的集合，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.unshift(5); alert(aList); //弹出5,1,2,3,4 aList.shift(); 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,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]; var aList2 = []; for(var i=0;i<aList.length;i++) { if(aList.indexOf(aList[i])==i) { aList2.push(aList[i]); } } alert(aList2); 获取元素方法二 可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素 <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName(‘li‘); // aLi.style.backgroundColor = ‘gold‘; // 出错！不能同时设置多个li alert(aLi.length); aLi[0].style.backgroundColor = ‘gold‘; } </script> .... <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> Javascript组成 1、ECMAscript javascript的语法（变量、函数、循环语句等语法） 2、DOM 文档对象模型 操作html和css的方法 3、BOM 浏览器对象模型 操作浏览器的一些方法 字符串处理方法 字符串合并操作：“ + ” var iNum01 = 12; var iNum02 = 24; var sNum03 = ‘12‘; var sTr = ‘abc‘; alert(iNum01+iNum02); //弹出36 alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加 alert(sNum03+sTr); // 弹出12abc parseInt() 将数字字符串转化为整数 var sNum01 = ‘12‘; var sNum02 = ‘24‘; var sNum03 = ‘12.32‘; alert(sNum01+sNum02); //弹出1224 alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36 alert(sNum03) //弹出数字12 将字符串小数转化为数字整数 parseFloat() 将数字字符串转化为小数 var sNum03 = ‘12.32‘ alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数 split() 把一个字符串分隔成字符串组成的数组 var sTr = ‘2017-4-22‘; var aRr = sTr.split("-"); var aRr2= sTr.split(""); alert(aRr); //弹出[‘2017‘,‘4‘,‘2‘] alert(aRr2); //弹出[‘2‘,‘0‘,‘1‘,‘7‘,‘-‘,‘4‘,‘-‘,‘2‘,‘2‘] charAt() 获取字符串中的某一个字符 var sId = "#div1"; var sTr = sId.charAt(0); alert(sTr); //弹出 # indexOf() 查找字符串是否含有某字符 var sTr = "abcdefgh"; var iNum = sTr.indexOf("c"); alert(iNum); //弹出2 substring() 截取字符串 用法： substring(start,end)（不包括end） var sTr = "abcdefghijkl"; var sTr2 = sTr.substring(3,5); var sTr3 = sTr.substring(1); alert(sTr2); //弹出 de alert(sTr3); //弹出 bcdefghijkl toUpperCase() 字符串转大写 var sTr = "abcdef"; var sTr2 = sTr.toUpperCase(); alert(sTr2); //弹出ABCDEF toLowerCase() 字符串转小写 var sTr = "ABCDEF"; var sTr2 = sTr.toLowerCase(); alert(sTr2); //弹出abcdef 字符串反转 var str = ‘asdfj12jlsdkf098‘; var str2 = str.split(‘‘).reverse().join(‘‘); alert(str2); 类型转换 直接转换 parseInt() 与 parseFloat() alert(‘12‘+7); //弹出127 alert( parseInt(‘12‘) + 7 ); //弹出19 alert( parseInt(5.6)); // 弹出5 alert(‘5.6‘+2.3); // 弹出5.62.3 alert(parseFloat(‘5.6‘)+2.3); // 弹出7.8999999999999995 alert(0.1+0.2); //弹出 0.3000000000000004 alert((0.1*100+0.2*100)/100); //弹出0.3 alert((parseFloat(‘5.6‘)*100+2.3*100)/100); //弹出7.9 隐式转换 “==” 和 “-” if(‘3‘==3) { alert(‘相等‘); } // 弹出‘相等‘ alert(‘10‘-3); // 弹出7 NaN 和 isNaN alert( parseInt(‘123abc‘) ); // 弹出123 alert( parseInt(‘abc123‘) ); // 弹出NaN 调试程序的方法 1、alert 2、console.log 3、document.title 定时器 定时器在javascript中的作用 1、制作动画 2、异步操作 3、函数缓冲与节流 /* 定时器： setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 = setInterval(myalert,2000); /* clearTimeout(time1); clearInterval(time2); */ function myalert(){ alert(‘ok!‘); } 封闭函数 封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数 (function myalert(){ alert(‘hello!‘); })(); 在函数定义前加上“~”和“!”等符号来定义匿名函数 !function myalert(){ alert(‘hello!‘); }() 封闭函数的好处 封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如： var iNum01 = 12; function myalert(){ alert(‘hello!‘); } (function(){ var iNum01 = 24; function myalert(){ alert(‘hello!world‘); } alert(iNum01); myalert() })() alert(iNum01); myalert(); 常用内置对象 document document.getElementById //通过id获取元素 document.getElementsByTagName //通过标签名获取元素 document.referrer //获取上一个跳转页面的地址(需要服务器环境) location window.location.href //获取或者重定url地址 window.location.search //获取地址参数部分 window.location.hash //获取页面锚点或者叫哈希值 Math Math.random 获取0-1的随机数 Math.floor 向下取整 Math.ceil 向上取整 原型继承 JavaScript的原型继承实现方式就是： 定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this； 借助中间函数F实现原型链继承，最好通过封装的inherits函数完成； 继续在新的构造函数的原型上定义新方法。 廖雪峰-原型继承 JQuery jquery jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用 <script type="text/javascript" src="js/jquery-1.12.2.js"></script> jquery选择器 jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功 $(‘#myId‘) //选择id为myId的网页元素 $(‘.myClass‘) // 选择class为myClass的元素 $(‘li‘) //选择所有的li元素 $(‘#ul1 li span‘) //选择id为为ul1元素下的所有li下的span元素 $(‘input[name=first]‘) // 选择name属性等于first的input元素 对选择集进行过滤 $(‘div‘).has(‘p‘); // 选择包含p元素的div元素 $(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素 $(‘div‘).filter(‘.myClass‘); //选择class等于myClass的div元素 $(‘div‘).eq(5); //选择第6个div元素 选择集转移 $(‘div‘).prev(); //选择div元素前面紧挨的同辈元素 $(‘div‘).prevAll(); //选择div元素之前所有的同辈元素 $(‘div‘).next(); //选择div元素后面紧挨的同辈元素 $(‘div‘).nextAll(); //选择div元素后面所有的同辈元素 $(‘div‘).parent(); //选择div的父元素 $(‘div‘).children(); //选择div的所有子元素 $(‘div‘).siblings(); //选择div的同级元素 $(‘div‘).find(‘.myClass‘); //选择div内的class等于myClass的元素 判断是否选择到了元素 jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素 var $div1 = $(‘#div1‘); var $div2 = $(‘#div2‘); alert($div1.length); // 弹出1 alert($div2.length); // 弹出0 ...... <div id="div1">这是一个div</div> 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样式 获取元素的索引值 var $li = $(‘.list li‘).eq(1); alert($li.index()); // 弹出1 ...... <ul class="list"> <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li> </ul> jquery特殊效果 fadeIn() 淡入 $btn.click(function(){ $(‘#div1‘).fadeIn(1000,‘swing‘,function(){ alert(‘done!‘); }); }); fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素的可见状态 slideDown() 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素 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:‘+=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 获取元素相对页面的绝对位置 offset() 获取浏览器可视区宽度高度 $(window).width(); $(window).height(); 获取页面文档的宽度高度 $(document).width(); $(document).height(); 获取页面滚动距离 $(document).scrollTop(); $(document).scrollLeft(); 页面滚动事件 $(window).scroll(function(){ ...... }) jquery属性操作 html() 取出或设置html内容 // 取出html内容 var $htm = $(‘#div1‘).html(); // 设置html内容 $(‘#div1‘).html(‘<span>添加文字</span>‘); prop() 取出或设置某个属性的值 // 取出图片的地址 var $src = $(‘#img1‘).prop(‘src‘); // 设置图片的地址和alt属性 $(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" }); jquery循环 对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法： $(function(){ $(‘.list li‘).each(function(i){ $(this).html(i); }) }) ...... <ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> jquery事件 事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单 绑定事件的其他方式 $(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‘); }); }); 事件冒泡 什么是事件冒泡 在一个对象上触发某类事件（比如单击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> 阻止默认行为 阻止表单提交 $(‘#form1‘).submit(function(event){ event.preventDefault(); }) 合并阻止操作 // event.stopPropagation(); // event.preventDefault(); // 合并写法： return false; 事件委托 事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作 一般绑定事件的写法 $(function(){ $ali = $(‘#list li‘); $ali.click(function() { $(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() { $(this).css({background:‘red‘}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> jquery元素节点操作 创建节点 var $div = $(‘<div>‘); var $div2 = $(‘<div>这是一个div元素</div>‘); 插入节点 append()和appendTo()：在现存元素的内部，从后面插入元素 prepend()和prependTo()：在现存元素的内部，从前面插入元素 after()和insertAfter()：在现存元素的外部，从后面插入元素 before()和insertBefore()：在现存元素的外部，从前面插入元素 删除节点 var $span = $(‘<span>这是一个span元素</span>‘); $(‘#div1‘).append($span); ...... <div id="div1"></div> $(‘#div1‘).remove(); 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使用方法 常用参数： 1、url 请求地址 2、type 请求方式，默认是‘GET‘，常用的还有‘POST‘ 3、dataType 设置返回的数据格式，常用的是‘json‘格式，也可以设置为‘html‘ 4、data 设置发送给服务器的数据 5、success 设置请求成功后的回调函数 6、error 设置请求失败后的回调函数 7、async 设置是否异步，默认值是‘true‘，表示异步 以前的写法 $.ajax({ url: ‘js/data.json‘, type: ‘GET‘, dataType: ‘json‘, data:{‘aa‘:1} success:function(data){ alert(data.name); }, error:function(){ alert(‘服务器超时，请重试！‘); } }); 新的写法(推荐) $.ajax({ url: ‘js/data.json‘, type: ‘GET‘, dataType: ‘json‘, data:{‘aa‘:1} }) .done(function(data) { alert(data.name); }) .fail(function() { alert(‘服务器超时，请重试！‘); }); // data.json里面的数据： {"name":"tom","age":18} jsonp ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数 $.ajax({ url:‘js/data.js‘, type:‘get‘, dataType:‘jsonp‘, jsonpCallback:‘fnBack‘ }) .done(function(data){ alert(data.name); }) .fail(function() { alert(‘服务器超时，请重试！‘); }); // data.js里面的数据： fnBack({"name":"tom","age":18}); 获取360搜索关键词联想数据 $(function(){ $(‘#txt01‘).keyup(function(){ var sVal = $(this).val(); $.ajax({ url:‘https://sug.so.360.cn/suggest?‘, type:‘get‘, dataType:‘jsonp‘, data: {word: sVal} }) .done(function(data){ var aData = data.s; $(‘.list‘).empty(); for(var i=0;i<aData.length;i++) { var $li = $(‘<li>‘+ aData[i] +‘</li>‘); $li.appendTo($(‘.list‘)); } }) }) }) //...... <input type="text" name="" id="txt01"> <ul class="list"></ul> 本地存储 本地存储分为cookie，以及新增的localStorage和sessionStorage ookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效 jquery 设置cookie $.cookie(‘mycookie‘,‘123‘,{expires:7,path:‘/‘}); jquery 获取cookie $.cookie(‘mycookie‘); ocalStorage 存储在本地，容量为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 移动端库和框架 移动端js事件 1、touchstart: //手指放到屏幕上时触发 2、touchmove: //手指在屏幕上滑动式触发 3、touchend: //手指离开屏幕时触发 4、touchcancel: //系统取消touch事件的时候触发，比较少用 移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库 zepto swiper bootstrap 正则表达式 正则表达式的写法 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 匹配非单词边界 . 匹配一个任意字符 var sTr01 = ‘123456asdf‘; var re01 = /d+/; //匹配纯数字字符串 var re02 = /^d+$/; alert(re01.test(sTr01)); //弹出true alert(re02.test(sTr01)); //弹出false 量词：对左边的匹配字符定义个数 ? 出现零次或一次（最多出现一次） + 出现一次或多次（至少出现一次） * 出现零次或多次（任意次） {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次 任意一个或者范围 [abc123] : 匹配‘abc123’中的任意一个字符 [a-z0-9] : 匹配a到z或者0到9中的任意一个字符 限制开头结尾 ^ 以紧挨的元素开头 $ 以紧挨的元素结尾 修饰参数 g： global，全文搜索，默认搜索到第一个结果接停止 i： ingore case，忽略大小写，默认大小写敏感 常用函数 1、test 用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假 2、replace 用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符 正则默认规则 匹配成功就结束，不会继续匹配，区分大小写 var sTr01 = ‘abcdefedcbaCef‘; var re01 = /c/; var re02 = /c/g; var re03 = /c/gi; var sTr02 = sTr01.replace(re01,‘*‘); var sTr03 = sTr01.replace(re02,‘*‘); var sTr04 = sTr01.replace(re03,‘*‘); alert(sTr02); // 弹出 ab*defedcbaCef alert(sTr03); // 弹出 ab*defed*baCef alert(sTr04); // 弹出 ab*defed*ba*ef 常用正则规则 //用户名验证：(数字字母或下划线6到20位) var reUser = /^w{6,20}$/; //邮箱验证： var reMail = /^[a-z0-9][w.-]*@[a-z0-9-]+(.[a-z]{2,5}){1,2}$/i; //密码验证： var rePass = /^[[email protected]#$%^&*]{6,20}$/; //手机号码验证： var rePhone = /^1[3458]d{9}$/; 前端性能优化 从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要 代码部署 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。 3、使用内容分发网络 CDN 4、为文件设置Last-Modified、Expires和Etag 5、使用GZIP压缩传送 6、权衡DNS查找次数(使用不同域名会增加DNS查找) 7、避免不必要的重定向(加"/") 编码 html 1、使用结构清晰，简单，语义化标签 2、避免空的src和href 3、不要在HTML中缩放图片 css 1、精简css选择器 2、把CSS放到顶部 3、避免@import方式引入样式 4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html 5、使用css动画来取代javascript动画 6、使用字体图标 7、使用css sprite(雪碧图) 8、使用svg图形 9、避免使用CSS表达式 body{ background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" ); } javascript 1、减少引用库的个数 2、使用requirejs或seajs异步加载js 3、JS放到页面底部引入 4、避免全局查找 5、使用原生方法 6、用switch语句代替复杂的if else语句 7、减少语句数，比如说多个变量声明可以写成一句 8、使用字面量表达式来初始化数组或者对象 9、使用innerHTML取代复杂的元素注入 10、使用事件代理(事件委托) 11、避免多次访问dom选择集 12、高频触发事件设置使用函数节流 13、使用Web Storage缓存数据 移动端Web 流式布局 流式布局：就是百分比布局， 非固定像素，内容向两侧填充， 理解成流动的布局，称为流式布局 视觉窗口 视觉窗口：viewport,是移动端特有。 这是一个虚拟的区域，承载网页的。 承载关系 承载关系：浏览器---->viewport---->网页 适配要求 网页宽度必须和浏览器保持一致 默认显示的缩放比例和PC端保持（缩放比例1.0） 不允许用户自行缩放网页 满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案 适配设置 如果任何设置都没有，默认走的就是viewport的默认设置 去设置新的viewport设置,达到适配要求 <meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置 viewport的功能 width：可以设置宽度(device-width 当前设备的宽度) height：可以设置高度 initial-scale：可以设置默认的缩放比例 user-scalable：可以设置是否允许用户自行缩放 maximum-scale：可以设置最大缩放比例 minimum-scale：可以设置最小缩放比例 在<meta name="viewport" content="" > content="" 使用以上参数 - width=device-width 当前设备宽度 - initial-scale=1.0 宽度一致比例是1.0 - user-scalable=no 不允许用户自行缩放 （yes，no 1,0） 标准适配方案 <meta name=‘viewport‘ content=‘width=device-width,initial-scale=1.0,user-scalable=0‘>
HTML
html概述和基本结构
html概述
HTML是 HyperText Mark-up Language 的首字母简写
意思是超文本标记语言，
超文本指的是超链接，
标记指的是标签
html注释
<!-- 这是一段注释 -->
html标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
html段落标签、换行标签与字符实体
html段落标签
<p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
页可以从一个网页链接跳转到另外一个网页。</p>
html换行标签
插入<br />来强制换行
html字符实体
空格的字符实体：
“<”和“>”的字符实体：
< 和 >
html块标签、含样式的标签
html块标签
1、<div> 标签 块元素，表示一块内容，没有具体的语义。
2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
1、<em> 标签 行内元素，表示语气中的强调词
2、<i> 标签 行内元素，表示专业词汇
3、<b> 标签 行内元素，表示文档中的关键字或者产品名
4、<strong> 标签 行内元素，表示非常重要的内容
语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
html图像标签、绝对路径和相对路径
html图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
?src属性 定义图片的引用地址
?alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，
相对路径就没有这个问题。
html链接标签
?href属性 定义跳转的地址
?title属性 定义鼠标悬停时弹出的提示文字框
?target属性 定义链接窗口打开的位置
?target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
?target="_blank" 新页面会在新开的一个浏览器窗口打开
html列表标签
有序列表
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
无序列表
<ul>
<li><a href="#">新闻标题一</a></li>
<li><a href="#">新闻标题二</a></li>
<li><a href="#">新闻标题三</a></li>
</ul>
定义列表
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
html表单
<form>标签 定义整体的表单区域
?action属性 定义表单数据提交地址
?method属性 定义表单提交的方式，一般有“get”方式和“post”方式
<label>标签 为表单元素定义文字标注
<input>标签 定义通用的表单元素
?type属性?type="text" 定义单行文本输入框
?type="password" 定义密码输入框
?type="radio" 定义单选框
?type="checkbox" 定义复选框
?type="file" 定义上传文件
?type="submit" 定义提交按钮
?type="reset" 定义重置按钮
?type="button" 定义一个普通按钮
?type="image" 定义图片作为提交按钮，用src属性定义图片地址
?type="hidden" 定义一个隐藏的表单域，用来存储值
?value属性 定义表单元素的值
?name属性 定义表单元素的名称，此名称是提交数据时的键名
<textarea>标签 定义多行文本输入框
<select>标签 定义下拉表单元素
<option>标签 与<select>标签配合，定义下拉表单元素中的选项
注册表单实例
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
<input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>
html表格
1、<table>标签：声明一个表格，它的常用属性如下：
?border属性 定义表格的边框，设置值是数值
?cellpadding属性 定义单元格内容与边框的距离，设置值是数值
?cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
?align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
?align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
?valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
?colspan 设置单元格水平合并，设置值是数值
?rowspan 设置单元格垂直合并，设置值是数值
页面布局概述
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：
1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
CSS
css基本语法及页面引用
css基本语法
选择器 { 属性:值; 属性:值; 属性:值;}
/*
css注释 ctrl+shift+"/"
*/
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 设置不加粗
?line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px; 行高示例图片
?font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑‘;
?text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
?text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 行高示例图片
?text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
css颜色表示法
css颜色值主要有三种表示方法：
1、颜色名表示，比如：red 红色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示红色
3、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>
伪类及伪元素选择器
.box1:hover{color:red}
.box2:before{content:‘行首文字‘;}
.box3:after{content:‘行尾文字‘;}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
CSS盒子模型
把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置宽高
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框
设置一边的边框，比如顶部边框，可以按如下设置：
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‘就是外边距设置方法。
盒模型的实际尺寸
盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真实尺寸</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
盒模型使用技巧及相关问题
margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败
解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：
.clearfix:before{
content: ‘‘;
display:table;
}
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
块元素、内联元素、内联块元素
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。
块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
?支持全部的样式
?如果没有设置宽度，默认的宽度为父级宽度100%
?盒子占据一行、即使设置了宽度
内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
?支持部分样式（不支持宽、高、margin上下、padding上下）
?宽高由内容决定
?盒子并在一行
?代码换行，盒子之间会产生间距
?子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
?支持全部样式
?如果没有设置宽高，宽高由内容决定
?盒子并在一行
?代码换行，盒子会产生间距
?子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
浮动
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
7、浮动元素之间没有垂直margin的合并
清除浮动
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动的使用方法
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">
定位
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置
关于定位
使用css的position属性来设置元素的定位类型，postion的设置项如下：
?relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
?absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
?fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
?static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
?inherit 从父元素继承 position 属性的值。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
background属性
属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
?background-color 设置背景颜色
?background-image 设置背景图片地址
?background-repeat 设置背景图片如何重复平铺
?background-position 设置背景图片的位置
?background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
HTML5与CSS3
CSS权重
CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
权重的计算实例
实例一：
<style type="text/css">
div{
color:red !important;
}
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red
-->
实例二：
<style type="text/css">
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
<!--
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->
CSS3新增选择器
元素选择器
- E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
- E:first-child：匹配元素类型为E且是父元素的第一个子元素
- E:last-child：匹配元素类型为E且是父元素的最后一个子元素
- E > F E元素下面第一层子集
- E ~ F E元素后面的兄弟元素
- E + F 紧挨着的后面的兄弟元素
<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第2个子元素div匹配 -->
属性选择器
- E[attr] 含有attr属性的元素
- E[attr=‘ok‘] 含有attr属性的元素且它的值为“ok”
- E[attr^=‘ok‘] 含有attr属性的元素且它的值的开头含有“ok”
- E[attr$=‘ok‘] 含有attr属性的元素且它的值的结尾含有“ok”
- E[attr*=‘ok‘] 含有attr属性的元素且它的值中含有“ok”
<style type="text/css">
div[data-attr=‘ok‘]{
color:red;
}
</style>
......
<div data-attr="ok">这是一个div元素</div>
CSS3圆角、rgba
CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
rgba（新的颜色值表示法）
- 盒子透明度表示法
- rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
.box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}
CSS3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
CSS3 transform变换
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
CSS3 浏览器前缀
浏览器样式前缀
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀
- -ms- 兼容IE浏览器
- -moz- 兼容firefox
- -o- 兼容opera
- -webkit- 兼容chrome 和 safari
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
自动添加浏览器前缀
目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
可以在Sublime text中通过package control 安装 autoprefixer
Autoprefixer在Sublime text中的设置
- preferences/key Bindings-User
{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
- Preferences>package setting>AutoPrefixer>Setting-User
{
"browsers": ["last 7 versions"],
"cascade": true,
"remove": true
}
- last 7 versions：最新的浏览器的7个版本
- cascade：缩进美化属性值
- remove：是否去掉不必要的前缀
HTML5新增标签
新增语义标签
1、<header> 页面头部、页眉
2、<nav> 页面导航
3、<article> 一篇文章
4、<section> 文章中的章节
5、<aside> 侧边栏
6、<footer> 页面底部、页脚
音频视频
1、<audio>
2、<video>
PC端兼容h5的新标签的方法，在页面中引入以下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
HTML5 新增表单控件
新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词
常用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 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑‘;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-overflow 设置一行文字宽度超过容器宽度时的显示方式，如：text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号
white-space 一般用来设置文本不换行，如：white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号
list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如：list-style:none
width 设置盒子内容的宽度，如： width：100px;
height 设置盒子内容的高度，如： height：100px;
border-top 设置盒子顶部边框的三个属性 如：border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线，详细设置说明：盒子模型
border-left 设置盒子左边边框的三个属性 如：border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线，详细设置说明：盒子模型
border-right 设置盒子右边边框的三个属性 如：border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线，详细设置说明：盒子模型
border-bottom 设置盒子底部边框的三个属性 如：border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线，详细设置说明：盒子模型
border 同时设置盒子的四个边框，如果四个边的样式统一就使用它 如：border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线，详细设置说明：盒子模型
padding 设置盒子四个边的内边距 如：padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针)，详细设置说明：盒子模型
margin 设置盒子四个边的外边距 如：margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针)，详细设置说明：盒子模型
overflow 设置当子元素的尺寸超过父元素的尺寸时，盒子及子元素的显示方式 如：overflow:hidden 超出的子元素被裁切，详细设置说明：元素溢出
display 设置盒子的显示类型及隐藏，如：display:block 将盒子设置为以块元素显示 display:none 将元素隐藏，详细设置说明：元素类型
float 设置元浮动 如：float:left 设置左浮动 float:right 设置右浮动，详细设置说明：元素浮动
clear 在盒子两侧清除浮动 如：clear:both 在盒子两侧都不允许浮动，详细设置说明：元素浮动
position 设置元素定位 如：position:relative 设置元素相对定位，详细设置说明：元素定位
background 设置元素的背景色和背景图片，如：background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg，背景色为cyan，详细设置说明：元素背景
background-size 设置盒子背景图的尺寸，如：background-size:30px 40px;设置背景图的尺寸宽为30px，高为40px，这个属性不能合到background属性中，详细设置说明：retina屏适配
opacity 设置元素整体透明度，一般为了兼容需要加上filter属性设置 如：opacity:0.1;filter:alpha(opacity=10)
cursor 设置鼠标悬停在元素上时指针的形状 如：cursor:pointer 设置为手型
outline 设置文本输入框周围凸显的蓝色的线，一般是设为没有 如：outline:none
border-radius 设置盒子的圆角 如：border-radius:10px 设置盒子的四个角为10px半径的圆角，详细设置说明：css圆角
box-shadow 设置盒子的阴影，如：box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影，详细设置说明：css阴影
transition 设置盒子的过渡动画，如：transition:all 1s ease;设置元素过渡动画为1秒完成，所有变动的属性都做动画，详细设置说明：过渡动画
animation 设置盒子的关键帧动画，详细设置说明：关键帧动画
transform 设置盒子的位移、旋转、缩放、斜切等变形，如：transform:rotate(45deg);设置盒子旋转45度，详细设置说明：元素变形
box-sizing 设置盒子的尺寸计算方式，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸
border-collapse 设置表格边框是否合并，如：border-collapse:collapse，将表格边框合并，这样就可以制作1px边框的表格。
JavaScript
JavaScript介绍
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript嵌入页面的方式
行间事件（主要用于事件）
<input type="button" name="" onclick="alert(‘ok！‘);">
页面script标签嵌入
<script type="text/javascript">
alert(‘ok！‘);
</script>
外部引入
<script type="text/javascript" src="js/index.js"></script>
变量
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var‘
变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型：
object
javascript注释
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = ‘abc123‘;
</script>
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
获取元素方法一
可以使用内置对象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>
操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
通过“.”操作属性：
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById(‘input1‘);
var oA = document.getElementById(‘link1‘);
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 写(设置)属性
oA.style.color = ‘red‘;
oA.style.fontSize = sValue;
}
</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 sVal1 = oInput1.value;
var sVal2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[sVal1] = sVal2;
}
</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 sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = ‘<a href="http://www.itcast.cn">传智播客<a/>‘;
}
</script>
......
<div id="div1">这是一个div元素</div>
函数
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined
<script type="text/javascript">
fnAlert(); // 弹出 hello！
alert(iNum); // 弹出 undefined
function fnAlert(){
alert(‘hello!‘);
}
var iNum = 123;
</script>
提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离
<!--行间事件调用函数 -->
<script type="text/javascript">
function fnAlert(){
alert(‘ok!‘);
}
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById(‘btn1‘);
oBtn.onclick = fnAlert;
function fnAlert(){
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>
条件语句
switch语句
多重if else语句可以换成性能更高的switch语句
var iNow = 1;
switch (iNow){
case 1:
...;
break;
case 2:
...;
break;
default:
...;
}
数组及操作方法
数组就是一组数据的集合，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.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
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,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++)
{
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
}
alert(aList2);
获取元素方法二
可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName(‘li‘);
// aLi.style.backgroundColor = ‘gold‘; // 出错！不能同时设置多个li
alert(aLi.length);
aLi[0].style.backgroundColor = ‘gold‘;
}
</script>
....
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Javascript组成
1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法
字符串处理方法
- 字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = ‘12‘;
var sTr = ‘abc‘;
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
- parseInt() 将数字字符串转化为整数
var sNum01 = ‘12‘;
var sNum02 = ‘24‘;
var sNum03 = ‘12.32‘;
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(sNum03) //弹出数字12 将字符串小数转化为数字整数
- parseFloat() 将数字字符串转化为小数
var sNum03 = ‘12.32‘
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
- split() 把一个字符串分隔成字符串组成的数组
var sTr = ‘2017-4-22‘;
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //弹出[‘2017‘,‘4‘,‘2‘]
alert(aRr2); //弹出[‘2‘,‘0‘,‘1‘,‘7‘,‘-‘,‘4‘,‘-‘,‘2‘,‘2‘]
- charAt() 获取字符串中的某一个字符
var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #
- indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
- substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
- toUpperCase() 字符串转大写
var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF
- toLowerCase() 字符串转小写
var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef
- 字符串反转
var str = ‘asdfj12jlsdkf098‘;
var str2 = str.split(‘‘).reverse().join(‘‘);
alert(str2);
类型转换
直接转换 parseInt() 与 parseFloat()
alert(‘12‘+7); //弹出127
alert( parseInt(‘12‘) + 7 ); //弹出19
alert( parseInt(5.6)); // 弹出5
alert(‘5.6‘+2.3); // 弹出5.62.3
alert(parseFloat(‘5.6‘)+2.3); // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat(‘5.6‘)*100+2.3*100)/100); //弹出7.9
隐式转换 “==” 和 “-”
if(‘3‘==3)
{
alert(‘相等‘);
}
// 弹出‘相等‘
alert(‘10‘-3); // 弹出7
NaN 和 isNaN
alert( parseInt(‘123abc‘) ); // 弹出123
alert( parseInt(‘abc123‘) ); // 弹出NaN
调试程序的方法
1、alert
2、console.log
3、document.title
定时器
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert(‘ok!‘);
}
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数
(function myalert(){
alert(‘hello!‘);
})();
在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){
alert(‘hello!‘);
}()
封闭函数的好处
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12;
function myalert(){
alert(‘hello!‘);
}
(function(){
var iNum01 = 24;
function myalert(){
alert(‘hello!world‘);
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();
常用内置对象
- document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
- location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
- Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
原型继承
- JavaScript的原型继承实现方式就是：
- 定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；
- 借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；
- 继续在新的构造函数的原型上定义新方法。
JQuery
jquery
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery选择器
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功
$(‘#myId‘) //选择id为myId的网页元素
$(‘.myClass‘) // 选择class为myClass的元素
$(‘li‘) //选择所有的li元素
$(‘#ul1 li span‘) //选择id为为ul1元素下的所有li下的span元素
$(‘input[name=first]‘) // 选择name属性等于first的input元素
对选择集进行过滤
$(‘div‘).has(‘p‘); // 选择包含p元素的div元素
$(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素
$(‘div‘).filter(‘.myClass‘); //选择class等于myClass的div元素
$(‘div‘).eq(5); //选择第6个div元素
选择集转移
$(‘div‘).prev(); //选择div元素前面紧挨的同辈元素
$(‘div‘).prevAll(); //选择div元素之前所有的同辈元素
$(‘div‘).next(); //选择div元素后面紧挨的同辈元素
$(‘div‘).nextAll(); //选择div元素后面所有的同辈元素
$(‘div‘).parent(); //选择div的父元素
$(‘div‘).children(); //选择div的所有子元素
$(‘div‘).siblings(); //选择div的同级元素
$(‘div‘).find(‘.myClass‘); //选择div内的class等于myClass的元素
判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素
var $div1 = $(‘#div1‘);
var $div2 = $(‘#div2‘);
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>
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样式
获取元素的索引值
var $li = $(‘.list li‘).eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$(‘#div1‘).fadeIn(1000,‘swing‘,function(){
alert(‘done!‘);
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
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:‘+=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
- 获取元素相对页面的绝对位置
offset()
- 获取浏览器可视区宽度高度
$(window).width();
$(window).height();
- 获取页面文档的宽度高度
$(document).width();
$(document).height();
- 获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
- 页面滚动事件
$(window).scroll(function(){
......
})
jquery属性操作
- html() 取出或设置html内容
// 取出html内容
var $htm = $(‘#div1‘).html();
// 设置html内容
$(‘#div1‘).html(‘<span>添加文字</span>‘);
- prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $(‘#img1‘).prop(‘src‘);
// 设置图片的地址和alt属性
$(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" });
jquery循环
对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：
$(function(){
$(‘.list li‘).each(function(i){
$(this).html(i);
})
})
......
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
jquery事件
- 事件函数列表
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单
- 绑定事件的其他方式
$(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‘);
});
});
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击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>
阻止默认行为
阻止表单提交
$(‘#form1‘).submit(function(event){
event.preventDefault();
})
合并阻止操作
// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作
一般绑定事件的写法
$(function(){
$ali = $(‘#list li‘);
$ali.click(function() {
$(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() {
$(this).css({background:‘red‘});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
jquery元素节点操作
- 创建节点
var $div = $(‘<div>‘);
var $div2 = $(‘<div>这是一个div元素</div>‘);
- 插入节点
- append()和appendTo()：在现存元素的内部，从后面插入元素
- prepend()和prependTo()：在现存元素的内部，从前面插入元素
- after()和insertAfter()：在现存元素的外部，从后面插入元素
- before()和insertBefore()：在现存元素的外部，从前面插入元素
- 删除节点
var $span = $(‘<span>这是一个span元素</span>‘);
$(‘#div1‘).append($span);
......
<div id="div1"></div>
$(‘#div1‘).remove();
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使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是‘GET‘，常用的还有‘POST‘
3、dataType 设置返回的数据格式，常用的是‘json‘格式，也可以设置为‘html‘
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是‘true‘，表示异步
以前的写法
$.ajax({
url: ‘js/data.json‘,
type: ‘GET‘,
dataType: ‘json‘,
data:{‘aa‘:1}
success:function(data){
alert(data.name);
},
error:function(){
alert(‘服务器超时，请重试！‘);
}
});
新的写法(推荐)
$.ajax({
url: ‘js/data.json‘,
type: ‘GET‘,
dataType: ‘json‘,
data:{‘aa‘:1}
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
alert(‘服务器超时，请重试！‘);
});
// data.json里面的数据： {"name":"tom","age":18}
jsonp
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数
$.ajax({
url:‘js/data.js‘,
type:‘get‘,
dataType:‘jsonp‘,
jsonpCallback:‘fnBack‘
})
.done(function(data){
alert(data.name);
})
.fail(function() {
alert(‘服务器超时，请重试！‘);
});
// data.js里面的数据： fnBack({"name":"tom","age":18});
获取360搜索关键词联想数据
$(function(){
$(‘#txt01‘).keyup(function(){
var sVal = $(this).val();
$.ajax({
url:‘https://sug.so.360.cn/suggest?‘,
type:‘get‘,
dataType:‘jsonp‘,
data: {word: sVal}
})
.done(function(data){
var aData = data.s;
$(‘.list‘).empty();
for(var i=0;i<aData.length;i++)
{
var $li = $(‘<li>‘+ aData[i] +‘</li>‘);
$li.appendTo($(‘.list‘));
}
})
})
})
//......
<input type="text" name="" id="txt01">
<ul class="list"></ul>
本地存储
本地存储分为cookie，以及新增的localStorage和sessionStorage
- ookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效
jquery 设置cookie
$.cookie(‘mycookie‘,‘123‘,{expires:7,path:‘/‘});
jquery 获取cookie
$.cookie(‘mycookie‘);
- ocalStorage 存储在本地，容量为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
移动端库和框架
移动端js事件
1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用
移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库
- zepto
- swiper
- bootstrap
正则表达式
- 正则表达式的写法
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 匹配非单词边界
. 匹配一个任意字符
var sTr01 = ‘123456asdf‘;
var re01 = /d+/;
//匹配纯数字字符串
var re02 = /^d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false
- 量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
- 任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
- 限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
- 修饰参数
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感
- 常用函数
1、test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
2、replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符
- 正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
var sTr01 = ‘abcdefedcbaCef‘;
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;
var sTr02 = sTr01.replace(re01,‘*‘);
var sTr03 = sTr01.replace(re02,‘*‘);
var sTr04 = sTr01.replace(re03,‘*‘);
alert(sTr02); // 弹出 ab*defedcbaCef
alert(sTr03); // 弹出 ab*defed*baCef
alert(sTr04); // 弹出 ab*defed*ba*ef
- 常用正则规则
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^w{6,20}$/;
//邮箱验证：
var reMail = /^[a-z0-9][w.-]*@[a-z0-9-]+(.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[[email protected]#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[3458]d{9}$/;
前端性能优化
从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要
代码部署
1、代码的压缩与合并
2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。
3、使用内容分发网络 CDN
4、为文件设置Last-Modified、Expires和Etag
5、使用GZIP压缩传送
6、权衡DNS查找次数(使用不同域名会增加DNS查找)
7、避免不必要的重定向(加"/")
编码
html
1、使用结构清晰，简单，语义化标签
2、避免空的src和href
3、不要在HTML中缩放图片
css
1、精简css选择器
2、把CSS放到顶部
3、避免@import方式引入样式
4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html
5、使用css动画来取代javascript动画
6、使用字体图标
7、使用css sprite(雪碧图)
8、使用svg图形
9、避免使用CSS表达式
body{
background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}
javascript
1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、使用原生方法
6、用switch语句代替复杂的if else语句
7、减少语句数，比如说多个变量声明可以写成一句
8、使用字面量表达式来初始化数组或者对象
9、使用innerHTML取代复杂的元素注入
10、使用事件代理(事件委托)
11、避免多次访问dom选择集
12、高频触发事件设置使用函数节流
13、使用Web Storage缓存数据
移动端Web
流式布局
流式布局：就是百分比布局，
非固定像素，内容向两侧填充，
理解成流动的布局，称为流式布局
视觉窗口
视觉窗口：viewport,是移动端特有。
这是一个虚拟的区域，承载网页的。
承载关系
承载关系：浏览器---->viewport---->网页
适配要求
- 网页宽度必须和浏览器保持一致
- 默认显示的缩放比例和PC端保持（缩放比例1.0）
- 不允许用户自行缩放网页
满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案
适配设置
- 如果任何设置都没有，默认走的就是viewport的默认设置
- 去设置新的viewport设置,达到适配要求
- <meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置
- viewport的功能
- width：可以设置宽度(device-width 当前设备的宽度)
- height：可以设置高度
- initial-scale：可以设置默认的缩放比例
- user-scalable：可以设置是否允许用户自行缩放
- maximum-scale：可以设置最大缩放比例
- minimum-scale：可以设置最小缩放比例
在<meta name="viewport" content="" > content="" 使用以上参数
- width=device-width 当前设备宽度
- initial-scale=1.0 宽度一致比例是1.0
- user-scalable=no 不允许用户自行缩放 （yes，no 1,0）
标准适配方案
<meta name=‘viewport‘ content=‘width=device-width,initial-scale=1.0,user-scalable=0‘>以上是关于前端——基础的主要内容，如果未能解决你的问题，请参考以下文章