@author: 周丹
@email: sharon_zd@qq.com
@datetime: 2016/08/31
題目如有侵權行為,請聯系刪除;
答案僅供參考,如有不同意見,歡迎留言討論;
轉載請注明出處
題目部分
1. 輸出對象中值大於2的key的數組。期待輸出["c","d"]
1 var data = {a: 1, b: 2, c: 3, d: 4}; 2 Object.keys(data).filter(function (x) {return ________ });
2. 下面關於css布局的描述,不正確的是?
a.塊級元素實際占用的寬度與它的width屬性有關
b.塊級元素實際占用的寬度與它的border屬性有關
c.塊級元素實際占用的寬度與它的padding屬性有關
d.塊級元素實際占用的寬度與它的background屬性有關
3.下面關於html的描述不推薦的是?
a.在頁面頂部添加doctype聲明
b.在</head>...<body>中間插入HTML代碼
c.避免使用<font>標簽
d.使用<table>元素展現學生成績表等數據
4.下面哪個屬性不會讓div脫離文檔流（normal flow）?
a. position:absolute;
b. position:fixed;
c. position:relative;
d. float:left
5.瀏覽器在一次HTTP請求中,需要傳輸一個4097字節的文本數據給服務端,可以采用哪些方式?
a.存入indexDB
b.寫入cookie
c.放在url參數
d.寫入session
e.使用post
f.放在local storage
6.下列事件哪個不是由鼠標觸發的事件?
a.click
b.contextmenu
c.mouseout
d.keydown
7.請實現一個fibonacci函數,要求其參數和返回值如下所示:
/**
* @desc: fibonacci
* @param: count{number}
* @return: result{number}第count個fibonacci值,計數從0開始
fibonacci數列為: {1,1,2,3,5,8,13,21,34……}
則getNthFibonacci(0)返回值為1, getNthFibonacci(4)返回值為5
*/
function getNthFibonacci(count){ }
8.填寫內容讓下面代碼支持a.name="name1"; b.name="name2";
1 function obj(name){ 2 __________________ 3 } 4 obj.__________ = "name2"; 5 var a = obj("name1"); 6 var b = new obj;
9.javascript語言特性中,有很多方面和我們接觸的其他編程語言不太一樣,比如說,javascript語言實現繼承機制的核心就是_____,而不是java語言那樣的類式繼承。JavaScript解析引擎在讀取一個Object的屬性的值時,會沿着_____向上尋找, 如果最終沒有找到, 則該屬性值為_______; 如果最終找到該屬性的值, 則返回結果。與這個過程不同的是, 當JavaScript解析引擎執行給一個Object的某個屬性值賦值的時候,如果當前Object存在該屬性,則改寫該屬性的值,如果當前的Object本身並不存在該屬性, 則__________________.
10.頁面中如下格式的人員信息表格:
| 序號 | 姓名 | 年齡 | 籍貫 | |
| 1 | 張三 | 24 | 北京 | |
| 2 | 李斯 | 43 | 陝西 | |
| 3 | 韓信 | 49 | 湖北 | |
| 4 | 宋江 | 43 | 山東 | |
| 5 | 李逵 | 38 | 青海 | |
| 6 | 林沖 | 42 | 北京 |
表格每行的HTML結構為:
1 <tr> 2 <td><input type="checkbox"></td> 3 <td>2</td> 4 <td>李斯</td> 5 <td>43</td> 6 <td>陝西</td> 7 </tr>
假定表格的元素id為person-list,奇數行的class名為odd。 請實現如下功能:
- 選中單選框,點擊刪除時對應行消失;
- 點擊排序時,按照升序對表格中的每一行進行排序;
- 點擊篩選,籍貫處會變成一個下拉框,選項值為當前表格中鎖包含的省份名稱,選中某個省份,展示對應省份的人員信息
11. 實現如下頁面布局。
logo
用戶名
content-自適應布局
aside-定寬200px
答案部分
1. x > 'b'
1 var data = {a: 1, b: 2, c: 3, d: 4}; 2 console.log(Object.keys(data)); //打印["a", "b", "c", "d"] ; Object.keys返回一個包含指定對象的所有非繼承可枚舉屬性名的數組 3 var array = Object.keys(data).filter(function (x) { //filter返回的是調用的數組的一個子集 4 return x > 'b'; 5 }); 6 console.log(array); //["c", "d"]
2. 默認w3c盒模型中，塊級元素實際占的寬度為 width+padding+border
在ie盒模型中，塊級元素實際占的寬度為 width（width的寬度已經包含了content和padding和border）
無論如何，都與background沒關系。應選D
3. B. 其中C選項,<font>用來規定文本的字體、字體尺寸、字體顏色。的確不贊成使用，應該用樣式替換它。
4. C
- 文檔流：即自上而下，從左至右
- 三種情況會脫離文檔流：float，fixed，absolute
- absolute:對象脫離正常文檔流，使用top，right，bottom，left屬性進行絕對定位，層疊通過z-index屬性定義。
- fixed:對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性定義。
- relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。 static：position默認值，無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用 z-index屬性：又稱為對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊， 如果兩個對象的此屬性具有同樣的值，那么將依據它們在HTML文檔中流的順序層疊，寫在后面的將會覆蓋前面的。需要注意的是， 父子關系是無法用z-index來設定上下關系的，一定是子級在上父級在下。 使用static定位或無position定位的元素z-index屬性是無效的。
5. 選e.
- indexDB是html5的本地存儲，用作離線應用
- cookie通過瀏覽器記錄信息確定用戶身份，最大為4k=4096b
- url參數用的是get方法，最大2k=2048b
- session是服務器端使用的記錄客戶端狀態的機制
- post傳輸數據足夠大
- local Storage是html5本地存儲
6. 選d。
- click 鼠標左鍵點擊事件
- contextmenu 鼠標右鍵點擊事件
- mouseout 鼠標移出事件
- keydown 鍵盤按下事件
7. 有三種實現方式, 推薦方法三。
1 //純循環實現 2 function getNthFibonacci(count){ 3 console.log('沒用遞歸called') 4 var i=0, j=1, k=0; 5 var x = 1; 6 for(i=0,j=1,k=0; k < count;i=j,j=x,k++ ){ 7 x=i+j; 8 } 9 return x; 10 } 11 for(var i = 0;i<9;i++){ 12 console.log(getNthFibonacci(i)); 13 } 14 //遞歸實現 15 var getNthFibonacci2 = function (n) { 16 console.log('遞歸called'); 17 return n < 2 ? 1 : getNthFibonacci2(n - 1) + getNthFibonacci2(n - 2); 18 }; 19 for(var i = 0;i<9;i++){ 20 console.log(getNthFibonacci2(i)); 21 } 22 //記憶實現，減少函數調用次數。參考《JavaScript語言精粹》 23 var getNthFibonacci3 = function () { 24 console.log('記憶遞歸called'); 25 var memo = [1, 1]; //使用一個數組保存我們的存儲結果，存儲結果可以隱藏在閉包里 26 var fib = function (n) { 27 var result = memo[n]; 28 if (typeof result !== 'number') { //否則就進行計算，並存儲 29 result = fib(n - 1) + fib(n - 2); 30 memo[n] = result; 31 } 32 return result; //如果已經知道存儲結果，就立即返回這個存儲結果 33 }; 34 return fib; 35 }(); 36 for(var i = 0;i<9;i++){ 37 console.log(getNthFibonacci3(i)); 38 }
8. 考察this指向 和 原型鏈
1 function obj(name){ 2 console.log(this); 3 if(this === window){ //判斷通過何種方式調用。 4 if(name){ 5 this.name = name; 6 }else{ 7 this.name = 'name1'; 8 } 9 return this; 10 } 11 } 12 obj.prototype.name = "name2"; 13 var a = obj("name1"); //如果通過函數方式調用,this會指向window。 14 var b = new obj; //如果通過new方式調用,this會指向實例化后的對象,obj{} 15 var c = obj(); //如果 函數調用的時候不帶參數,默認name為name1 16 console.log(a.name); 17 console.log(b.name); 18 console.log(c.name)
9. 原型; 原型鏈; undefined; 添加該屬性並賦值
10. 考察dom操作;排序等
1 <table id="person-list"> 2 <thead> 3 <tr> 4 <td> 5 <button id="remove">刪除</button> 6 </td> 7 <td>序號</td> 8 <td>姓名</td> 9 <td>年齡 10 <button id="sort">排序</button> 11 </td> 12 <td>籍貫 13 <button id="select">篩選</button> 14 </td> 15 </tr> 16 </thead> 17 <tbody> 18 <tr> 19 <td> 20 <input type="checkbox"/> 21 </td> 22 <td>1</td> 23 <td>張三</td> 24 <td>24</td> 25 <td>北京</td> 26 </tr> 27 <tr> 28 <td><input type="checkbox"/> 29 </td> 30 <td>2</td> 31 <td>李斯</td> 32 <td>43</td> 33 <td>陝西</td> 34 </tr> 35 <tr> 36 <td><input type="checkbox"/> 37 </td> 38 <td>3</td> 39 <td>韓信</td> 40 <td>49</td> 41 <td>湖北</td> 42 </tr> 43 <tr> 44 <td><input type="checkbox"/> 45 </td> 46 <td>4</td> 47 <td>宋江</td> 48 <td>43</td> 49 <td>山東</td> 50 </tr> 51 <tr> 52 <td><input type="checkbox"/> 53 </td> 54 <td>5</td> 55 <td>李逵</td> 56 <td>38</td> 57 <td>青海</td> 58 </tr> 59 <tr> 60 <td><input type="checkbox"/> 61 </td> 62 <td>6</td> 63 <td>林沖</td> 64 <td>42</td> 65 <td>北京</td> 66 </tr> 67 </tbody> 68 </table>
1 body { 2 font-family: "arial", sans-serif; 3 } 4 #person-list { 5 width: 80%; 6 margin-left: 10%; 7 margin-right: 10%; 8 } 9 #person-list thead { 10 font-weight: bold; 11 } 12 #person-list button { 13 background-color: transparent; 14 border: 0; 15 font-weight: bold; 16 font-size: small; 17 padding-left: 0; 18 color: #6ba9ee; 19 } 20 #person-list thead tr td { 21 border-bottom: 1px #ccc solid; 22 } 23 #person-list tbody tr td:nth-child(2) { 24 font-weight: bold; 25 } 26 #person-list tbody tr td { 27 border-top: 1px #ccc solid; 28 padding-top: 5px; 29 padding-bottom: 5px; 30 } 31 #person-list tbody tr:nth-child(2n+1) { 32 background-color: #eee; 33 }
1 var checks = document.getElementsByTagName('input'); 2 var tbody = document.getElementsByTagName("tbody")[0]; 3 var trs = tbody.getElementsByTagName("tr"); 4 var remove = document.getElementById("remove"); 5 var sort = document.getElementById("sort"); 6 var select = document.getElementById("select"); 7 8 remove.onclick = function(){ 9 //刪除選中行 10 for(var i = checks.length-1; i >= 0;i--){ //因為removeChild的時候，長度會變化，所以不能以小於length作為判斷條件，應該從后往前掃描 11 if(checks[i].checked){ 12 tbody.removeChild(checks[i].parentNode.parentNode); 13 } 14 } 15 //修改序號 16 for(var i = 0;i < trs.length; i++){ 17 var td=trs[i].getElementsByTagName("td")[1]; 18 td.innerHTML=i+1; 19 } 20 }; 21 22 sort.onclick=function(){ 23 //循環遍歷，后面比它小的就插入到它前面去 24 for(var i=0;i < trs.length; i++){ 25 var td=trs[i].getElementsByTagName("td")[3]; 26 for(var j=i;j < trs.length;j++){ 27 var tdd=trs[j].getElementsByTagName("td")[3]; 28 if((td.innerHTML - tdd.innerHTML)>0){ 29 td.parentNode.parentNode.insertBefore(tdd.parentNode,td.parentNode); 30 } 31 } 32 } 33 //修改序號 34 for(var i=0;i < trs.length;i++){ 35 var td=trs[i].getElementsByTagName("td")[1]; 36 td.innerHTML=i+1; 37 } 38 }; 39 40 select.onclick=function(){ 41 //如果已經篩選過，頁面中有下拉框了就不要再執行此函數了。 42 if(document.getElementsByTagName('select').length>0) return false; 43 var provinces = []; 44 //把所有的省份取出來，存放到數組里 45 for(var i=0;i < trs.length;i++){ 46 var td=trs[i].getElementsByTagName("td")[4]; 47 var prov=td.innerHTML; 48 provinces.push(prov); 49 } 50 //去重 51 for(var j=0;j< provinces.length;j++){ 52 for(var k=provinces.length;k>j;k--){ //同理，因為長度會發生變化，所以從后往前算 53 if(provinces[j] === provinces[k]){ 54 provinces.splice(k,1); 55 } 56 } 57 } 58 //創建selectElem下拉框元素，option為省份 59 var selectElem = document.createElement("select"); 60 for(var z = 0;z < provinces.length;z++){ 61 var option=document.createElement("option"); 62 option.innerHTML=provinces[z]; 63 option.value=provinces[z]; 64 selectElem.appendChild(option); 65 } 66 var childNodes=select.parentNode.childNodes; 67 //去掉籍貫兩個字 68 for(var x= 0; x< childNodes.length;x++){ 69 if(childNodes[x].nodeType === 3){ 70 childNodes[x].parentNode.removeChild(childNodes[x]); 71 } 72 } 73 //在按鈕之前插入select下拉框 74 select.parentNode.insertBefore(selectElem,select); 75 //監控下拉框的option的點擊事件，注意是下拉框的onchange，而不是option的onclick 76 selectElem.onchange = function(){ 77 for(var i =0 ;i< trs.length;i++){ 78 trs[i].style.display="none" ; 79 if(trs[i].getElementsByTagName("td")[4].innerHTML == selectElem.value){ 80 trs[i].style.display = ""; 81 } 82 } 83 }; 84 }; 85 var checks = document.getElementsByTagName('input'); 86 var tbody = document.getElementsByTagName("tbody")[0]; 87 var trs = tbody.getElementsByTagName("tr"); 88 89 var remove = document.getElementById("remove"); 90 var sort = document.getElementById("sort"); 91 var select = document.getElementById("select");
11. 考察頁面布局
1 #head{border: green 1px solid;} 2 #head #logo{border: red 1px solid;height: 80px;width: 80px;margin-left: 10px;margin-top: 9px;} 3 #head #user{float: right;border: 1px black solid;width: 100px;margin-right: 10px;margin-bottom: 10px;} /*右浮動*/ 4 #head #user span{float: right;} /*右浮動*/ 5 #head:after{display: block;clear: both;content: '';visibility: hidden;height: 0;} /*清除浮動*/ 6 #container{position: relative;height: 300px;margin-top: 10px} /*相對定位*/ 7 #container #left{border: blue 1px solid;float: left;height: 300px;position: absolute;right: 310px;left: 0;} /*絕對定位，左0右310，就可以撐出寬度來*/ 8 #container #right{width: 300px;border: red 1px solid;height: 300px;right: 0;position: absolute;} /*絕對定位，右0，就可以始終在最右邊*/ 9 #footer{height: 50px;line-height: 50px;border: saddlebrown 1px solid;margin-top: 10px;text-align: center;} /*line-height = height可以使元素垂直居中*/
1 <div id="head"> 2 <div id="logo">logo</div> 3 <div id="user"><span>用戶名</span></div> 4 </div> 5 <div id="container"> 6 <div id="left">content-自適應布局</div> 7 <div id="right">aside-定寬200px</div> 8 </div> 9 <div id="footer"><span>foot</span></div>