2010年騰訊前端面試題學習（jquery,html,css部分）
看了牛人寫的回憶文章，裏面有2010年騰訊的前端面試題，裏面涉及到不少基礎性的問題，js部分已學習，這是jquery，html和css部分，學習一下：）
原文地址：https://segmentfault.com/a/1190000012998107
jQuery部分：
- jQuery裏如何綁定事件？有多少種方式？
- jQuery綁定事件時，this指針指向的是？（dom對象還是jQuery對象）
- 對於頁面中暫時不存在的對象，如果進行事件綁定？
- 為什麽選用jQuery框架（言下之意就是還有哪些其他的框架，各有什麽優缺點，即你對比之後選擇的原因）
- 有沒有考慮過jQuery UI？如何對jQuery UI的樣式進行定制？
- 有沒有自己寫作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：
- 用html+CSS實現這樣的布局效果，左欄固定寬度，右欄寬度自適應並填滿剩下空間。
- 說說
<strong>標簽和<b>標簽的區別，如果讓你選擇，你會選擇使用哪個？ - 說說你對對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>等標簽來表示。
2010年騰訊前端面試題學習（jquery,html,css部分）