當前位置:首頁 » 網頁前端 » web面試有筆試嗎
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web面試有筆試嗎

發布時間: 2022-11-16 18:19:08

⑴ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

一、不定項選擇題 (每題3分,共30分)
1. 聲明一個對象,給它加上name屬性和show方法顯示其name值,以下代碼中正確的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是( CD )
A. 對數組里數據的排序可以用sort函數,如果排序效果非預期,可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素,可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」,下列JavaScript語句正確的是( A )
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕,使之打開一個新窗口,載入一個網頁,以下JavaScript代碼中可行的是( AD )
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>

⑵ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

JavaScript面試題:字元串處理
在應聘前端程序員時,在筆試部分經常會考到字元串處理的問題。這些題有一個特點,站在考官的角度去考慮,它考的不是你會不會,而是你能不能在不借用XX手冊或者XX指南再或者網路谷歌的情況下,用比較簡潔的方式寫出答案來。就具體的字元串處理問題,鄭州尚學堂給大家分享一下。
1、字元串轉換

字元串轉換是最基礎的要求和工作,你可以將任何類型的數據都轉換為字元串,你可以用下面三種方法的任何一種:

var num= 19; // 19
var myStr = num.toString(); // "19"

你同樣可以這么做:

var num= 19; // 19
var myStr = String(num); // "19"

或者,再簡單點兒:

var num= 19; // 19
var myStr = "" +num; // "19"

2、字元串分割

字元串分割,即將一個字元串分割為多個字元串,JavaScript中給我們提供了一個非常方便的函數,如:

var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(","); // ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr .split(",", 3); // ["I", "Love", "You"];

split()的第二個參數,表示返回的字元串數組的最大長度。

3、獲取字元串長度

字元串長度是在開發中經常要用到的,非常簡單如下:

var myStr = "I,Love,You,Do,you,love,me";
var myStrLength = myStr.length; //25

4、查詢子字元串

很多人都會忘記這幾個JavaScript的自帶的方法,或者忘記它們的具體用法,從而導致在做題的時候不得不嵌套for循環來做。

第一個函數:indexOf(),它從字元串的開頭開始查找,找到返回對應坐標,找不到返回-1,如下:

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.indexOf("you"); // 7 ,基於0開始,找不到返回-1

第二個函數:lastIndexOf(),它從字元串的末尾開始查找,找到返回對應坐標,找不到返回-1,如下:

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.lastIndexOf("you"); // 14

以上兩個函數同樣接收第二個可選的參數,表示開始查找的位置。

5、字元串替換

單單查到字元串應該還不會停止,一般題目都還經常會遇到讓你查到並替換為你自己的字元串,例如:

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me"

默認只替換第一次查找到的,想要全局替換,需要置上正則全局標識,如:

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me"
6、查找給定位置的字元或其字元編碼值

想要查找給定位置的字元,你可以使用如下函數:

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charAt(8);// "o",同樣從0開始

同樣,它的一個兄弟函數就是查找對應位置的字元編碼值,如:

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charCodeAt(8); //111

7、字元串連接

字元串連接操作可以簡單到用一個加法運算符搞定,如:

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";//"I,love,you!Do,you,love,me?Yes!"

同樣,JavaScript也自帶了相關的函數,如:

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1.concat(str2);//"I,love,you!Do,you,love,me?"

其中concat()函數可以有多個參數,傳遞多個字元串,拼接多個字元串。

8、字元串切割和提取

有三種可以從字元串中抽取和切割的方法,如:

第一種,使用slice():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.slice(1,5);//",lov"

第二種,使用substring():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substring(1,5); //",lov"

第三種,使用substr():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substr(1,5); //",love"

與第一種和第二種不同的是,substr()第二個參數代表截取的字元串最大長度,如上結果所示。

9、字元串大小寫轉換

常用的轉換為大寫或者小寫字元串函數,如下:

var myStr = "I,love,you,Do,you,love,me";
var lowCaseStr = myStr.toLowerCase();//"i,love,you,do,you,love,me";
var upCaseStr = myStr.toUpperCase();//"I,LOVE,YOU,DO,YOU,LOVE,ME"

10、字元串匹配

字元串匹配可能需要你對正則表達式有一定的了解,先來看看match()函數:

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.match(pattern);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me

如你所見,match()函數在字元串上調用,並且接受一個正則的參數。來看看第二個例子,使用exec()函數:

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;

⑶ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

