前端js面试题WORD.docx

前端js面试题WORD.docx

《前端js面试题WORD.docx》由会员分享，可在线阅读，更多相关《前端js面试题WORD.docx（28页珍藏版）》请在冰豆网上搜索。

前端js面试题WORD

JQ常见选择器？

，号选择器，分组选择器。

空格，祖父选择器。

>大于号，父子选择器。

+号选择器，紧接下一个兄弟选择器。

~号，元素之后所有的siblings元素。

：

first，：

last，：

not，：

first-child，:

last-child,:

animated.：

checked

jQuery插件实现方式，分别介绍？

jQuery.fn.extend封装直接在$下面的方法，就是根下面，

扩展jQuery元素集来提供新的方法（通常用来制作插件）。

$.extend用来在jQuery命名空间上增加新函数。

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

批量的方法用fn，静态的用$.extend（），不建议用扩展到根下面。

bind和live的区别?

live方法其实是bind方法的变种，其基本功能就同bind方法的功能是一样的，都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后生成的元素也可以绑定相应的事件.

js和jq如何转换？

jQuery对象是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如：

$（"#img"）.attr（"src","test.jpg"）;这里的$（"#img"）就是jQuery对象。

DOM对象就是Javascript固有的一些对象操作。

DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。

例如：

document.getElementById（"img"）.src=“test.jpg"；这里的document.getElementById（"img"）就是DOM对象。

$（"#img"）.attr（"src","test.jpg"）;和document.getElementById（"img"）.src="test.jpg";是等价的，是正确的，但是$（"#img"）.src="test.jpg"；或者document.getElementById（"img"）.attr（"src","test.jpg"）;都是错误的。

DOM对象转成jQuery对象

对于已经是一个DOM对象，只需要用$（）把DOM对象包装起来，就可以获得一个

jQuery对象了，$（DOM对象）

如：

varv=document.getElementById（"v"）;//DOM对象

var$v=$（v）;//jQuery对象

转换后，就可以任意使用jQuery的方法。

jQuery对象转成DOM对象

两种转换方式讲一个jQuery对象转换成DOM对象：

[index]和.get（index）；

（1）jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：

var$v=$（"#v"）;//jQuery对象

varv=$v[0];//DOM对象

alert（v.checked）;//检测这个checkbox是否被选中

（2）jQuery本身提供，通过.get（index）方法得到相应的DOM对象

如：

var$v=$（"#v"）;//jQuery对象

varv=$v.get（0）;//DOM对象（$v.get（）[0]也可以）

alert（v.checked）;//检测这个checkbox是否被选中

通过以上方法，可以任意的相互转换jQuery对象和DOM对象，需要再强调的是：

DOM对象才能使用DOM中的方法，jQuery对象是不可以使用ＤＯＭ中的方法

给出一个数组如何去掉重复的项？

实现一个把数组里面的重复元素去除的方法：

主要的是Array的prototype的方法。

vararr=[1,3,5,3,6,9,1,2,2]

vararr=['a','b','a','c','c','ab','bc']

functionremoveRepeat（arr）{

vari,tmpArr=[];

for（iinarr）{

if（tmpArr.join（','）.indexOf（arr[i]）==-1）{

tmpArr.push（arr[i]）;

}

}

returntmpArr;

}

varr=（arremoveRepeatr）;

console.log（r）;

二．方法：

Array.prototype.unique=function（）{

vari,tmpArr=[];

for（iinthis）{

if（typeofthis[i]!

='function'）{

if（tmpArr.join（','）.indexOf（this[i]）==-1）{

tmpArr.push（this[i]）;

}

}

}

returntmpArr;

}

vararr=['a','b','a','c','c','ab','bc'];

varr=arr.unique（）;

console.log（r）;

js如何实现面向对象？

varname='ChenHao';

varemail='haoel（@）';

varwebsite='';

varchenhao={

name:

'ChenHao',

email:

'haoel（@）',

website:

''

};

//以成员的方式chenhao.name;chenhao.email;chenhao.website;

//以hashmap的方式chenhao["name"];chenhao["email"];chenhao["website"];

//我们可以看到，其用function来做class。

varPerson=function（name,email,website）{

this.name=name;this.email=email;this.website=website;this.sayHello=function（）{

varhello="Hello,I'm"+this.name+"，\n"+"myemailis:

"+this.email+"，\n"+"mywebsiteis:

"+this.website;

alert（hello）;

};

};

varchenhao=newPerson（"ChenHao","haoel@",""）;

chenhao.sayHello（）;

Javascript的数据和成员封装很简单。

没有类完全是对象操作。

纯动态！

Javascriptfunction中的this指针很关键，如果没有的话，那就是局部变量或局部函数。

去找最紧跟的上一个function。

Javascript对象成员函数可以在使用时临时声明，并把一个全局函数直接赋过去就好了。

