前端面试题个人总结

一、HTML

1、html5的新特性有哪些？　　　　

（1）新的文档类型 (New Doctype) <!DOCTYPE html>；

（2）脚本和链接无需写属性type (No More Types for Scripts and Links)： type="text/css"可省；

（3）语义化标签：Header，Footer ，nav，article，aside，section，等等；

（4）Hgroup：用<h1>和<h2>标签来分别定义。然而，这种定义没有说明这两者之间的关系。而且，h2标签的使用会带来更多问题，比如该页面上还有其他标题的时候。在HTML5中，我们可以用hgroup元素来将它们分组，这样就不会影响文件的大纲。

（5）标记元素 (Mark Element)

（6）图形元素 (Figure Element)

（7）重新定义<small> (Small Element redefined)

（8）占位符 (Placeholder)你可以提前设置好一些信息，当用户开始输入时，文本框中的文字就消失。

（9）必要属性required (Required Attribute)HTML5中的新属性“required”指定了某一输入是否必需

（10）Autofocus 属性 (Autofocus Attribute)HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”或聚焦，默认情况下，我们现在可以利用自动聚焦属性。

（11）Audio 支持 (Audio Support)

（12）Video 支持 (Video Support)

（13）视频预载 (Preload attribute in Videos element)当用户访问页面时这一属性使得视频得以预载。为了实现这个功能，可以在<video>元素中加上preload="preload"或者只是preload。

（14）显示控制条 (Display Controls)为了渲染出播放控制条，我们必须在video元素内指定controls属性。

（15）正规表达式 (Regular Expressions)HTML5中新的pattern属性让我们能够在标签处直接插入一个正规表达式。

（16）拖放（Drag 和 drop）是 HTML5 标准的组成部分。

（17）canvas 元素用于在网页上绘制图形。

（18）HTML5 支持内联 SVG。

·SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

·SVG 用于定义用于网络的基于矢量的图形

·SVG 使用 XML 格式定义图形

·SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

·SVG 是万维网联盟的标准

（19）HTML5 Geolocation（地理定位）用于定位用户的位置。

（20）在客户端存储数据，HTML5 提供了两种在客户端存储数据的新方法：

· localStorage - 没有时间限制的数据存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

· sessionStorage - 针对一个 session 的数据存储，用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

（21）使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

　　· 离线浏览 - 用户可在应用离线时使用它们

　　· 速度 - 已缓存资源加载得更快

　　· 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

（22）web worker 是运行在后台的 JavaScript，不会影响页面的性能。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

（23）HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

（24）HTML5 的 Input的新改变：

——input元素type属性的值：

color ：颜色控件。

date ：日期控件。

email ：电子邮件地址输入框。

month ：年月日历控件。

number ：数值输入框。

range ：滑动条。

search ：搜索框。

tel ：电话号码输入框。

time ：时间控件。

url ：网址输入框。

week ：周数控件。

——新的 input 属性：

autocomplete ：是否显示与现在输入内容相匹配的历史输入记录。

autofocus ：当页面加载完成后，此元素获得焦点。

form ：设置元素归属表单的ID。

formaction ：设置表单action属性的值。

formenctype ：设置表单enctype属性的值。

formmethod ：设置表单method属性的值。

formnovalidate ：关闭表单的验证。

formtarget ：设置表单target属性的值。

max ：设置<input>元素中数字或日期控件的最大值。

min ：设置<input>元素中数字或日期控件的最小值。

minlength ：设置文本输入控件的内容最小长度。

pattern ：设置元素文本内容需匹配的正则表达式。

placeholder ：设置文本控件的预先显示内容。

readonly ：设置元素是否只读。

required ：设置控件是否为必填项。

（25）HTML5 的新的表单元素：

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素：

datalist

keygen

output

（26）新的 form 属性：

autocomplete

novalidate

（27）手机端html5触屏事件(touch事件)

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

二、CSS

1、CSS3的新特性：

（1）边框圆角阴影反射

border-radius

box-shadow

border-image

box-reflect

（2）背景

background-size 调整背景图片的大小，对背景图片进行拉伸，使其完成填充内容区域：。

background-origin属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

background-clip 规定背景的绘制区域。

background-size 规定背景图片的尺寸。

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E))。渐变效果

background-break 属性用来控制背景怎样在这些不同的盒子中显示。

多背景图片

（3）文字

text-shadow ：可向文本应用阴影。

word-wrap :在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。

