2010年腾讯前端面试题学习（jquery,html,css部分）

Posted 2020-10-31

看了牛人写的回忆文章，里面有2010年腾讯的前端面试题，里面涉及到不少基础性的问题，js部分已学习，这是jquery，html和css部分，学习一下：）

原文地址：https://segmentfault.com/a/1190000012998107

jQuery部分：

1. jQuery里如何绑定事件？有多少种方式？
2. jQuery绑定事件时，this指针指向的是？（dom对象还是jQuery对象）
3. 对于页面中暂时不存在的对象，如果进行事件绑定？
4. 为什么选用jQuery框架（言下之意就是还有哪些其他的框架，各有什么优缺点，即你对比之后选择的原因）
5. 有没有考虑过jQuery UI？如何对jQuery UI的样式进行定制？
6. 有没有自己写作jQuery插件（即如何写jQuery插件）

1.1）个人最常用的使用a.click(function(){})这样的方式，这其实是bind(type,[data],function(eventObject))方式的简写，它的缺点只能为页面已经加载好的元素绑定事件，不能绑定动态添加的元素。适用版本<jquery3.0;

    2)live(type, [data], fn)。这个方法看似和bind一样，其实实现大不一样。他是利用事件委托机制将click事件注册到document上。这样使得他可以给动态添加的元素绑定事件。缺点主要是不支持event.stopPropogation()，阻止冒泡的操作。 适用版本<jquery1.7;

     3)delegate( selector, types, [data], fn )。这个方法同样是利用事件委托机制，但是是将click事件注册到你指定的附加元素上（一般你可以注册到父元素上）。如：

$( "#members" ).delegate( "li a", "click", function( e ) {} );//members只要为"li a"的父节点即可

       这个方法稍复杂，但也没有明显的缺点，但是jquery的新版本把它的功能到新的方法on()中了。适用版本<jquery1.7。

     4）on()。on方法合并了以上3种方法。而它的具体实现方式，将根据你的调用方法来决定。参考代码：

 1 /* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */
 2  
 3 // Bind
 4 $( "#members li a" ).on( "click", function( e ) {} ); 
 5 $( "#members li a" ).bind( "click", function( e ) {} );
 6  
 7 // Live
 8 $( document ).on( "click", "#members li a", function( e ) {} ); 
 9 $( "#members li a" ).live( "click", function( e ) {} );
10  
11 // Delegate
12 $( "#members" ).on( "click", "li a", function( e ) {} ); 
13 $( "#members" ).delegate( "li a", "click", function( e ) {} );

很明显，on()方法提供了对Bind和Delegate方法的兼容，这也是jquery的作者提倡使用的方法。缺点是可能给初次使用的人一些困惑。与之配套的是，使用.off(event,selector,function(eventObj),map)方法可以解绑事件。适用版本>=jquery1.7。

参考文章：http://www.jb51.net/article/120018.htm

2. this指向dom对象，如果是$(this)，则转化为jquery对象。

3.如前所述，对于页面中暂时不存在的对象，可以使用live(),delegate(),on()绑定。在jquery1.7以下使用live(),delegate；jquery1.7及以上推荐使用on()绑定。

4.我个人最开始编写前端代码的时候，在面临选择框架的时候，就选用了jquery。jquery的优点：1）文件较小，压缩后只有10几k；2）使用者广泛，随处可见大量使用jquery的网站，以及各种jquery开发的插件，这对开发的帮助是极大的；3）兼容性好。jquery2.0之前的版本都兼容ie6浏览器，对各其他浏览器的兼容性也非常不错。4）语法直观，很容易上手。例如标签选择器，通过$("")就能准确找到dom进行操作；click事件则直接可以使用$("").click(function(){}),和原生js中的onclick相似，非常直观。

    其他的前端框架有：extjs--富客户端框架，收费，外观漂亮；angularjs-比较笨重，有一些兼容性问题等。这些框架我很少使用，也是知道些皮毛，主要还是使用jquery多。

      基于jquery的框架，我还使用过semantic UI框架。他里面有一些非常方便实用的功能（比如弹出层，按钮样式，文本框验证等），虽然对于开发大型网站的前端不太适合，但是对于开发cms管理后台则是非常方便的。  

5.jquery UI 是以 jQuery 为基础的开源 javascript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+。

   jqueryUI类似于semanticUI，虽然对于开发大型网站的前端不太适合，但是对于开发cms管理后台则是非常方便的。jqueryUI的定制，一是可以填写选项，使得插件按指定方式运行；二是可以去编写主题或去专业网站定制主题。参考：http://www.jqueryui.org.cn/tutorial/31.html。

6.没有编写过jquery插件，不过改写过一些jquery的插件（自动填充输入框默认文字，轮转图插件等）。

   jquery插件一般会用闭包，格式如下：

(function($){  
    //插件书写部分  
})(jQuery); 

　　参考:https://blog.csdn.net/qq_18661257/article/details/50434475

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

html+CSS：

1. 用html+CSS实现这样的布局效果，左栏固定宽度，右栏宽度自适应并填满剩下空间。
2. 说说<strong>标签和<b>标签的区别，如果让你选择，你会选择使用哪个？
3. 说说你对对html标签语义化的理解。

1.方法有两种：1)左栏float:left，右栏margin-left:左栏宽度；2.左栏采用绝对定位，右栏还是margin-left:左栏宽度。参考：https://blog.csdn.net/wky_csdn/article/details/72475481

2.<strong>和<b>在页面表现上都是加粗字体。区别是一个字符，一个六个字符。<b>对应bold,单纯的表示加粗;<strong>有强调，重点指出的意味，为了达到这个目的，加粗显示。我选择的话，如果只是加粗，会选择利用css属性font-weight:bold来实现，如果是要强调的话，会使用<strong>。

3.标签语义化的目的是使得页面对应的部分用正确语义标签来表示，可以使得页面内容结构化，便于浏览器解析，便于搜索引擎解析，增加页面可读性和可维护性。所以尽量减少使用<div>,<span>等没有语义的标签，多使用<header><article><section>等标签来表示。