參見如下幾個
1.JavaScript的數據類型都有什麼?如何判斷某變數是否為數組數據類型?
2.希望獲取到頁面中所有的checkbox怎麼做?(不使用第三方框架)
3.什麼是Ajax和JSON,它們的優缺點。
4.輸出今天的日期,以YYYY-MM-DD的方式,比如今天是2016年12月17日,則輸出2016-12-17。
5.將字元串」<tr><td>{id}</td><td>{id}</td><td>{name}</td></tr>」中的{id}替換成10,{name}替換成Tony (使用正則表達式)。
當然還有其他很多經典面試題,可以網路搜索。

⑷ web前端招聘要求有說,有無基礎均可,通過面試就能進行培訓後上崗,不知道面試要不要考筆試

技術之內的招聘都會有筆試的,而且有無基礎均可的基本可以說是培訓機構,我面試過很多這樣的

⑸ 請問面試的時候有筆試嗎還是只有面試這一輪環節

這個要看你面試公司的具體情況,我面試的一些外資企業一般需要做筆試,但是是在第一輪初試之後才需要筆試,也有一些民營公司就只需要面試,沒有筆試這一環節,另外還要根據你面試的職位也會不同,比如外貿翻譯啊,編輯啊等等,需要通過一些筆試才能確定你的能力是否符合的,在面試的時候就會直接筆試了。根據具體情況都不一定,祝你好運!

⑹ 前端面試有筆試嗎

大多數公司都有筆試,基本都是根據你的簡歷來出題,主要詢問的都是基礎

⑺ 經典的 Web 前端或者 JavaScript 面試筆試題有哪些