text-overflow：设置或检索当当前行超过指定容器的边界时如何显示。

Text-decoration：文字渲染。

@font-face：您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

（5）动画效果

transform（translate，rotate，scale，skew，matrix）：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

3D 转换 rotateX&rotateY

transition：通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

animation：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

（6）column-count，column-gap，column-rule：创建多个列来对文本进行布局，可以制作报纸的效果。

（7）新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。resize，box-sizing，outline-offset

（8）CSS3选择器：直接子元素（body>div），:first-child，:last-child，:nth-child(even)， :nth-child(odd)，:not()等等

（9）颜色

颜色的透明度：rgba。

HSL 的透明度：hsla。

（10）css3盒子模型

　　display：box；

　　box-flex：1；

三、JS

1、如何消除一个数组里面的重复元素？

function(arr){

　　var arr1=new Array();

　　var arr2=new Array();

　　arr1=arr;

　　for(var i=0;i<arr1.length;i++){

　　　　if(arr2.indexOf(arr1[i])==-1){

　　　　　　arr2.push(arr1[i]);

　　　　}

　　return arr2;

}

2、输入一个字符串，找出出现最多的字符并返回该字符以及出现的次数。

function(str){　

var strs = new Array();

strs=str.split('');

var obj = {};

for(var i=0;i<strs.length;i++){

var v = strs[i];

if(obj[v] && obj[v].value == v){

　　obj[v].count ++;

}else{

obj[v] = {};

obj[v].count = 1;

obj[v].value = v;

}

for(key in obj){

　　console.log(obj[key].value +'='+obj[key].count+';'); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

}

3、数组从小到大排序

方法一：

function (arr){

var a =new Array();

a=arr;
for(var j=0;j<a.length;j++){
　　for(var i=j+1;i<a.length;i++){
　　　　if(a[j]>a[i]){
　　　　　　var min=a[i];
　　　　　　a[i]=a[j];
　　　　　　a[j]=min;
　　　　}
　　}
}
return a;

}

方法二、

function sortNumber(a,b){
　　return a - b
}

function(arr){

　　var a=new Array();

　　a=arr.sort(sortNumber);

　　return a;

}

快速排序法：

var quickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　var pivotIndex = Math.floor(arr.length / 2);

　　var pivot = arr.splice(pivotIndex, 1)[0];

　　var left = [];

　　var right = [];

　　for (var i = 0; i < arr.length; i++){

　　　　if (arr[i] < pivot) {

　　　　　　left.push(arr[i]);

　　　　} else {

　　　　　　right.push(arr[i]);

　　　　}

　　return quickSort(left).concat([pivot], quickSort(right));

};

四、其他

1、margin负值可实现：

· 左右列固定，中间列自适应布局

· 去除列表右边框

· 负边距+定位：水平垂直居中

· 去除列表最后一个li元素的border-bottom

· 多列等高

2、定义

(1)执行环境

a、全局执行环境：在一个页面中，第一次载入JS代码时创建一个全局执行环境，全局执行环境是最外围的执行环境，在Web浏览器中，全局执行环境被认为是window对象。因此，所有的全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁，全局执行环境直到应用程序退出后---例如关闭浏览器和网页---时才被销毁。

b、函数执行环境：每个函数都有自己的执行环境，当执行进入一个函数时，函数的执行环境就会被推入一个执行环境栈的顶部并获取执行权。当这个函数执行完毕，它的执行环境又从这个栈的顶部被删除，并把执行权并还给之前执行环境。这就是ECMAScript程序中的执行流。

(2)作用域

就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期，在JavaScript中变量的作用域有全局作用域和局部作用域。

a、全局作用域：任何地方都可以定义拥有全局作用域的变量。

（a.没有用var声明的变量（除去函数的参数）都具有全局作用域，成为全局变量，所以声明局部变量必须要用var。

　　b.window的所有属性都具有全局作用域

　　c.最外层函数体外声明的变量也具有全局作用域）

b、局部作用域:局部变量的优先级高于全局变量。

（a.函数体内用var声明的变量具有局部作用域，成为局部变量

　　b.函数的参数也具有局部作用域）

JavaScript是函数作用域（function scope），没有块级作用域。无论函数体内的变量在什么地方声明，对整个函数都是可见的，即JavaScript函数里声明的所有变量都被提前到函数体的顶部，只是提前变量声明，变量的赋值还是保留在原位置

(3)作用域链

JavaScript的变量都是对象的属性，而该对象可能又是其它对象的属性，而所有的对象都是全局对象的属性，所以这些对象的关系可以看作是一条链，由于每个对象都有一个作用域，所以形成了一个作用域链。链头就是变量所处的对象，链尾就是全局对象。当代码在一个环境中执行时，会创建变量对象的一个作用域链来保证对执行环境有权访问的变量和函数的有序访问。

(4)原型对象

a.只要创建了一个新函数，就会为该函数创建一个prototype属性，这个属性指向函数的原型对象。

b.所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。

c.当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。

d.普通对象没有prototype,但有__proto__属性。

(5)原型链

假如我们让原型对象等于另一个类型的实例，则此时的原型对象将包含一个指向另一个原型的实例，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条，这就是原型链。

【注】：所有引用类型默认都继承了Object，而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例，因此默认原型都会包含一个内部指针，指向Object.prototype。这也正是所有自定义类型都会继承toString()，valueOf()等默认方法的根本原因。

(6)闭包

a.概念：有权访问另一个函数作用域中的变量的函数。简单理解为“定义在一个函数内部的函数”。

b.好处：保护函数内的变量安全,加强了封装性；在内存中维持一个变量（缓存）；匿名自执行函数；模拟面向对象编程。

c.缺点：常驻内存，会增大内存使用量，使用不当很容易造成内存泄露，更重要的是，对闭包的使用不当会造成无效内存的产生。

d.应用场景：使用闭包代替全局变量；函数外或在其他函数中访问某一函数内部的参数；包装相关功能；为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点。

(7)内核

Trident(IE内核)，Gecko(Firefox内核)，Presto(Opera前内核) (已废弃)，Webkit(Safari内核,Chrome内核原型,开源)

（Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核(在脚本理解方面，Chrome使用自己研发的V8引擎)。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。）

(8)javascript的数据类型：字符串、数字、布尔、数组、对象、Null、Undefined

(9)angular的工作原理：

--AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的.

--我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.这样, 就实现了NG的双向数据绑定

(10)web语义化

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.

语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。

事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。

(11)模块化和封装

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。

优点：

可维护性

1.灵活架构，焦点分离

2.方便模块间组合、分解

3.方便单个模块功能调试、升级

4.多人协作互不干扰

可测试性

1.可分单元测试

缺点：

性能损耗

1.系统分层，调用链会很长

2.模块间通信,模块间发送消息会很耗性能

封装最基本的意思就是对外提供简单功能单一的方法，比如一个方法根据不同的参数获取不同的页面元素如点开头的是查找class的元素，#开头的是查找id，比如jquery的方法都是封装好的。

(12)mvc

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

(13)绝对定位和相对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

3、如何实现继承？？（继承是指一个对象直接使用另一对象的属性和方法。）

——构造函数的继承

a.构造函数绑定

使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

　　（父对象的构造函数）.apply(this, arguments);

b.prototype模式

使用prototype属性。如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。

　　Cat.prototype = new Animal();//将Cat的prototype对象指向一个Animal的实例。它相当于完全删除了prototype 对象原先的值，然后赋予一个新值。

　　Cat.prototype.constructor = Cat;//任何一个prototype对象都有一个constructor属性，指向它的构造函数。如果没有"Cat.prototype = new Animal();"这一行，Cat.prototype.constructor是指向Cat的；加了这一行以后，Cat.prototype.constructor指向Animal。更重要的是，每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。因此，在运行"Cat.prototype = new Animal();"这一行之后，cat1.constructor也指向Animal！这显然会导致继承链的紊乱（cat1明明是用构造函数Cat生成的），因此我们必须手动纠正，将Cat.prototype对象的constructor值改为Cat。这就是第二行的意思。

c.直接继承prototype

第三种方法是对第二种方法的改进。由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过 Animal()，直接继承Animal.prototype。

Animal.prototype.species = "动物";

Cat.prototype = Animal.prototype;

Cat.prototype.constructor = Cat;//Animal.prototype对象的constructor属性也改掉了

//优点是效率比较高（不用执行和建立Animal的实例了），比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象，那么任何对Cat.prototype的修改，都会反映到Animal.prototype。

d.利用空对象作为中介

　function extend(Child, Parent) {

　　　　var F = function(){};

　　　　F.prototype = Parent.prototype;

　　　　Child.prototype = new F();

　　　　Child.prototype.constructor = Child;

　　　　Child.uber = Parent.prototype;

　　}

//这时，修改Cat的prototype对象，就不会影响到Animal的prototype对象。这个函数就是YUI库如何实现继承的方法。

e.拷贝继承

纯粹采用"拷贝"方法实现继承。

　　function extend2(Child, Parent) {

　　　　var p = Parent.prototype;

　　　　var c = Child.prototype;

　　　　for (var i in p) {

　　　　　　c[i] = p[i];

　　　　　　}

　　　　c.uber = p;

　　}

——非构造函数的继承

a.object()方法

　　function object(o) {

　　　　function F() {}

　　　　F.prototype = o;

　　　　return new F();

　　}

var Doctor = object(Chinese);//第一步先在父对象的基础上，生成子对象

Doctor.career = '医生';//再加上子对象本身的属性

alert(Doctor.nation); //中国(子对象已经继承了父对象的属性了。)

b.浅拷贝

把父对象的属性，全部拷贝给子对象，也能实现继承。(只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。)

　　function extendCopy(p) {

　　　　var c = {};

　　　　for (var i in p) {

　　　　　　c[i] = p[i];

　　　　}

　　　　c.uber = p;

　　　　return c;

　　}

var Doctor = extendCopy(Chinese);

　　Doctor.career = '医生';

　　alert(Doctor.nation); // 中国

(但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。)

c.深拷贝

所谓"深拷贝"，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用"浅拷贝"就行了。

　　function deepCopy(p, c) {

　　　　var c = c || {};

　　　　for (var i in p) {

　　　　　　if (typeof p[i] === 'object') {

　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};

　　　　　　　　deepCopy(p[i], c[i]);

　　　　　　} else {

　　　　　　　　　c[i] = p[i];

　　　　　　}

　　　　return c;

　　}

var Doctor = deepCopy(Chinese);

//现在，给父对象加一个属性，值为数组。然后，在子对象上修改这个属性，这时，父对象就不会受到影响了。目前，jQuery库使用的就是这种继承方法。

4、ajax的格式

a.url:

要求为String类型的参数，（默认为当前页地址）发送请求的地址。

b.type:

要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

c.timeout:

要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

d.async:

要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

e.cache:

要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

f.data:

要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

g.dataType:

要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

json：返回JSON数据。

jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

h.beforeSend：

要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

function(XMLHttpRequest){

this; //调用本次ajax请求时传递的options参数

}

i.complete：

要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatus){

this; //调用本次ajax请求时传递的options参数

}

j.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

(1)由服务器返回，并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this; //调用本次ajax请求时传递的options参数

}

k.error:

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

function(XMLHttpRequest, textStatus, errorThrown){

//通常情况下textStatus和errorThrown只有其中一个包含信息

this; //调用本次ajax请求时传递的options参数

}

l.contentType：

要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

m.dataFilter：

要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){

//返回处理后的数据

return data;

}

