一.get与post的区别
1.发送方式：
get：数据编写在url中，作为url的一部分
index.php?id=1000&name=wkl
post：数据表写到http协议的请求头header中
xhr.send('id=190&name=zhangsan&age="20")
2.使用方式：
get：请求任意次都返回相同的结果
post：请求会改变服务器状态或数据
3.缓存：
get：可以被浏览器缓存
post：不可以缓存，每一次获取的都是最新的数据
4.存储容量：
get：大小有限，只能传送简单的字符串，数字
post：可以发送复杂的数据，数据量大
二.同步和异步
同步请求：必须等待服务器响应，完成后返回数据。之后才能执行其他脚本，服务器响应慢，用户体验不佳。
异步请求：无需等待服务器响应，可以执行其他脚本。响应后继续处理数据。
三.什么时ajax
ajax主要是用异步的方式来操作数据：发送获取数据，不需要加载页面的情况下，对页面进行局部刷新
四.cookie,sessionStroage和localStorage的区别
1.方式
cookie通过请求头发送，在浏览器与服务器之间来回传递，sessionStroage与
localStroage不会把数据发给服务器，仅在本地保存
2.存储量
cookie存储量小，一般在4到8kb,其余存储量大5M
3.数据有效期不同，
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保存
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域
sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的。
五.什么是html
超文本标记语言
hyper text markup language
HTML
是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。可以告诉浏览器如何显示其中的内容，他是一种由浏览器解释执行的语言。(如：文字如何处理，画面如何安排，图片如何显示等)
六.www
world wide
web
七.请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程
1)用户输入网址
2)浏览器通过DNS获取网站的IP地址
3)浏览器尝试与服务器建立连接
4)服务器发送永久重定向
5)浏览器跟踪重定向地址
7)服务器处理请求
8)服务器发送HTML响应
9)浏览器开始显示HTML
10)浏览器发送获取嵌套在html中的元素，页面开始渲染
八.js能干嘛
1.数据的验证。
2.将动态的内容写入到网页当中。
3.可以对事件做出响应。
4.可以读写html中的内容。
5.可以检测浏览器
6.可以创建cookies
7.模拟动画
九.跨域
1. jsonp
通过动态生成script 外部JS文件解决跨域
2.
jsonp不能发送POST数据，只能发送get数据！ 不安全也只能去用于处理非机密性的东西
3.
jsonp存在潜在的风险。如果人家给你的JS文件有恶意代码危险就来了。。。
十.请写出你所知道的所有事件(注：HTML事件、DOM0级事件、DOM2级事件)
1)HTML事件处理程序：
使用方式：html语言允许在元素的标签中，直接定义某些事件的监听代码
直接在元素里添加一个onclick属性：属性值为函数
1、代码的耦合性太高了
2、事件会被覆盖
2)DOM0
级处理程序：
使用方式：Element节点有事件属性，可以定义监听函数(只会在冒泡阶段触发)；
事件会被覆盖：同一个事件只能定义一个监听函数，如果定义两次onclick属性，后一次定义会覆盖前一次(一般所有浏览器都支持DOM0级事件处理程序，除非为了程序的兼容问题，一般不推荐使用。)
d1.οnclick=null;
3)DOM2级处理程序：
使用方式：ele.addEv="事件类型"，“回调函数”，“捕获方式
冒泡方式”)
window.addEventListener一般都写false 用冒泡捕获 因为浏览器兼容问题
只能写 在标准浏览器中 ie不支持
通过Element节点、document节点、window对象的addEventListener也可以定义事件的监听函数。
removeEventListener
4)ie独有的方法
attachEvent("onclick",function(){})
detachEvent("onclick",function(){})
匿名函数无法被移除
十一.请写出this关键字的用法？
总体(谁调用指向谁)
1、定时器中的this指向window;
2、绑定事件是的this
html(window)
dom 0级(当前元素)
dom 2级(非ie：当前元素，ie：window)
3、闭包中指向window
4、call&&apply可以改变this指向
5、自执行函数中的this指向window
十二.事件委托是什么？
通过给父级添加事件，免去给每个子级添加，达到获取每个子级对象的目的。
事件委托就是事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件,例如click事件会一直冒泡到document层次，这样我们就可以给整个页面绑定一个
onclick事件，则不必给每个可点击的子元素都绑上事件
十三.请描述call和apply的区别
this,null,undefined
都可以改变this指向
call的参数一个一个传入
apply的参数是数组及类数组
十四.取消冒泡
event.stopPropagation();
ie:event.cancelBubble=true;
十五.取消默认
event.preventDefault();
ie:event.returnValue=false;
十六.闭包
简单而言就是函数内部嵌套函数,
闭包就是能够读取其他函数内部变量的函数。
好处：闭包内的局部作用域不会被js垃圾回收机制回收，可以用来读取函数内部的变量，保存作用域
缺陷：1)由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是在退出闭包之前将不再使用的局部变量删除。
var str="dd";
str=null;
//delete str;
用var声明的变量是永久性的。所以当你试图用delete来删除其声明的变量时会报错。
2)闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象(object)使用，把闭包当作它的公用方法(Public
Method)，把内部变量当作它的私有属性(private value)，这时一定要小心，不要随便改变父函数内部变量的值。
闭包中this指向：window
十七.css中的选择器
1.基本选择器
id>class>标签>通配符
2.关系选择器
包含e f兄弟e~f子e>f 相邻e+f
3.属性选择器
4.伪类选择器
linkvisitedhoveractive
只限a标签
not()first-childlast-childonly-childnth-child
十八.不同浏览器兼容性问题
1.不同浏览器的标签默认的margin和padding不同
例子：随便写几个标签，不加样式控制的情况下，各自的margin
和padding差异较大。
解决方法： *{margin:0;padding:0;}
2.块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
例子：常见症状是ie6中后面的一块被顶到下一行
解决方法：在float的标签样式控制中加入
display:inline;将其转化为行内属性
3.图片默认有间距
例子：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决方法：使用浮动
4.opacity
低版本ie用filter:alpha(opacity=0);
5.css3中border-radius
animation 加前缀-moz-等
十九.css中继承问题
1.所有text相关属性都被继承
如 font-family font-size;
font-style;font-weight;font;font-variant;letter-spacing.line-height;text-align
textindent; text-transfrom word-spacing
2.所有的list相关属性都会被继承list-stylelist-image
3.color属性也会被继承a标签除外
4.不是所有的属性都会被继承
下面是优先级总结：
1)id >
class>标签，他们之前的权重大约是4：2：1
2)指定的比继承的级别要高
3)具体的级别要高
4)内部的样式高于外部嵌入的样式
5)important级别最高。
二十.图片预加载
var img=new Image();
img.src="https://www.baidu.com/img/bd_logo1.png";
img.οnerrοr=function(){
console.log("图片加载失败！");
};
img.οnlοad=function(){
console.log("图片加载成功！");
document.getElementByIdx_x_x("demo").src=img.src;
}
二十一.内核
1.Gecko 内核前缀为-moz- 火狐浏览器
2.Webkit 内核前缀为-webkit- 也叫谷歌内核，chrome 浏览器最先开发使用，safari
浏览器也使用该内核。国内很多浏览器也使用了webkit 内核，如360 极速、世界之窗、猎豹等。
3.Trident 内核前缀为-ms- 也称IE 内核
4.Presto 内核前缀-o- 目前只有opera 采用
二十二.前端性能优化
1.书写html的时候做到结构语义化
结构中主要包括了head和body两个部分，
head中包括了一些我们seo很有用的东西title，description，keywords，这些东西在网页抓取是很有帮助
body中标签的合理使用，h标签的断层，h1标签的使用(PS：就是按照h1,h2,h3,h4....，不要中间漏掉h2)
在标签中不要出现style、onclick这样的内联样式和事件，减少代码的耦合性，注意结构与表现、行为的分离
2.css，js文件数量以及大小的优化
一般情况下建议css和js采用外联式，减少重复性代码，代码重复利用，在这里显得特别重要
3.背景图数量以及大小的优化
用雪碧图
4.作为大型网站来说，首页使用内联式样式表，这样可以减少http请求数的同时，也可以防止裸奔。当然其他页面需要使用外联样式表，这样才可以方便维护
把样式表置于顶部
把脚本置于页面底部
避免使用滤镜
剔除重复脚本
减少DOM访问
二十三.css hack
不同浏览器对css的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。简单而言csshack就是让你的css代码兼容不同的浏览器，当然，我们也可以反过来利用csshack为不同浏览器定制不同的css效果
三种表现形式
1.html头部引用
IE6:
IE7:
IE8:
2.css类内部hack
3.选择器hack
ie6能识别_ *不能识别！important
ie7*能识别！important
firefox两个均不能识别能识别！important
*html只对ie6生效*+html只对ie7生效
二十四.mvc
模型，视图，控制器
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。
View(视图)是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
Controller(控制器)是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
二十五.oop
扩展性
复用性
可维护性
二十六.append appendto
在元素内部后面插入
$(选择器).append(内容);
$(内容).append(选择器);
二十七.xhtml与html的区别
XHTML 语法上要求更严谨些。
XHTML 要求正确嵌套
XHTML 所有元素必须关闭
XHTML 区分大小写
XHTML 属性值要用双引号
XHTML 用 id 属性代替 name 属性
XHTML 特殊字符的处理
二十八.ie6bug
IE6双倍边距bug
当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，
而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug。
超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序:
L-V-H-A
IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left
或者相对IE6定义.left margin-right:-3px;
IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img
为display:block
ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,
3.css里面加上line-height:0;然后div里面加上#nbsp;,
(#换成&)
二十九.清除浮动的方式
1.父级div定义height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
2.结尾处加空div标签clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3.父级div定义伪类:after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题(目前：大型网站都有使用，如：腾迅，网易，新浪等等)
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码
4.父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
5.父级div定义overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
6.父级div也一起浮动
原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。
三十.typeof 运算符将返回下列值之一
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
三十一.split与join的区别
你用split，是把一串字符(根据某个分隔符)分成若干个元素存放在一个数组里。而Join是把数组中的字符串连成一个长串，可以大体上认为是split的逆操作。
三十二.pop尾部移除
push尾部添加
shift头部移除
unshift头部添加
三十三.普通事件只支持单个事件，而事件绑定可以添加多个事件，就这么简单。
三十四.ie和标准下有哪些兼容性的写法
var oEvent=ev||event;ie:event非ie:ev
var
scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var
scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var clientWidth=document.documentElement.clientWidth ||
document.body.clientWidth
三十五：reset文件
reset.css 可以将浏览器默认的样式清除掉，这样做会使我们的CSS 或html 标签更加方便准确。假如我们不初始化CSS
样式属性，将会增大CSS 代码
量，所以使用初始化文件会为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。
三十六：bootstrap栅格系统
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12
列。它包含了用于简单
的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
.container.row.col-lg-.col-md-.col-sm-
.col-xs-
数组去重
var arr=[25,25,14,56,48,14,2,64,48];
//
数组去重第一种(obj)
//
function
quchong(a){
//
var obj={};
//
for(var i=0;i<
a.length;i++){
//
obj[a[i]]=i;
//
}
//
return Object.keys(obj);
//
}
//
console.log(quchong(arr));
//
数组去重其二种(indexOf)
//
function
quchong(a){
//
var arr1=[];
//
for(var i=0;i<
a.length;i++){
//
if(arr1.indexOf(a[i])<0){
//
arr1.push(a[i]);
//
}
//
}
//
return arr1;
//
}
//
console.log(quchong(arr));
//
数组去重第三种(常规)
//
function
quchong(a){
//
var arr1=[];
//
for(var i=0;i<
a.length;i++){
//
var
flag=true;
//
for(var
j=i+1;j< a.length;j++){
//
if(a[i]==a[j]){
//
flag=false;
//
}
//
}
//
if(flag){
//
arr1.push(a[i]);
//
}
//
}
//
return arr1;
//
}
//
console.log(quchong(arr));
url地址解析
function search(){
var
a=window.location.search.length>1?window.location.search.substring(1):[];
var b=
a.length>0?
a.split("&"):[];
var
obj={};
for(var
i=0;i< b.length;i++){
var arr=
b[i].split("=");
if(arr[0]){
obj[arr[0]]=arr[1];
}
}
console.log(obj);
}
search();
冒泡排序
var aa=[24,53,23,78,54,1,32,10];
function
maopao(a){
var temp, i,j;
for(i=0;i<
a.length;i++){
for(j=0;j
if(a[j]>a[j+1]){
temp=a[j];
a[j]=a[j+1];
a[j+1]=temp;
}
}
}
return a;
}
console.log(maopao(aa));
快速排序
var aa=[24,53,23,78,54,1,32,10,20];
function quickSort(a){
if(a.length<=1){
return a;
}
var
pivotIndex=Math.floor(a.length/2);
var pivot=
a.splice(pivotIndex,1)[0];
//splice返回的是一个数组，取第一个
var left=[];
var right=[];
for(var i=0;i<
a.length;i++){
if(a[i]
left.push(a[i]);
}else {
right.push(a[i]);
}
}
return
quickSort(left).concat([pivot],quickSort(right));
}
console.log(quickSort(aa));
1607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
