WEB前端基础

1、JavaScript中的“=、==、===”区别？

=：即赋值运算；

==：判断两个变量是否相同，仅限于值，如果值相同而类型不同，那么JavaScript引擎会在内部做类型转换；

===：判断两个变量是否相同，无论是值还是类型，如果类型不同而值相同，也会返回false，而引擎不会在内部进行转换。

 

2、JavaScript中的“undefined、null”区别？

通俗地讲，undefined出现的原因是JavaScript引擎不知道这是个什么东西，而对于null，JavaScript引擎识别了它，但是没有被分配内存空间。

undefined的类型就是undefined，而null的类型是object。

 

3、简述javascript的作用域和闭包？

js变量的作用域是指：函数内定义的局部变量只在此函数内有效，而全局变量可以全局有效。

闭包的作用就在于能够改变局部变量的作用域，将值保存下来，但是如果使用不当会造成无法回收变量，引起性能问题，甚至崩溃。

 

4、对web标准以及w3c的理解和认识？

标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率。使用外链css和js脚本，结构行为表现分离，内容能被更多广泛的设备所访问,更少的代码和组件，容易维护，改版方便，不需要变动页面内容。

 

5、Html和xhtml有什么区别？

html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。

最主要的不同:

XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

 

6、严格模式和混杂模式的区分，以及如何触发这2种模式？

严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。

混杂模式是一种向后兼容的解析方法。

触发标准模式或者说严格模式很简单，就是Html前申明正确的DTD，出发混杂模式可以在html文档开始不声明DTD，或者在DOCTYPE前加入XML声明。

 

7、行内元素有哪些?块级元素有哪些？CSS盒模型？

行内元素: br span input a

块级元素IV P H1 H2 FORM ul

CSS盒模型内容:padding border margin

 

8、css引入的方式有哪些?link和@import的区别？

引入方式3种：行内添加定义style属性值，页面头部内内嵌调用和外链调用，

区别：

1.link是xhtml标签，除了加载css外，还可以定义RSS等其他事务，@import只能加载CSS

2.link引用CSS时候，页面载入的时候同时加载，@import需要页面网页完全载入后加载

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

4.link支持使用javascript控制DOM去改变样式，但是@import不支持。

 

9、CSS选择符有哪些?优先级算法如何计算?内联和Important哪个优先级高？

CSS选择符有类选择符，属性选择符，ID选择符，优先级算法是基于特殊性值进行计算的。分别如下：ID属性 0.1.0.0

类属性选择器，属性选择器，伪类 0.0.1.0 元素选择符，伪元素选择符 0.0.0.1

通配选择器对特殊性没有任何贡献值。

important优先级高

10、前端页面有哪三层构成，分别是什么，作用是什么？

结构层：html 表示层:css 行为层：js

 

11、页面的哪些浏览器你测试过，分别内核是什么？

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit，Google与Opera Software共同开发)

 

12、img标签上的title和alt属性区别是什么？

alt是当图片不能正常显示的时候，用文字代替

title该属性提供信息

 

13、你如何对网站的文件和资源进行优化？

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

 

14、什么是语义化的HTML？

直观的认识标签

对于搜索引擎的抓取有好处

 

15、清除浮动的几种方式，各自的优缺点？

使用空标签清除浮动 clear:both（理论上能清楚任何标签，增加无意义的标签）

使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端，使用zoom:1用于兼容IE）

使用afert伪元素清除浮动(用于非IE浏览器)

 

16、javascript的typeof返回哪些数据类型？

Object number function boolean underfind

 

17、例举3种强制类型转换和2种隐式类型转换？

强制（parseInt,parseFloat,number）

隐式（== – ===）

 

18、split() join() 的区别？

前者是切割成数组的形式，后者是将数组转换成字符串

 

19、数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

 

20、闭包是什么，有什么特性，对页面有什么影响？

闭包就是能够读取其他函数内部变量的函数。

 

21、解释jsonp的原理，以及为什么不是真正的ajax？

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

 

22、.javascript的本地对象，内置对象和宿主对象？

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

 

23、document load 和document ready的区别？

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

 

24、javascript的同源策略？

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

 

25、编写一个数组去重的方法

function oSort(arr)

{

var result ={};

var newArr=[];

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

{

if(!result[arr])

{

newArr.push(arr)

result[arr]=1

}

}

return newArr

}

 