n.dataFilter：

function(data, type){

//返回处理后的数据

return data;

}

o.global：

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

p.ifModified：

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

q.jsonp：

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

r.username：

要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

s.password：

要求为String类型的参数，用于响应HTTP访问认证请求的密码。

t.processData：

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

u.scriptCharset：

要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

5、link和import的区别：

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。

import和link的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

6、行内元素和块级元素的区别：

	块级元素	行内元素
常见元素	div、p、form、ul、ol、li	span、strong、em
特性	独占一行，默认情况下，其宽度自动填满其父元素宽度	不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
width、height属性	可以设置，设置了宽度还是独占一行	无效
margin和padding属性	可以设置	水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
对应的相关display属性	block	inline
切换	display:inline变成行内元素	display:block变成块级元素

7、hack有哪些？

a.条件hack　

<!--[if IE]>//<!--[if IE 6]>//<!--[if gte IE 6]>//<!--[if ! IE 8]>//<!--[if !IE]>

　　这段文字只在IE浏览器显示

　　<![endif]-->

b.类内属性hack(*,+,#,_,-,\0,\9\0)

　　.style{

　　　　*color:#000;

　　}

c.选择器hack

　　*前缀只对IE6生效;*+前缀只对IE7生效;

　　*html{

　　}

8、兼容性问题

a.png图片在ie中背景不透明

　　·css使用滤镜filter

　　·js

　　·png转换为gif图片

b.清除浮动的方法

　　·父级元素定义高度;

　　·clear:both;

　　·overflow:hidden;

　　·ie6下需要加上zoom:1;

　　.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

　　.clearfloat{zoom:1}

c.IE6怪异解析之padding与border算入宽高

　　解决方法：加入文档声明<!doctype html>

d.IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）

　　解决方法：display:inline

e.position下的left，bottom错位

　　解决方法：为父级(relative层)设置宽高或添加*zoom:1

f.100% 高度

　　在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%。

g.Overflow Bug

　　在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative。

h.IE下z-index的bug

　　在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。

i.清除浮动

　　如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。

9、overflow：hidden；可以解决边距重合问题。以及解决清除浮动问题。

10、水平垂直居中方法

a.容器内单行文字，text-align：center；line-height：（height）；

b.容器内多行文字

转载于:https://www.cnblogs.com/liujiale/p/6681260.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

双眼皮后后去上班
...
2024/4/27 14:02:35
javascript面试题
原文链接：http://www.3mooc.com/front/articleinfo/198 1，介绍js的基本数据类型。 Undefined、Null、Boolean、Number、String 2，介绍js有哪些内置对象？ Object 是 JavaScript 中所有对象的父对象数据封装类对象&#xff1a…...
2024/4/21 12:44:29
计划出色的用户体验的3个步骤
用户体验（UX）是设计产品（在本例中为软件程序或应用程序）的过程，以便它们为最终用户提供有意义且相关的体验。在“ UX之父”唐诺曼（Don Norman）发表他的著作《日常事物的设计》之后&#xff0c…...
2024/4/21 12:44:27
Vue从浅及深全面概述
### Vue > Vue是一个前端js框架，由尤雨溪开发，是个人项目 Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧a…...
2024/4/21 12:44:26
一大波vue的福利来了、、、
Vue Vue是一个前端js框架，由尤雨溪开发，是个人项目 Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS&…...
2024/4/27 2:46:53
Vue的相关知识点
Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅&…...
2024/4/21 12:44:23
深圳北大医院韩式三点韩式综合双眼皮图片
...
2024/4/21 12:44:22
双眼皮开眼角方式
...
2024/4/21 12:44:22
在线安装html/jsp/xml editor插件（非常可靠）
在线安装eclipse中html/jsp/xml editor插件（非常可靠），eclipseeditor之前有一篇文章也是安装eclipse中的web开发插件，但是经过很多人使用，那种方法，不是所有人使用都可以。接下来，找到一种非常管用的方法，就是在线安装。废话不多说，这种方法绝对可以安装成功。 1.打…...
2024/4/21 12:44:22
JS（总结）
基础 Javascript是一种弱类型语言，它分别有什么优点和缺点弱类型语言：简单好用，更灵活多变。但是会牺牲性能，比如一些隐含的类型转换强类型语言：类型转换的时候非常严格，，强类型语言是直接操纵…...
2024/4/21 12:44:19
割的双眼皮和刚刚做完埋线双眼皮的图片
...
2024/4/20 16:16:05
微创妈妈给滴双眼皮需要定型吗
...
2024/4/27 13:45:48
埋线双眼皮是什么样子的
...
2024/4/20 16:16:02
埋线双眼皮开扇形什么样子
...
2024/4/27 14:07:03
埋线双眼皮刚做完不一样
...
2024/4/27 13:37:47
割双眼皮10天了还很丑
...
2024/4/21 12:44:17
眼皮脂肪多能定位双眼皮眼睛扯住的
...
2024/4/21 12:44:17
2021-02-23
https://www.cnblogs.com/WindyZ/articles/ComminicationTheroy1_21.html 深入浅出通信原理Python代码版深入浅出通信原理是陈爱军的心血之作，于通信人家园连载，此处仅作python代码笔记训练所用陈老师的连载从多项式乘法讲起，一步一步引出…...
2024/4/22 21:09:41
【总结】vue.js
一、MVVM View，Model是Vue.js的核心。实例化Vue的过程就是定义MVVM各个组成部分的过程。 1. 定义View 2. 定义Model 3. 创建一个Vue实例或"ViewModel"，它用于连接View和Model 举例：  <d…...
2024/4/27 6:56:24
前端面试总结（一）JS基础
1、async/await的本质本质：Promise的语法糖。优点： (1)简化多余的{}嵌套，可读性友好; (2)易于整理逻辑，编码体验良好. 缺点： (1)屏蔽了原理，增加学习成本; (2)所有的可以并发的操作，使用…...
2024/4/21 12:44:13

前端面试题个人总结

相关文章

最新文章