一、不定項選擇題 (每題3分,共30分)
1. 聲明一個對象,給它加上name屬性和show方法顯示其name值,以下代碼中正確的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是( CD )
A. 對數組里數據的排序可以用sort函數,如果排序效果非預期,可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素,可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」,下列JavaScript語句正確的是( A )
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕,使之打開一個新窗口,載入一個網頁,以下JavaScript代碼中可行的是( AD )
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>
5. 使用JavaScript向網頁中輸出<h1>hello</h1>,以下代碼中可行的是( BD )
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=」text/javascript」>
document.write(「hello」);
</script>
</h1>
6. 分析下面的代碼:
<html>
<head>
<script type=」text/javascript」>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=」#ffffff」>
<form name=」myfm」>
<input type=」text」 name=」first_text」>
<input type=」text」 name=」second_text」>
</form>
</body>
</html>
以下說法中正確的是( CD )
A. 在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,第一個文本框的內容不變
B. 在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,將在第二個文本框中復制第一個文本框的內容
C. 在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,將在第一個文本框中復制第二個文本框的內容
D. 在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,第二個文本框的內容不變
7. 下面的JavaScript語句中,( D )實現檢索當前頁面中的表單元素中的所有文本框,並將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==」text」)
form1.elements.value=」";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==」text」)
forms[0].elements.value=」";
}
C. if(document.form.elements.type==」text」)
form.elements.value=」";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==」text」)
document.forms.elements[j].value=」";
}
}
8. 在表單(form1)中有一個文本框元素(fname),用於輸入電話號碼,格式如:010-82668155,要求前3位是010,緊接一個「-」,後面是8位數字。要求在提交表單時,根據上述條件驗證該文本框中輸入內容的有效性,下列語句中,( A )能正確實現以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
B. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」 && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
C. var str= form1.fname.value;
if(str.substr(0,3)!=」010-」|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(「無效的電話號碼!」);
D. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
9. 關於正則表達式聲明6位數字的郵編,以下代碼正確的是( C )
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(「\d{6}」);
10. 關於JavaScript里的xml處理,以下說明正確的是( BCD )
A. Xml是種可擴展標記語言,格式更規范,是作為未來html的替代
B. Xml一般用於傳輸和存儲數據,是對html的補充,兩者的目的不同
C. 在JavaScript里解析和處理xml數據時,因為瀏覽器的不同,其做法也不同
D. 在IE瀏覽器里處理xml,首先需要創建ActiveXObject對象
二、問答題
1. 列舉瀏覽器對象模型BOM里常用的至少4個對象,並列舉window對象的常用方法至少5個 (10分)
對象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
2. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明 (10分)
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
三、程序題
1、補充按鈕事件的函數,確認用戶是否退出當前頁面,確認之後關閉窗口; (10分)
<html>
<head>
<script type=」text/javascript」 >
function closeWin(){
//在此處添加代碼
if(confirm(「確定要退出嗎?」)){
window.close();
}
}
</script>
</head>
<body>
<input type=」button」value=」關閉窗口」onclick=」closeWin()」/>
</body>
</html>
2、寫出簡單描述html標簽(不帶屬性的開始標簽和結束標簽)的正則表達式,並將以下字元串中的html標簽去除掉(15分)
var str = 「<div>這里是div<p>裡面的段落</p></div>」;
//
<scripttype=」text/javascript」>
varreg = /<\/?\w+\/?>/gi;
varstr = 「<div>這里是div<p>裡面的段落</p></div>」;
alert(str.replace(reg,」"));
</script>
3、完成foo()函數的內容,要求能夠彈出對話框提示當前選中的是第幾個單選框。(10分)
<html>
<head>
<metahttp-equiv=」Content-Type」 content=」text/html;charset=utf-8″ />
</head>
<body>
<script type=」text/javascript」 >
function foo() {
//在此處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(「您選擇的是第」+(i+1)+」個單選框」);
}
}
}
</script>
<body>
<form name=」form1″ >
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」submit」/>
</form>
</body>
</html>
4、完成函數showImg(),要求能夠動態根據下拉列表的選項變化,更新圖片的顯示 (15分)
<body>
<script type=」text/javascript」 >
function showImg (oSel) {
//在此處添加代碼
var str = oSel.value;
document.getElementById(「pic」).src= str+」.jpg」;
}
</script>
<img id=」pic」src=」img1.jpg」width=」200″ height=」200″ />
<br />
<select id=」sel」>
<option value=」img1「>城市生活</option>
<option value=」img2「>都市早報</option>
<option value=」img3「>青山綠水</option>
</select></body>

⑻ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

HTML、CSS部分

8.html5\CSS3有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,地理定位等功能的增加。

* 繪畫 canvas 元素

用於媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素,比如 article、footer、header、nav、section

表單控制項,calendar、date、time、email、url、search

CSS3實現圓角,陰影,對文字加特效,增加了更多的CSS選擇器 多背景 rgba

新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素:basefont,big,center,font, s,strike,tt,u;

對可用性產生負面影響的元素:frame,frameset,noframes;

* 是IE8/IE7/IE6支持通過document.createElement方法產生的標簽,
可以利用這一特性讓這些瀏覽器支持HTML5新標簽,

瀏覽器支持新標簽後,還需要添加標簽默認的樣式:

* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

9.你怎麼來實現頁面設計圖,你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
* 首先劃分成頭部、body、腳部;。。。。。

*
實現效果圖是最基本的工作,精確到2px;

與設計師,產品經理的溝通和項目的參與

做好的頁面結構,頁面重構和用戶體驗

處理hack,兼容、寫出優美的代碼格式

針對伺服器的優化、擁抱 HTML5。

10.常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?
* 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery,超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
(理解這些框架的功能、性能、設計原理)

* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

* 城市選擇插件,汽車型號選擇插件、幻燈片插件。彈出層。(寫過開源程序,載入器,js引擎更好)

JavaScript原型,原型鏈 ? 有什麼特點?

* 原型對象也是普通的對象,是對象一個自帶隱式的 __proto__ 屬性,原型也有可能有自己的原型,如果一個原型對象的原型不為null的話,我們就稱之為原型鏈。
* 原型鏈是由一些用來繼承和共享屬性的對象組成的(有限的)對象鏈。

* JavaScript的數據對象有那些屬性值?

writable:這個屬性的值是否可以改。

configurable:這個屬性的配置是否可以刪除,修改。

enumerable:這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。

value:屬性值。

* 當我們需要一個屬性的時,Javascript引擎會先看當前對象中是否有這個屬性, 如果沒有的話,就會查找他的Prototype對象是否有這個屬性。

function clone(proto) {

function Dummy() { }

Dummy.prototype = proto;

Dummy.prototype.constructor = Dummy;

return new Dummy(); //等價於Object.create(Person);

}

function object(old) {
function F() {};
F.prototype = old;
return new F();
}
var newObj = object(oldObject);

12.列出display的值,說明他們的作用。position的值, relative和absolute定位原點是?
1. block 象塊類型元素一樣顯示。
none 預設值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示,並添加樣式列表標記。

2.
*absolute
生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。

*fixed (老IE不支持)
生成絕對定位的元素,相對於瀏覽器窗口進行定位。

*relative
生成相對定位的元素,相對於其正常位置進行定位。

* static 默認值。沒有定位,元素出現在正常的流中
*(忽略 top, bottom, left, right z-index 聲明)。

* inherit 規定從父元素繼承 position 屬性的值。

13.頁面重構怎麼操作?
編寫 CSS、讓頁面結構更合理化,提升用戶體驗,實現良好的頁面效果和提升性能。

14.語義化的理解?
html語義化就是讓頁面的內容結構化,便於對瀏覽器、搜索引擎解析;
在沒有樣式CCS情況下也以一種文檔格式顯示,並且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重,利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。

15.HTML5的離線儲存?
localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;
sessionStorage 數據在瀏覽器關閉後自動刪除。

16.為什麼要初始化CSS樣式。

因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。

*最簡單的初始化方法就是: * {padding: 0; margin: 0;} (不建議)
淘寶的樣式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

17.(寫)描述一段語義的html代碼吧。
(HTML5中新增加的很多標簽(如:<article>、<nav>、<header>和<footer>等)
就是基於語義化設計原則)

< div id="header">
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>

語義 HTML 具有以下特性:

文字包裹在元素中,用以反映內容。例如:
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其他來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用作語義用途以外的其他目的。例如:
<h1>包含標題,但並非用於放大文本。
<blockquote>包含大段引述,但並非用於文本縮進。
空白段落元素 ( <p></p> ) 並非用於跳行。
文本並不直接包含任何樣式信息。例如:
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。

18.absolute的containing block計算方式跟正常流有什麼不同?
19.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
20.對BFC規范的理解?(W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關 系和相互作用。)
21.iframe有那些缺點?
*iframe會阻塞主頁面的Onload事件;

*iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript
動態給iframe添加src屬性值,這樣可以可以繞開以上兩個問題。

22.css定義的權重
以下是權重的規則:標簽的權重為1,class的權重為10,id的權重為100,以下例子是演示各種定義的權重值:

/*權重為1*/
div{
}
/*權重為10*/
.class1{
}
/*權重為100*/
#id1{
}
/*權重為100+1=101*/
#id1 div{
}
/*權重為10+1=11*/
.class1 div{
}
/*權重為10+10+1=21*/
.class1 .class2 div{
}