26、jQuery中有哪几种类型的选择器？

从我自己的角度来讲，可以有3种类型的选择器，如下：

基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。

层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。

过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。

 

 

27、请使用jQuery将页面上的所有元素边框设置为2px宽的虚线？

这正是jQuery选择器上场的时候了，代码如下：

<script language="javascript" type="text/javascript">

         $("*").css("border", "2px dotted red");

</script>

 

28、当CDN上的jQuery文件不可用时，该怎么办？

为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>

<script type='text/javascript'>//<![CDATA[

if (typeof jQuery == 'undefined') {

document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));

}//]]>

</script>

 

29、怎样用jQuery编码和解码URL？

在jQuery中，我们可以使用以下方法实现URL的编码和解码。

encodeURIComponent(url) and decodeURIComponent(url)

 

30、如何用jQuery禁用浏览器的前进后退按钮？

实现代码如下：

<script type="text/javascript" language="javascript">

 

$(document).ready(function() {

     window.history.forward(1);

     //OR

     window.history.forward(-1);

});

 

</script>

 

31、你为什么要使用jquery？

因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。 而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

 

32、jquery对象和dom对象是怎样转换的？

jquery转DOM对象:jQuery 对象是一个数组对象，可以通过[index]的丰富得到相应的DOM对象还可以通过get[index]去得到相应的DOM对象。DOM对象转jQuery对象:$(DOM对象)

 

33、你是如何使用jquery中的ajax的？

如果是一些常规的ajax程序的话，使用load(),$.get(),$.post(),就可以搞定了，一般我会使用的是$.post() 方法。如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用$.ajax()

 

34、你觉得jquery中的ajax好用吗，为什么？

好用的。 因为jQuery提供了一些日常开发中的快捷操作，例 load，ajax，get，post等等，所以使用jQuery开发ajax将变得极其简单，我们就可以集中精力在业务和用户的体验上，不需要去理会那些繁琐的XMLHttpRequest对象了。

 

35、jquery中$.get()提交和$.post()提交有区别吗？

$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

get方式传输的数据大小不能超过2KB 而POST要大的多

GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

 

36、在jquery中你是如何去操作样式的？

addClass() 来追加样式 ，removeClass() 来删除样式，toggle() 来切换样式

 

37、你使用过jquery中的动画吗，是怎样用的？

使用过。

hide() 和 show() 同时修改多个样式属性。像高度，宽度，不透明度。 fadeIn() 和fadeOut() fadeTo() 只改变不透明度

slideUp() 和 slideDown() slideToggle() 只改变高度

animate() 属于自定义动画的方法

 

38、jQuery是如何处理缓存的？

要处理缓存就是禁用缓存。

通过$.post() 方法来获取数据，那么默认就是禁用缓存的。

通过$.get()方法 来获取数据，可以通过设置时间戳来避免缓存。可以在URL后面加上+(+new Date)例 $.get('ajax.xml?'+(+new Date),function () { //内容 }); 3 通过$.ajax 方法来获取数据，只要设置cache:false即可。

 

39、$.getScript()方法 和 $.getJson() 方法有什么区别？

$.getScript() 方法可以直接加载.js文件，并且不需要对javascript文件进行处理，javascript文件会自动执行。

$.getJson() 是用于加载JSON 文件的 ，用法和$.getScript()

 

40、你使用过哪些数据格式，它们各有什么特点？

HTML格式 ,，JSON格式，javascript格式，XML格式

HTML片段提供外部数据一般来说是最简单的。

如果数据需要重用，而且其他应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择。

而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

 

41、jQuery 能做什么？

获取页面的元素 

修改页面的外观

改变页面大的内容

响应用户的页面操作

为页面添加动态效果

无需刷新页面，即可以从服务器获取信息

简化常见的javascript任务

 

42、在ajax中data主要有几种方式？

三种，html拼接的，json数组，form表单经serialize()序列化的。

 

43、你知道jQuery中的事件冒泡吗，它是怎么执行的，如何来停止冒泡事件？

知道，事件冒泡是从里面的往外面开始触发。在jQuery中提供了stopPropagation()方法可以停止冒泡。

 

44、Ajax原理？

简述： Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新。

Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

总结：我们可以看出，XMLHttpRequest对象完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。