關於前端面試遇到的一些問題的記錄

時間  2019-11-08
標籤 關於 前端 面試 遇到 一些 問題 記錄 欄目 快樂工作 简体版
原文   原文鏈接

針對這幾天的前端面試，學到了很多東西，對還有印象的作個記錄：css

1.子元素所有浮動，父元素如何撐開？

　　解答：一、給父元素加一個overflow:hidden；二、將父元素也一塊兒浮動（這個比較複雜，會影響到父元素的同級元素）；三、在父元素的最後一個子元素（也就是你的ul標籤）後邊再增長多一個非浮動的子元素，而後將這個子元素加個clear（例：<div style="clear:both"></div>）；四、使用僞元素清除浮動：　　　html

.clearfix:after {
　content: "";    /*設置內容爲空*/
　height: 0;    /*高度爲0*/
　line-height: 0;    /*行高爲0*/
　display: block;    /*將文本轉爲塊級元素*/
　visibility: hidden;    /*將元素隱藏*/
　clear: both;    /*清除浮動*/
}
.clearfix {
 　zoom: 1;    /*爲了兼容IE*/
}

或者前端

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

2.box-sizing的屬性?

　　解答：html5

　　　　一、content-box（寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框。）；jquery

　　　　二、border-box（爲元素設定的寬度和高度決定了元素的邊框盒。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。）；程序員

　　　　三、inherit（規定應從父元素繼承 box-sizing 屬性的值。）es6

3.運行下面代碼獲得的值？

var name="aaa"; 

　　function echo(){

　　　　alert(name);

　　　　var name="bbb";

　　　　alert(name);

　　　　alert(age);

　　}

　　echo();

　　解答：在我實際運行出來後，alert出來的結果依次是：undefined,bbb,第三個沒有alert(由於會報not defined錯誤)web

　　ps:echo()函數中的name前面不定義var時，第二個alert的name值爲aaa面試

4.jQuery操做DOM節點的方法？

　　解答：詳見另外一篇博客http://www.cnblogs.com/minozMin/p/8376614.htmlajax

5.js遞歸函數 ##########

6.ajax設置同步加載：

　　解答：async:false

7.es6和es5的區別：

　　解答：##########

8.表格奇偶數行顯示不一樣顏色：

　　解答：css中，用nth便可；

　　（2）jquery中，用odd和even：

<style type="text/css">
    .odd {
         background-color:yellow;
    }
    .even {
         background-color:red;
    }
</style>
<script>
    $(document).ready(function() {
         $('tr:odd').addClass('odd');
         $('tr:even').addClass('even');
    });
</script>

9.實現滾動：

overflow:auto

10.如何經過選擇器獲取ul li的前三個元素：　

1 $(function(){
2   $('ul').each(function(){
3       $('li:lt(3) em',this).addClass('emClass'); 
4   });
5 });

11.如何獲取name="username"的input：

　　$("[name='username']")（若是是取全部data-*="online"的元素，則用（$("[data='online']")））

12.總結JQeury的屬性選擇器：

　　解答：
選擇器 實例 選取
* $("*") 全部元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 全部 class="intro" 的元素
element $("p") 全部 <p> 元素
.class.class $(".intro.demo") 全部 class="intro" 且 class="demo" 的元素
     
:first $("p:first") 第一個 <p> 元素
:last $("p:last") 最後一個 <p> 元素
:even $("tr:even") 全部偶數 <tr> 元素
:odd $("tr:odd") 全部奇數 <tr> 元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四個元素（index 從 0 開始）
:gt(no) $("ul li:gt(3)") 列出 index 大於 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小於 3 的元素
:not(selector) $("input:not(:empty)") 全部不爲空的 input 元素
     
:header $(":header") 全部標題元素 <h1> - <h6>
:animated   全部動畫元素
     
:contains(text) $(":contains('W3School')") 包含指定字符串的全部元素
:empty $(":empty") 無子（元素）節點的全部元素
:hidden $("p:hidden") 全部隱藏的 <p> 元素
:visible $("table:visible") 全部可見的表格
     
s1,s2,s3 $("th,td,.intro") 全部帶有匹配選擇的元素
     
[attribute] $("[href]") 全部帶有 href 屬性的元素
[attribute=value] $("[href='#']") 全部 href 屬性的值等於 "#" 的元素
[attribute!=value] $("[href!='#']") 全部 href 屬性的值不等於 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 全部 href 屬性的值包含以 ".jpg" 結尾的元素
     
