HTML+CSS+javascript+jQuery⾯试题（31）
1、$()是什么？
$符号是jQuery框架对外暴露的全局变量，是window对象的属性
$()代表jQuery核⼼函数，可接收⼀个函数、字符串、DOM元素。
$(function(){});//推荐 .接收字符串选择器
//3.接收DOM元素，该元素被包装成⼀个jQuery对象返回
2、load事件和jQuery ready函数的不同
原⽣js和jQuery⼊⼝函数的加载模式不同。原⽣js会等⽹页全部加载完毕（DOM元素、图⽚等）才会执⾏；多个load只会执⾏⼀次，后⾯覆盖前⾯。jQuery只等待⽹页中的DOM结构加载完毕，不等图⽚加载就会执⾏；多个$(document).ready()依次执⾏，不会覆盖。
3、jQuery事件委托⽅法bind、live、delegate、on之间的区别
jQuery中提供了四种事件监听⽅式，分别是bind、live、delegate、on，对应的解除监听的函数分别是un
bind、die、undelegate、off。
1，bind
bind()向匹配元素添加⼀个或多个事件处理器。
$(selector).bind(event,data,function)
bind是使⽤频率较⾼的⼀种，作⽤就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：
event：事件类型，如click、change、mouseover等;
data：传⼊监听函数的参数，通过event.data取到。可选;
function：监听函数，可传⼊event对象，这⾥的event是jQuery封装的event对象，与原⽣的event对象有区别，使⽤时需要注意。
bind的特点就是会把绑定到⽬标元素上，有⼀个绑⼀个，在页⾯上的元素不会动态添加的时候使⽤它没什么问题。
解除绑定时只需要调⽤unbind⽅法即可
$(selector).unbind(event);
注意：绑定和解绑传⼊的对象和事件类型⼀定要⼀致。
优点：这个⽅法提供了⼀种在各种浏览器之间对事件处理的兼容性解决⽅案
⾮常⽅便简单的绑定事件到元素上
.click(), .hover()…这些⾮常⽅便的事件绑定，都是bind的⼀种简化处理⽅式
对于利⽤ID选出来的元素是⾮常好的，不仅仅是很快的可以hook上去(因为⼀个页⾯只有⼀个id),⽽且当事件发⽣时，handler可以⽴即被执⾏(相对于后⾯的live, delegate)实现⽅式
缺点：它会绑定事件到所有的选出来的元素上
它不会绑定到在它执⾏完后动态添加的那些元素上
当元素很多时，会出现效率问题
当页⾯加载完的时候，你才可以进⾏bind()，所以可能产⽣效率问题
live() 向当前或未来的匹配元素添加⼀个或多个事件处理器；
$(selector).live(event,data,function);
event：事件类型，如click、change、mouseover等;
data：可选；需要传递的参数
function：监听函数，可传⼊event对象，这⾥的event是jQuery封装的event对象
但live和bind的区别在于：
live⽅法并没有将绑定到⾃⼰(this)⾝上，⽽是绑定到了t上了。live正是利⽤了事件委托机制来完成事件的监听处理，把节点的处理委托给了document。使⽤事件委托的优点⼀⽬了然，新添加的元素不必再绑定⼀次。
另外：
live还可以多事件处理，如下：
$(selector).live({event1:function, event2:function, …});
多个事件和函数之间⽤分号隔开，可给同意对象绑定多个事件。
解除绑定时只需要调⽤unbind⽅法即可
$(selector).die(event);
注意：绑定和解绑传⼊的对象和事件类型⼀定要⼀致。
优点：这⾥仅有⼀次的事件绑定，绑定到document上⽽不像.bind()那样给所有的元素挨个绑定
那些动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上
你可以在document ready之前就可以绑定那些需要的事件
缺点：从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。
Chaining没有被正确的⽀持
当使⽤event.stopPropagation()是没⽤的，因为都要到达document，因为所有的selector/event都被绑定到document, 所以当我们使⽤matchSelector⽅法来选出那个事件被调⽤时，会⾮常慢
当发⽣事件的元素在你的DOM树中很深的时候，会有performance问题
3，delegate
将监听事件绑定在就近的⽗级元素上
$(selector).delegate(childSelector,event,data,function);
childSelector: 必需项；需要添加事件处理程序的元素，⼀般为selector的⼦元素；
event：必需项；添加到元素的⼀个或多个事件，例如 click,dblclick等；
data：可选；需要传递的参数
jquery是什么选择器function：监听函数，可传⼊event对象，这⾥的event是jQuery封装的event对象
同时delegate也⽀持多事件处理
$(selector).delegate(childselector,{event1:function, event2:function, …});
多个事件和函数之间⽤分号隔开，可给同意对象绑定多个事件。
这样在绑定的饿时候可以选择最近的最稳定的元素绑定事件，可以更快的冒泡上去，提升效率。
解除绑定时只需要调⽤unbind⽅法即可
$(selector).undelegate(event);
注意：绑定和解绑传⼊的对象和事件类型⼀定要⼀致。
优点：你可以选择你把这个事件放到那个元素上了
chaining被正确的⽀持了
jQuery仍然需要迭代查所有的selector/event data来决定那个⼦元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减⼩你所要查的元素。
可以⽤在动态添加的元素上
缺点：需要查那个那个元素上发⽣了那个事件了，尽管⽐document少很多了，不过，你还是得浪费时间来查。
on() 为指定的元素，添加⼀个或多个事件处理程序，并规定当这些事件发⽣时运⾏的函数。使⽤ on() ⽅法的事件处理程序适⽤于当前或未来的元素。
$(selector).on(event,childselector,data,function);
event：必需项；添加到元素的⼀个或多个事件，例如 click,dblclick等；
childSelector: 可选；需要添加事件处理程序的元素，⼀般为selector的⼦元素；
data：可选；需要传递的参数；
function：必需；当绑定事件发⽣时，需要执⾏的函数；
同时，on也⽀持多个事件处理
$(selector).on({event1:function, event2:function, …},childselector);
多个事件和函数之间⽤分号隔开，可给同意对象绑定多个事件。
解除绑定时只需要调⽤unbind⽅法即可
$(selector).off(event);
注意：绑定和解绑传⼊的对象和事件类型⼀定要⼀致
优点：提供了⼀种统⼀绑定事件的⽅法
仍然提供了.delegate()的优点，当然如果需要你也可以直接⽤.bind()
缺点：也许会对你产⽣⼀些困扰，因为它隐藏了⼀前⾯我们所介绍的三种⽅法的细节。
5、$(this) 和 this 关键字在 jQuery 中有何不同？
// this其实是⼀个Html 元素。
this只是个变量名，加
// 是为说明其是个jquery对象。
// ⽽$(this)是个转换，将this表⽰的dom对象转为jquery对象，这样就可以使⽤jquery提供的⽅法操作。
6、JQuery有⼏种选择器
7、Javascript垃圾回收⽅法
标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收⽅式，当变量进⼊执⾏环境的时候，⽐如函数中声明⼀个变量，垃圾回收器将其标记为“进⼊环境”，当变量离开环境的时候（函数执⾏结束）将其标记为“离开环境”。
垃圾回收器会在运⾏的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引⽤的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引⽤计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采⽤引⽤计数⽅式进⾏垃圾回收。引⽤计数的策略是跟踪记录每个值被使⽤的次数，当声明了⼀个变量并将⼀个引⽤类型赋值给该变量的时候这个值的引⽤次数就加1，如果该变量的值变成了另外⼀个，则这个值得引⽤次数减1，当这个值的引⽤次数变为0的时 候，说明没有变量在使⽤，这个值没法被访问了，因此可以将其占⽤的空间回收，这样垃圾回收器会在运⾏的时候清理掉引⽤次数为0的值占⽤的空间。
在IE中虽然JavaScript对象通过标记清除的⽅式进⾏垃圾回收，但BOM与DOM对象却是通过引⽤计数回收垃圾的，
也就是说只要涉及BOM及DOM就会出现循环引⽤问题。
8、你觉得前端⼯程的价值体现在哪
为简化⽤户使⽤提供技术⽀持（交互部分）
为多个浏览器兼容性提供⽀持
为提⾼⽤户浏览速度（浏览器性能）提供⽀持
为跨平台或者其他基于webkit或其他渲染引擎的应⽤提供⽀持
为展⽰数据提供⽀持（数据接⼝）
9、谈谈性能优化问题
代码层⾯：避免使⽤css表达式，避免使⽤⾼级选择器，通配选择器。
缓存利⽤：缓存Ajax，使⽤CDN，使⽤外部js和css⽂件以便缓存，添加Expires头，服务端配置Etag，减少DNS查等
请求数量：合并样式和脚本，使⽤css图⽚精灵，初始⾸屏之外的图⽚资源按需加载，静态资源延迟加载。
请求带宽：压缩⽂件，开启GZIP，
代码层⾯的优化
⽤hash-table来优化查
少⽤全局变量
⽤innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
⽤setTimeout来避免页⾯失去响应
缓存DOM节点查的结果
避免使⽤CSS Expression
避免全局查询
避免使⽤with(with会创建⾃⼰的作⽤域，会增加作⽤域链长度)
多个变量声明合并
避免图⽚和iFrame等的空Src。空Src会重新加载当前页⾯，影响速度和效率
尽量避免写在HTML标签中写Style属性
移动端性能优化
尽量使⽤css3动画，开启硬件加速。
适当使⽤touch事件代替click事件。
避免使⽤css3渐变阴影效果。
可以⽤transform: translateZ(0)来开启硬件加速。
不滥⽤Float。Float在渲染时计算量⽐较⼤，尽量减少使⽤
不滥⽤Web字体。Web字体需要下载，解析，重绘当前页⾯，尽量减少使⽤。
合理使⽤requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使⽤。过渡使⽤会引发⼿机过耗电增加
PC端的在移动端同样适⽤
10、栈和堆的区别？
栈区（stack）— 由编译器⾃动分配释放 ，存放函数的参数值，局部变量的值等。
堆区（heap） — ⼀般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收。
堆（数据结构）：堆可以被看成是⼀棵树，如：堆排序；
栈（数据结构）：⼀种先进后出的数据结构。
11、js继承⽅式及其优缺点
原型链继承的缺点
⼀是字⾯量重写原型会中断关系，使⽤引⽤类型的原型，并且⼦类型还⽆法给超类型传递参数。
借⽤构造函数（类式继承）
借⽤构造函数虽然解决了刚才两种问题，但没有原型，则复⽤⽆从谈起。所以我们需要原型链+借⽤构造函数的模式，这种模式称为组合继承
组合式继承
组合式继承是⽐较常⽤的⼀种继承⽅法，其背后的思路是 使⽤原型链实现对原型属性和⽅法的继承，⽽通过借⽤构造函数来实现对实例属性的继承。这样，既通过在原型上定义⽅法实现了函数复⽤，⼜保证每个实例都有它⾃⼰的属性。
12、谈谈浮动和清除浮动
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另⼀个浮动框的边框为⽌。由于浮动框不在⽂档的普通流中，所以⽂档的普通流的块框表现得就像浮动框不存在⼀样。浮动的块框会漂浮在⽂档普通流的块框上。
13、⽤过哪些设计模式？
⼯⼚模式：
主要好处就是可以消除对象间的耦合，通过使⽤⼯程⽅法⽽不是new关键字。将所有实例化的代码集中在⼀个位置防⽌代码重复。
⼯⼚模式解决了重复实例化的问题 ，但还有⼀个问题，那就是识别问题，因为根本⽆法搞清楚他们到底是哪个对象的实例。
构造函数模式
使⽤构造函数的⽅法 ，即解决了重复实例化的问题 ，⼜解决了对象识别的问题，该模式与⼯⼚模式的不同之处在于：
1.构造函数⽅法没有显⽰的创建对象 (new Object());
2.直接将属性和⽅法赋值给 this 对象;
3.没有 renturn 语句。
14、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.⼦选择器（ul > li）
6.后代选择器（lia）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li:nth-child）
优先级为:
!important > id > class > tag
important ⽐ 内联优先级⾼，但内联⽐ id 要⾼
CSS3新增伪类举例：
p:first-of-type选择属于其⽗元素的⾸个
元素的每个
元素。
p:last-of-type 选择属于其⽗元素的最后
元素的每个
元素。
p:only-of-type 选择属于其⽗元素唯⼀的
元素的每个
元素。
p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个
元素。
p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个
元素。
:enabled :disabled控制表单控件的禁⽤状态。
:checked 单选框或复选框被选中。
15、CSS3有哪些新特性？

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