前端面试题
什么是跨域？怎么解决跨域问题？
什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
解决办法：
1、JSONP：
使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。
2、代理：
例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
3、PHP端修改header（XHR2方式）
在php接口脚本中加入以下两句即可：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
请说出三种减少页面加载时间的方法
1.尽量减少页面中重复的HTTP请求数量
2.服务器开启gzip压缩
3. css样式的定义放置在文件头部
4. Javascript脚本放在文件末尾
5.压缩合并Javascript、CSS代码
6.使用多域名负载网页内的多个文件、图片
js操作字符串常用的方法
JS操作String对象的方法
charAt(index):返回指定索引处的字符串
charCodeAt(index):返回指定索引处的字符的Unicode的值
concat(str1,str2,...):连接多个字符串，返回连接后的字符串的副本
fromCharCode():将Unicode值转换成实际的字符串
indexOf(str):返回str在父串中第一次出现的位置，若没有则返回-1
lastIndexOf(str):返回str在父串中最后一次出现的位置，若没有则返回-1
match(regex):搜索字符串，并返回正则表达式的所有匹配
replace(str1,str2):str1也可以为正则表达式，用str2替换str1
search(regex):基于正则表达式搜索字符串，并返回第一个匹配的位置
slice(start,end)：返回字符索引在start和end（不含）之间的子串
split(sep，limit)：将字符串分割为字符数组，limit为从头开始执行分割的最大数量
substr(start，length)：从字符索引start的位置开始，返回长度为length的子串
substring(from,to)：返回字符索引在from和to（不含）之间的子串
toLowerCase()：将字符串转换为小写
toUpperCase()：将字符串转换为大写
valueOf()：返回原始字符串值
Json对象与Json字符串互转
1>jQuery插件支持的转换方式：
$.parseJSON( jsonstr ); // //jQuery.parseJSON(jso(jsonstr),可以将json字符串转换成json对象
2>浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：
JSON.parse(jso(jsonstr); //可以将json字符串转换成json对象
象
JSON.stringify(jso(jsonobj); //可以将json对象转换成json对符串
注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入，引入json.js。
3>Javascript支持的转换方式：
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
4>JSON官方的转换方式：
http://www.json.org/提供了/提供了一个了一个json.js,这样i,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
可以在可以在https://github.com/douglascrockford/JSON-js上获取到上获取到这个js，一般现在用现在用json2.js。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("$("p.intro")ro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("$("p.intro")ro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
打印三角形
document.writeln("打印三角形</br>"); for(var i=0;i<5;i++){ for(var j=5;j>i;j--){ document.writeln(" "); } for(var k=0;k<2*i+1;k++){ document.writeln("*"); } document.writeln("</br>") }
清除浮动的方式及优缺点
1）以前清除浮动的时候总是在想要清除浮动的元素后面加：
<div style="clear:both;"></div>
优点：通俗易懂，容易掌握
点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。
2）使用 br标签和其自身的 html属性
这个方法有些小众，br 有 clear=“all | left | right | none” 属性
<div class="warp" id="float2">
<h2>2）使用 br标签和其自身的 html属性</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<br clear="all" />
</div>
<div class="footer">.footer</div>
优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
3)父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；
<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了
4)父元素设置 overflow：auto 属性
同样IE6需要触发hasLayout，演示和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用
5）父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
6）父元素设置display:table
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
7）使用:after 伪元素
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
下面是用after伪类实现，兼容多种浏览器：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 为兼容IE6,IE7，因为ie6,ie7不能用after伪类 */
.clearfix{
zoom:1;
}
优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了。
HTML:
<div class="parent clearfix"> <div class="left">left</div> <div class="right">right</div> </div>
CSS: .clearfix { zoom: 1 } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .parent { background-color: red; width: 120px; } .left { float: left; background-color: pink; height: 60px; } .right { float: right; background-color: #abcdef; }
css三角形运用
<style>
.colored-border-empty-retangle {
margin: 50px auto;
width: 0;
height: 0;
border-top: 40px solid pink;
border-right: 40px solid green;
border-bottom: 40px solid red;
border-left: 40px solid blue;
}
</style>
<div class="colored-border-empty-retangle"></div>
推荐链接： https://www.cnblogs.com/keepfool/p/5616326.html