如果權重相同,則最後定義的樣式會起作用,但是應該避免這種情況出現

23.eval是做什麼的?
它的功能是把對應的字元串解析成JS代碼並運行;
避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。

23.寫一個通用的事件偵聽器函數
`// event(事件)工具集,來源:https://github.com/markyun
markyun.Event = {
// 頁面載入完成後
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 視能力分別使用dom0||dom2||IE方式 來綁定事件
// 參數: 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、需要執行的函數、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因為IE不支持事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默認行為
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 獲取事件目標
getTarget : function(event) {
return event.target || event.srcElement;
},
// 獲取event對象的引用,取到事件的所有信息,確保隨時能使用event;
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};

24.99%的網站都需要被重構是那本書上寫的?
* 網站重構:應用web標准進行設計(第2版)

25.什麼叫優雅降級和漸進增強?
優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果用戶使用的是老式瀏覽器,則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題,針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.

漸進增強:從被所有瀏覽器支持的基本功能開始,逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時,它們會自動地呈現出來並發揮作用。

26.Node.js的適用場景
高並發、聊天、實時消息推送

27.WEB應用從伺服器主動推送Data到客戶端有那些方式? html5 websoket
WebSocket通過Flash
XHR長時間連接
XHR Multipart Streaming
不可見的Iframe
<script>標簽的長時間連接(可跨域)

⑼ 常見的web前端面試題及答案分享

1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)


答:行內元素:會在水平方向排列,不能包含塊級元素,設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效。塊級元素:各占據一行,垂直方向排列。從新行開始結束接著一個斷行。兼容性:display:inline-block;*display:inline;*zoom:1。



2、box-sizing常用的屬性有哪些?分別有什麼作用?


答:box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。


border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。


3、Doctype作用?標准模式與兼容模式各有什麼區別?


答:告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。


標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中,頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。


4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?


答:HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。


(1)繪畫 canvas;


(2)用於媒介回放的 video 和 audio 元素;


(3)本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;


(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;


(5)語意化更好的內容元素,比如 article、footer、header、nav、section;


(6)表單控制項,calendar、date、time、email、url、search;


(7)新的技術webworker, websocket, Geolocation;


IE8/IE7/IE6支持通過document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽後,還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。


以上就是環球青藤小編關於web前端面試題的相關分享,希望對大家有所幫助,想要了解更多相關內容,請及時關注本平台並進行查看!

⑽ javaweb實習生面試需要准備些什麼,一般會出什麼筆試面試題

1.一般有面試題,看一下【java面試寶典】
2.自信點,聲音大一點,不要怕,想像和熟人一樣對話
3.最好在簡歷中有亮點,學校的獎勵,一些活動的獎勵等,而且有自己的練習的項目經驗或者其他外接的項目經驗最好了
4或者說自己主動提出自己學習中有項目經驗,一般會問你:介紹下項目的功能,用到的技術,碰到的難題,先准備好
總的說來,要樂觀自信,有項目經驗最好,掌握常見的面試題,語言表達可以,溝通流暢,這樣肯定能過,對於很想進的公司的那得充分准備好,找下往上該公司往年的面試題
這是自己經歷而來的,如果滿意,請採納,謝謝