:input $(":input") 全部 <input> 元素
:text $(":text") 全部 type="text" 的 <input> 元素
:password $(":password") 全部 type="password" 的 <input> 元素
:radio $(":radio") 全部 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 全部 type="checkbox" 的 <input> 元素
:submit $(":submit") 全部 type="submit" 的 <input> 元素
:reset $(":reset") 全部 type="reset" 的 <input> 元素
:button $(":button") 全部 type="button" 的 <input> 元素
:image $(":image") 全部 type="image" 的 <input> 元素
:file $(":file") 全部 type="file" 的 <input> 元素
     
:enabled $(":enabled") 全部激活的 input 元素
:disabled $(":disabled") 全部禁用的 input 元素
:selected $(":selected") 全部被選取的 input 元素
:checked $(":checked") 全部被選中的 input 元素

1三、Flex佈局？

　　解答：是"Flexible Box"的縮寫，譯爲彈性佈局，爲盒模型提供最大的靈活性。
　　　　使用方法：display: flex/inline-flex;（webkit內核瀏覽器需加-webkit前綴。）
　　　　容器的屬性：
　　　　　　一、justify-content: flex-start(左對齊) | flex-end(右對齊) | center(居中) | space-between(兩端對齊，項目之間的間隔相等) | space-around(每一個項目兩側的間隔相等，因此項目之間的間隔比項目與邊框的間隔大一倍)
　　　　　　二、align-items: flex-start(交叉軸的起點對齊) | flex-end(交叉軸的終點對齊) | center(交叉軸的中點對齊) | baseline(項目第一行文字的基線對齊) | stretch(默認值，不設置或位auto時，佔滿整個容器的高度)
##########

1四、標準模型和怪異模型（IE）的區別：

　　解答：標準模型：一個塊的總寬度=width+border+padding+margin
　　　　　怪異模型：一個快的總寬度=width+margin（即width已經包含了padding和border的值）
　　　　CSS3的box-sizing：
　　　　content-box（標準模型）/ border-box（怪異模型）

1五、如何居中一個div：　

　　解答：margin負邊距：position: absolute;left:50%;top:50%;margin-left:-100px；margin-top:-100px;（margin負邊距爲寬高的50%；IE7 及以前不支持）
　　　　　flex佈局：display:flex;justify-content:center;align-items:center;
　　　　　Margin auto實現：margin: auto; position: absolute;top: 0; right: 0; bottom: 0; left: 0;
　　　　　transform變形：position:absolute; left:50%; /* 定位父級的50% */ top:50%;transform: translate(-50%,-50%); /*本身的50% */

1六、css選擇符：

　　解答：通用選擇符（*）、類型選擇符（p、div、span、h1）、屬性選擇符（E1[attr]、E1[attr='value']）、包含選擇符（E1 E2）、子對象選擇符（E1>E2）、類選擇符（.class）、選擇符混合使用（E1.E2.E3 eg:p.bigFont、p#colorFont）、ID選擇符（#ID）

1七、HTML5和CSS3的一些新特性：

　　解答：HTML5的新特性：
　　　　　　·用於繪製圖表的canvas元素
　　　　　　·用於媒介回放的video和radio元素
　　　　　　·對離線本地存儲更好的支持
　　　　　　·新的特殊元素內容：header、nav、section、content、footer、article
　　　　　　·新的表單控件：calendar、time、date、email、url
　　　　CSS3的新特性：
　　　　　　·對div加特效：圓角（border-radius）、陰影（box-shadow）
　　　　　　·對文字加特效：陰影（text-shadow）、線性漸變（gradient）、旋轉（transform）
　　　　　　·transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
　　　　　　·引入僞元素： ::selection
　　　　　　·引入媒體查詢、多欄佈局
　　　　　　·多背景rgba，增長了更多的選擇器
　　　　　　·border-image

1八、對象的操做：

　　解答：合併：extend、assign、遍歷賦值法
　　　　　比較兩個值是否嚴格相等：object.is(A,B) 　　　　
  • Object.keys()：返回對象自身的全部可枚舉的屬性的鍵名

1九、表單提交中有圖片和文件時，需添加什麼屬性？

　　解答：

<form enctype="multiple/form-data">
</form>

20、JS事件流模型：

　　解答：冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根。（推薦）

　　　　　捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從DOM樹的根到葉子。

2一、css的優化規則：

　　解答：詳見另外一篇博客http://www.cnblogs.com/minozMin/p/8093551.html

2二、字符串的操做：

　　解答：詳見另外一篇博客http://www.cnblogs.com/minozMin/p/8328028.html

2三、判斷是否爲數組類型：

var a="string"; console.log(a); //string
var a=1; console.log(a); //number
var a=false; console.log(a); //boolean
var a; console.log(typeof a); //undfined
 