Javascript的成员函数可以在实例上进行修改，也就是说不同实例相同函数名的行为不一定一样。

js如何实现继承?

继承是指一个对象直接使用另一对象的属性和方法

实现方法：

对象冒充，及call（）Apply（）参见上述call和apply的用法。

原型链方式：

js中每个对象均有一个隐藏的__proto__属性，一个实例化对象的__proto__属性指向其类的prototype方法，而这个prototype方法又可以被赋值成另一个实例化对象，这个对象的__proto__又需要指向其类，由此形成一条链。

那么__proto__是什么？

每个对象都会在其内部初始化一个属性，就是__proto__，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

定义一个Dog对象，并增加一个name属性，该属性可以在新建对象时通过参数传入

functionDog（name）{this.name=name;}

//通过原型方式扩展Dog对象

Dog.prototype={

//重新覆盖构造函数让其指向Dogconstructor:

Dog,

Wow:

function（）{

console.group（）;

console.info（"Iam:

"+this.name）;

console.info（"WangWang...."）;

console.groupEnd（）;

},

yelp:

function（）{this.Wow（）;}

};

functionMadDog（name）{Dog.apply（this,[name]）;}

MadDog.prototype=newDog（）;

//重新覆盖构造函数，让其指向MadDog

MadDog.prototype.constructor=MadDog;

MadDog.prototype.yelp=function（）{

self=this;

setInterval（function（）{self.Wow（）;},5000）;

}

varxiaoXian=newDog（"xiaoXian"）;xiaoXian.yelp（）;

varxiaoMang=newMadDog（"xiaoMang"）;xiaoMang.yelp（）;

console.log（xiaoXian.constructor==xiaoMang.constructor）;

如果扩展js中原生的String对象?

string的方法？

String.prototype.name=function（）{}

Slice从字符串的第一个参数提取第二个参数，也可以截取数组。

返回的结果类型：

string/object

Substring从字符串的第一个参数提取第二个参数，返回的结果类型，string。

Indexof返回短字符串在长字符串出现的位置。

Lastindexof返回最后一个短字符串出现的位置。

Replace字符串的替换方法，

Split字符串分割方法，能转换为数组，数组转换字符串，用json（）方法。

document.ready（）和window.onload的区别?

Document.ready（）是jQuery中准备出发的事件，当加载到当前元素就执行了，

Window.onload是整个页面加载之后才执行

闭包是什么？

闭包是有权访问另一个函数作用域中的变量的函数。

闭包是个函数，而它“记住了周围发生了什么”。

表现为由“一个函数”体中定义了“另一个函数”

“闭包”是一个表达式（一般是函数），它具有自由变量以及绑定这些变量的环境（该环境“封闭了”这个表达式）。

1.闭包有权访问函数内部的所有变量。

2.当函数返回一个闭包时，这个函数的作用域将会一直在内存中保存到闭包不存在为止。

functionf（）{

varrs=[];

for（vari=0;i<10;i++）{

rs[i]=function（）{returni;};

}

returnrs;

}

varfn=f（）;

for（vari=0;i

console.log（'函数fn['+i+']（）返回值:

'+fn[i]（））;

}

介绍jQueryeasyUI？

jQueryeasyUI组件使用?

jQueryEasyUI是一组基于jQuery的UI插件集合，而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。

开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

布局layout，上南，下北，左西右东，中间内容，左边的组件是：

tree，手风琴，中间的有tab，tab里有datagrid数据表格，还有数据表格的toolbar工具栏。

对话框dialog；

什么是DOM，什么是DOM？

以及它们的用法？

BOM即浏览器对象模型，浏览器对象模型

（BOM）

使

JavaScript

有能

力与浏览器“对话”，

由于现代浏览器已经（几乎）实现了

JavaScript

交互性方面的相同方法和

属性，因此常被认为是

BOM

的方法和属性。

所有浏览器都支持window对象。

它表示浏览器窗口。

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。

全局变量是window对象的属性。

全局函数是window对象的方法。

甚至HTMLDOM的document也是window对象的属性之一：

Window对象其实是DOM中所有的对象都源自window对象，有location对象，history对象，方法有.Resize（）alert（）.confirm（）.prompt（）.open（）.close（）.setInterval（）.setTimeout（）。

window.open（）-打开新窗口

window.close（）-关闭当前窗口

window.moveTo（）-移动当前窗口

window.resizeTo（）-调整当前窗口的尺寸

DOM的文档对象模型，最顶级的对象是document。

可以js通过操作DOM，就是一个接口，可以访问html的标准方法。

要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。

这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

JSON和JSONP的区别？

JSONP的原理？

JSON（JavaScript

Object

Notation）和JSONP（JSON

with

Padding）虽然只有一个字母的差别，但其实他们根本不是一回事儿：

JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如