⾯试官常问的web前端问题（⼆）
⾯试官常问的 web前端问题 11-20
11.什么是响应式设计？
响应式设计：是关于⽹站的制作或⽹页制作的⼯作，不同的设备有不同的尺⼨和不同的功能。
响应式设计让所有的⼈能在这些设备上让⽹站运⾏正常。
⼀部分是媒体查询和不同的视觉效果。⼀部分是不同的资源（如不同的 Javascript 来处理触摸与点击⾃动适应屏幕的对⽐） 。
12.为什么我们要弃⽤ table 标签
table的缺点 ：只有等 table标签 ⾥的内容全部加载完才能显⽰⽹页。
table：服务器把代码加载到本地服务器的过程中，本来是加载⼀⾏执⾏⼀⾏，但是 table 标签是⾥⾯的东西全都下载完之后才会显⽰出来，那么如果图⽚很多的话就会导致⽹页⼀直加载不出来，除⾮所有的图⽚和内容都加载完。如果要等到所有的图⽚全部加载完之后才显⽰出来会影响⽹页的性能，所以 table 标签现在我们基本放弃使⽤了。
13.iframe 有哪些缺点
iframe的缺点：阻塞主页⾯ onload 事件；影响页⾯并⾏加载（浏览器限制相同域的链接）；
搜索引擎的检索程序⽆法解读这种页⾯，不利于 SEO iframe 和主页⾯共享连接池，⽽浏览器对相同域的链接有限制，所以会影响页⾯的并⾏加载。
使⽤ iframe 之前需要考虑这两个缺点，如果需要使⽤ iframe，最好是通过 JavaScript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。
iframe常⽤属性:
1.frameborder: 是否显⽰边框，1(yes),0(no)
2.height:  框架作为⼀个普通元素的⾼度，建议在使⽤css设置。
3.width:  框架作为⼀个普通元素的宽度，建议使⽤css设置。
4.name:  框架的名称，window.frames[name]时专⽤的属性。
5.scrolling: 框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页⾯地址，也可以是图⽚的地址。
7.srcdoc:  ⽤来替代原来HTML body⾥⾯的内容。但是IE不⽀持, 不过也没什么卵⽤
8.sandbox:  对iframe进⾏⼀些列限制，IE10+⽀持
控制页⾯在移动端不要缩⼩显⽰。
<metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
这个标签内的内容表⽰啥意思呢?
name  为viewport表⽰供移动设备使⽤. content定义了viewport的属性.jquery是什么选择器
width  表⽰移动设设备下显⽰的宽度为设备宽度(device-width)
height  表⽰移动设设备下显⽰的宽度为设备宽度.
user-scalable 表⽰⽤户缩放能⼒, no表⽰不允许.
initial-scale 表⽰设备与视⼝的缩放⽐率
maximum和minimum 分别表⽰缩放的最⼤最⼩值, 要注意的是, maximum必须必minimum⼤.
这个meta标签就是告诉浏览器, 不要在移动端显⽰的时候缩放.
15.json 和 xml 数据的区别
json：轻量级，传递速度快；占带宽⼩，易压缩；更⽅便与JavaScript交互，易解析，能更好的数据交互，项⽬交互中多⽤于数据交互；对数据的描述性⽐xml较差；
xml：重量级；占带宽⼤；项⽬交互中多⽤于配置⽂件；
1，数据体积⽅⾯：xml 是重量级的，json 是轻量级的，传递的速度更快些。
2，数据传输⽅⾯：xml 在传输过程中⽐较占带宽，json 占带宽少，易于压缩。
3，数据交互⽅⾯：json 与 javascript 的交互更加⽅便，更容易解析处理，更好的进⾏数据交互
4，数据描述⽅⾯：json 对数据的描述性⽐ xml 较差
5，xml 和 json 都⽤在项⽬交互下，xml 多⽤于做配置⽂件，json ⽤于数据交互。
16.document.write 和 innerHTML 的区别
document.write ：直接写⼊页⾯的内容流，导致页⾯被重写。
innerHTML ：写⼊某个 DOM 节点，不会导致页⾯全部重绘；
document.write是直接写⼊到页⾯的内容流，如果在写之前没有调⽤document.open, 浏览器会⾃动调⽤open。每次写完关闭之后重新调⽤该函数，会导致页⾯被重写。
innerHTML则是DOM页⾯元素的⼀个属性，代表该元素的html内容。你可以精确到某⼀个具体的元素来进⾏更改。如果想修改document 的内容，则需要修改document.documentElement.innerElement。
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页⾯的那⼀个部分。
17.jQuery 库中的 $ 是什么？
$就是jQuery的别称，是jQuery库提供的⼀个函数。
可以获取元素
$('#submit').attr('disabled', true);
可以写为：
jquery('#submit').attr('disabled', true);
1、可以通过 $() ⾥的参数进⾏查和选择html⽂档中的元素
如：
$('#tmp');//这是查dom的id等于tmp的元素
2、访问 $ 中定义的函数
如：
$.ajax(options)
18.$(document).ready()⽅法和 load 的区别？
$(document).ready() ⽅法：可在 DOM 载⼊就绪时就执⾏，并调⽤执⾏绑定的函数；可多次使⽤不同事件处理程序；
1、执⾏时机
$(document).ready()：只要在DOM完全就绪时，就可以调⽤了，⽐如⼀张图⽚只要<img>标签完成，不⽤等这个图⽚加载完成，就可以设置图⽚的宽⾼的属性或样式等。
从⼆者的英⽂字母可以⼤概理解上⾯的话，onload即加载完成，ready即DOM准备就绪。
2、注册事件
$(document).ready()：可以多次使⽤不同的事件处理程序，
两个load在同⼀个页⾯上可能效果会展⽰不了。
19.⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？
⾏内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的 HTML元素，例如：br、meta、hr、link、input、img
20.你为什么要使⽤ jQuery？
jQuery的优点：轻量级框架；选择器强⼤；DOM操作封装丰富；事件处理机制可靠；Ajax完善；浏览器兼容；⽀持链式操作、隐式迭代；⾏为层与结构层分离；⽀持的插件丰富；jQuery⽂档丰富。
jquery的优点：
轻量级
    JQuery⾮常轻巧，采⽤Dean Edwards编写的Packer压缩后，⼤⼩不到30KB，如果使⽤Min版并且在服务器端启⽤Gzip压缩后，⼤⼩只有18KB。