var a = null; console.log(typeof a); //object
var a = document; console.log(typeof a); //object
var a = []; console.log(a); //object
 
var a = function(){}; console.log(typeof a) //function 除了能夠判斷數據類型還能夠判斷function類型

2四、運行代碼，輸出值：

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value); 

結果爲：2

2五、閉包：

2六、面向對象經典的例子：

2七、做用域：

　　解答：參見另外一篇博客 http://www.cnblogs.com/minozMin/p/8022869.html

2八、jQuery中的$符號：

　　解答：$就是jQuery的別稱，是jQuery庫提供的一個函數。

　　　　（1）能夠經過$ () 裏的參數進行查找和選擇html文檔中的元素

$('#tmp');//這是查找dom的id等於tmp的元素

　　　　（2）訪問$中定義的函數

$.ajax(options)

2九、cookie、sessionStorage、localStorage的區別：

　　解答：

（1）Cookie 是小甜餅的意思。顧名思義，cookie 確實很是小，它的大小限制爲4KB左右，是網景公司的前僱員 Lou Montulli 在1993年3月的發明。它的主要用途有保存登陸信息，好比你登陸某個網站市場能夠看到「記住密碼」，這一般就是經過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

（2）localStorage 是 HTML5 標準中新加入的技術，它並非什麼劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而現在，localStorage 被大多數瀏覽器所支持，若是你的網站須要支持 IE6+，那以 userData 做爲你的 polyfill 的方案是種不錯的選擇。

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
（3）sessionStorage 與 localStorage 的接口相似，但保存數據的生命週期與 localStorage 不一樣。作事後端開發的同窗應該知道 Session 這個詞的意思，直譯過來是「會話」。而 sessionStorage 是一個前端的概念，它只是能夠將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。
特性 Cookie localStorage sessionStorage
數據的生命期 可設置失效時間，默認是關閉瀏覽器後失效 除非被清除，不然永久保存 僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小 4K左右 通常爲5MB 通常爲5MB
與服務器端通訊 每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
易用性 須要程序員本身封裝，源生的Cookie接口不友好 源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持 源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持

 30、瀏覽器的加載順序：

　　解答：參考兩篇不錯的博客http://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.html和http://www.cnblogs.com/yuezk/archive/2013/01/11/2856540.html

 3一、如何定位在jQuery中出現的問題：

3二、HTTP和HTTPS的區別：

　　解答：

　　　　（1）http是HTTP協議運行在TCP之上。全部傳輸的內容都是明文，客戶端和服務器端都沒法驗證對方的身份。

　　　　（2）https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。全部傳輸的內容都通過加密，加密採用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端能夠驗證服務器端的身份，若是配置了客戶端驗證，服務器方也能夠驗證客戶端的身份。

3三、HTML5上傳圖片的標籤：

　　解答：<img alt="" src="" />

3四、如何用jQeury取到如下元素的第三個div：

<div>
    <div>
        <div>
        </div>
    </div>
</div>

3五、link一個css文件和import一個CSS文件的區別：

　　解答：

　　　　（1）適用範圍不一樣    @import能夠在網頁頁面中使用，也能夠在css文件中使用，用來將多個css文件引入到一個css文件中；而link只能將css文件引入到網頁頁面中。   

　　　　（2）功能範圍不一樣    link屬於XHTML標籤，而@import是CSS提供的一種方式，link標籤除了能夠加載CSS外，還能夠定義RSS，定義rel鏈接屬性等，@import就只能加載CSS。

    　　　（3）加載順序不一樣    當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

    　　　（4） 兼容性    因爲@import是css2.1提出的，因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

    　　   （5）控制樣式時的差異    使用link方式可讓用戶切換CSS樣式.現代瀏覽器如Firefox,Opera,Safari都支持rel=」alternate stylesheet」屬性(便可在瀏覽器上選擇不一樣的風格),固然你還可使用Javascript使得IE也支持用戶更換樣式

3六、get和post請求：　　

　　（1）GET請求，請求的數據會附加在URL以後，以?分割URL和傳輸數據，多個參數用&鏈接。URL的編碼格式採用的是ASCII編碼，而不是uniclde，便是說全部的非ASCII字符都要編碼以後再傳輸。

　　　　POST請求：POST請求會把請求的數據放置在HTTP請求包的包體中。上面的item=bandsaw就是實際的傳輸數據。

所以，GET請求的數據會暴露在地址欄中，而POST請求則不會。

　　（2）傳輸數據的大小

