Web前端課程檢測
第1題
1、在JavaScript中，下列選項不屬於數組方法的是？-----B
A.sort() B.length() C.concat() D.reverse()
第2題
2、下面正則表達式中（）能驗證身份證號，身份證號碼由15位或18位數字組成。----A
A. var regMycard=/^\d{15}$|^\d{18}$/;
B. var regMycard=/^\d{15}|\d{18}$/;
C. var regMycard=/^\d{15,18}$/;
D. var regMycard=/^\[0-9]{15}$|^\[0-9]{18}$/;
第3題
3、網頁中執行下列JS代碼，返回的結果是什麽
var arr = [1,2,3,4];
arr[10] = 10;
alert(arr.length);
A.undefind B.5 C.10 D.11
第4題
4、下面哪一個方法，是JQuery用於追加元素到指定元素內部末尾的？-----C
A.insertAfter() B.append() C.appendTo() D.after();
第5題
5、以下哪個項目不是可以在HTML文檔中使用的特殊字符。------B
A.>
B.&tl;
C.©
D.
第6題
6、根據柵格系統的標準用法，錯誤的是-----C
A.<div class="container"><br><div class="row">
B. <div class="row"><br><div class="col-md-1">
C.<div class="row"><br><div class="container">
D.<div class="col-md-1"><br><div class= "row">
第7題
7、下列哪個操作是W3C標準定義的阻止事件向父容器傳遞：-----C
A．e.preventDefault()
B．e.cancelBubble=true
C．e.stopPropagation()
D．e.stopImmediatePropagation()
第8題
8、使用CSS的flexbox布局，不能實現以下哪一個效果：------D
A.三列布局，隨容器寬度等寬彈性伸縮
B.多列布局，每列的高度按內容最高的一列等高
C.三列布局，左列寬度像素數確定中、右列隨容器寬度等寬彈性伸縮
D.多個寬高不等的元素，實現無縫瀑布流布局
第9題
9、在jquery中想要找到所有元素的同輩元素，下面哪一個是可以實現-----C
A.eq(index)
B.find(expr)
C.siblings([expr])
D.children()
第10題
10、下面有關JavaScript內部對象的描述正確的有（多選）------ABCD
A.History對象包含用戶（在瀏覽器窗口中）訪問過的URL
B.Location對象包含有關當前URL的信息
C.Window對象表示瀏覽器中打開的窗口
D.Navigator對象包含有關瀏覽器的信息
第11題
11,閱讀如下代碼，???處的結果應該是什麽？
var length = 10
function fn() {
alert(this.length)
}
var obj = {
length: 5,
method: function(fn) {
fn() // ???
arguments[0]() // ???
}
}
obj.method(fn);
答案：fn() // 10 arguments[0]() // 1
第12題
12、把兩個數組合並，並刪除第二個元素。
var array1 = [‘a‘, ‘b‘, ‘c‘];
var bArray = [‘d‘, ‘e‘, ‘f‘];
var cArray = array1.concat(bArray);
cArray.splice(1, 1);
第13題
13、簡述一下你理解的盒子模型？簡述一下你理解的定位？
答案： 盒子模型分為W3C盒子，和IE盒子。 W3C盒子的content只包括內容區域；IE盒子的contnet包括內容+padding+margin；
定位分為三類，relative、absolute、fixed。
relative,相對於自己本身定位，不釋放空間
absolute,相對於position:relative的父元素定位，釋放空間
fixed,相對於屏幕左上角定位，釋放空間
第14題
14,解釋一下彈性布局？列舉彈性布局的常用屬性，不少於8個。
答案： 彈性布局： display:flex;
[作用於容器的屬性]
flex-direction屬性決定主軸的方向（即項目的排列方向）
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex-flow 是flex-direction和flex-wrap的縮寫形式。
justify-content屬性定義了項目在主軸上的對齊方式。
align-items屬性定義項目在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。
[作用於項目的屬性]
order屬性定義項目的排列順序。
flex-grow屬性定義項目的放大比例，默認為0
flex-shrink屬性定義了項目的縮小比例，默認為1
flex-basis定義項目占據的主軸空間
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫
align-self:定義單個項目自身在交叉軸上的排列方式
第15題
15、在Angular.js中，ng-show/ng-hide 與 ng-if 的區別？
答案：我們都知道ng-show/ng-hide實際上是通過 display 來進行隱藏和顯示的。而ng-if實際上控制dom節點的增刪除來實現的。因此如果我們是根據不同的條件來進行dom節點的加載確認的話，那麽ng-if的性能好過ng-show.
第16題
16、有一接口地址： http://www.jianghaozhenshuai.com ，請分別使用JQuery的Ajax和AngularJS的$http 進行POST請求，要求傳遞請求參數{name:”zhangsan”},請打印返回結果。
//JQuery
$.post(“url”,{ name:”zhangsan”}, successCallback, errorCallback);
//AngularJS
$http.post(‘/someUrl‘, data).then(successCallback, errorCallback);
第17題
17、請使用原生JS獲取頁面中所有被選中的checkbox(不使用第三方框架)？
var inputs = document.getElementsByTagName("input"); var checkboxs = []; for(var i=0; i<inputs.length; i++){ if(inputs[i].type=="checkbox" && inputs[i].checked){ checkboxs.push(inputs[i]) } }
第18題
18、請解釋一下JS中的DOM0與DOM2事件模型，以及JS中的事件流模型？
【DOM0模型】
內聯模型(行內綁定)：直接將函數名作為HTML標簽的某個事件屬性的屬性值；
<button onclick="func()">DOM0內聯模型</button>
腳本模型(動態綁定)：在JS腳本中，取到某個節點，並添加事件屬性；
window.onload = function(){}
【DOM2模型】
① IE8之前： btn2.attachEvent("onclick",函數);
② 其他瀏覽器： btn2.addEventListener("click",函數,true/false);
事件流模型：分為事件冒泡與事件捕獲。 事件冒泡從自身開始到根節點觸發，事件捕獲從根節點開始到自身觸發。
第19題
19、有如下代碼結構： <div id=”div1”> <div id=”div2”></div> </div>
分別用JS和JQuery實現：新增一個<img src=”img.png” />圖片，插入在div2前面！
答案：
//JS
//JQuery
第20題
20,使用JS模擬實現面向對象三大特征之封裝。
function Person(){
var age = 0;
this.setAge = function(ages){
age = ages;
}
this.getAge = function(){
return age;
}
/*
* 私有化的方法
*/
function getTime(){
return new Date();
}
}
Web前端課程檢測