强⼤的选择器
    JQuery允许开发者使⽤从CSS1到CSS3⼏乎所有的选择器，以及JQuery独创的⾼级⽽且复杂的选择器，另外还可以加⼊插件使其⽀持XPath选择器，甚⾄开发者可以编写属于⾃⼰的选择器。由于JQuery⽀持选择器这⼀特性，因此有⼀定CSS经验的开发⼈员可以很容易的切⼊到JQuery的学习中来。
出⾊的DOM操作的封装
    JQuery封装了⼤量常⽤的DOM操作，使开发者在编写DOM操作相关程序的时候能够得⼼应⼿。JQuery轻松地完成各种原本⾮常复杂的操作，让JavaScript新⼿也能写出出⾊的程序。
可靠的事件处理机制
    JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及⾮⼊侵式编程思想⽅⾯，JQuery也做得⾮常不错。
完善的Ajax
    JQuery将所有的Ajax操作封装到⼀个函数$.ajax()⾥，使得开发者处理Ajax的时候能够专⼼处理业务逻辑⽽⽆需关⼼复杂的浏览器兼容性和XMLHttpRequest对象的创建和使⽤的问题。
不污染顶级变量
    JQuery只建⽴⼀个名为JQuery的对象，其所有的函数⽅法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项⽬中放⼼地引⽤⽽不需要考虑到后期的冲突。
出⾊的浏览器兼容性
    作为⼀个流⾏的JavaScript库，浏览器的兼容性是必须具备的条件之⼀。JQuery能够在IE6.0+,FF 2+,Safari2.+和
Opera9.0+下正常运⾏。JQuery同时修复了⼀些浏览器之间的的差异，使开发者不必在开展项⽬前建⽴浏览器兼容库。
链式操作⽅式
    JQuery中最有特⾊的莫过于它的链式操作⽅式——即对发⽣在同⼀个JQuery对象上的⼀组动作，可以直接接连写⽆需要重复获取对象。这⼀特点使得JQuery的代码⽆⽐优雅。
隐式迭代
    当⽤JQuery到带有“.myClass”类的全部元素，然后隐藏他们时。⽆需循环遍历每⼀个返回的元素。相反，JQuery⾥的⽅法都被设计成⾃动操作的对象集合，⽽不是单独的对象，这使得⼤量的循环结构变得不再必要，从⽽⼤幅度地减少代码量。
⾏为层与结构层的分离
    开发者可以使⽤选择器选中元素，然后直接给元素添加事件。这种将⾏为层与结构层完全分离的思想，可以使JQuery开发⼈员和HTML或其他页⾯开发⼈员各司其职，摆脱过去开发冲突或个⼈单⼲的开发模式。同时，后期维护也⾮常⽅便，不需要在HTML代码中寻某些函数和重复修改HTML代码。
丰富的插件⽀持
    JQuery的易扩展性，吸引了来⾃全球开发者来编写JQuery的扩展插件。⽬前已经有超过⼏百种官⽅插件⽀持，⽽且还不断有新插件⾯试。
完善的⽂档
    JQuery的⽂档⾮常丰富，现阶段多位英⽂⽂档，中⽂⽂档相对较少。很多热爱JQuery的团队都在努⼒完善JQuery中⽂⽂档，例如JQuery的中⽂API。
开源
    JQuery是⼀个开源的产品，任何⼈都可以⾃由地使⽤并提出修改意见。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。