　　　　　　在HTTP規範中，沒有對URL的長度和傳輸的數據大小進行限制。可是在實際開發過程當中，對於GET，特定的瀏覽器和服務器對URL的長度有限制。所以，在使用GET請求時，傳輸數據會受到URL長度的限制。

對於POST，因爲不是URL傳值，理論上是不會受限制的，可是實際上各個服務器會規定對POST提交數據大小進行限制，Apache、IIS都有各自的配置。

　　（3）安全性

　　　　POST的安全性比GET的高。這裏的安全是指真正的安全，而不一樣於上面GET提到的安全方法中的安全，上面提到的安全僅僅是不修改服務器的數據。好比，在進行登陸操做，經過GET請求，用戶名和密碼都會暴露再URL上，由於登陸頁面有可能被瀏覽器緩存以及其餘人查看瀏覽器的歷史記錄的緣由，此時的用戶名和密碼就很容易被他人拿到了。除此以外，GET請求提交的數據還可能會形成Cross-site request frogery攻擊

　　（4）HTTP中的GET，POST，SOAP協議都是在HTTP上運行的

3七、doctype的做用：

　　（1）DOCTYPE是document type(文檔類型)的簡寫，在Web設計中用來講明你用的XHTML或者HTML是什麼版本.

　　（2）要創建符合標準的XHTML網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML肯定了一個正確的DOCTYPE，不然你的標識和CSS都不會生效。

　　（3）通常放置在html網頁代碼最頂部
　　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//CN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　（4）小結，一般html DOCTYPE聲明是必須的，並且使用div+css更是必不可少，若是缺乏或錯誤document將會形成你的CSS失效或半失效，即由於css失效，網頁佈局變亂，有的css屬性不能體現。

　　（5）若是你不能記住和正確輸入DOCTYPE長串英文，不要緊，DIVCSS5建議你使用DW軟件直接新建html便可獲得完整結構最基本html。

3八、iframe的優缺點：

　　（1）HTML框架簡述

　　　　一個瀏覽器窗體能夠經過幾個頁面的組合來顯示。咱們可使用框架來完成(frames)這項工做。(框架能夠把HTML文檔分爲多個頁面)
框架頁使用了表格的方式組合，能夠分爲數行與數列。
　　（2） 框架的優勢
    • 重載頁面時不須要重載整個頁面，只須要重載頁面中的一個框架頁(減小了數據的傳輸，加快了網頁下載速度)
    • 技術易於掌握，使用方便，使用者衆多，可主要應用於不需搜索引擎來搜索的頁面
    • 方便製做導航欄 

　　（3）框架的缺點（iframe的缺點與frame相似）

    • 會產生不少頁面，不容易管理
    • 不容易打印（目前只能實現分框架頁面的打印，不能實現對frameset的打印）
    • 瀏覽器的後退按鈕無效（只能針對實現當前光標所在頁面的前進與後退，沒法實現frameset整個頁面的前進與後退）
    • 代碼複雜,沒法被一些搜索引擎索引到（框架結構（幀結構）的不能爲每一個網頁都設置一個標題（TITLE），更爲糟糕的是，有些搜索引擎對框架結構的頁面不能正確處理，會影響到搜索結果的排列名次）
    • 多數小型的移動設備（PDA 手機）沒法徹底顯示框架
    • 多框架的頁面會增長服務器的http請求
    • 因爲上面諸多缺點，所以不符合標準網頁設計的理念,已經被標準網頁設計拋棄，目前的html5已再也不支持此標籤 

3九、同步和異步的區別：

　　（1）同步：

　　　　同步的思想是：全部的操做都作完，才返回給用戶。這樣用戶在線等待的時間太長，給用戶一種卡死了的感受（就是系統遷移中，點擊了遷移，界面就不動了，可是程序還在執行，卡死了的感受）。這種狀況下，用戶不能關閉界面，若是關閉了，即遷移程序就中斷了。

 　　（2）異步：

　　　　將用戶請求放入消息隊列，並反饋給用戶，系統遷移程序已經啓動，你能夠關閉瀏覽器了。而後程序再慢慢地去寫入數據庫去。這就是異步。可是用戶沒有卡死的感受，會告訴你，你的請求系統已經響應了。你能夠關閉界面了。

 　　（3）總結：

　　　　a、同步，是全部的操做都作完，才返回給用戶結果。即寫完數據庫以後，在相應用戶，用戶體驗很差。

　　　　b、異步，不用等全部操做等作完，就相應用戶請求。即先相應用戶請求，而後慢慢去寫數據庫，用戶體驗較好。

40、不一樣網頁之間的數據傳遞：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程