前端笔试题
解析：
DOM中的事件对象：（符合W3C标准）
preventDefault() 取消事件默认行为
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。
stopPropagation() 取消事件冒泡对当前节点无影响。
IE中的事件对象：
cancelBubble() 取消事件冒泡
returnValue() 取消事件默认行为
event.preventDefault();// 取消事件的默认行为
event.stopPropagation(); // 阻止事件冒泡行为 , 符合 W3C 标准，适用于 FireFox 等
cancelBubble // 阻止事件冒泡行为，不符合 W3C 标准，适用于 IE
stopImmediatePropagation 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。此方法会立即生效，并且会影响当前节点中的事件侦听器。
stopPropagation 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。此方法不会影响当前节点 (currentTarget) 中的任何事件侦听器。
1 function Person(){} 2 Person.prototype.name = "Nick"; 3 Person.prototype.age = 20; 4 Person.prototype.sayHi = function(){ 5 console.log("I am "+ this.name); 6 }; 7 var Person1 = new Person(); 8 Person1.name="Amy"; 9 var Person2 = new Person(); 10 console.log(Person1.hasOwnProperty("name")); //true 11 console.log(Person2.hasOwnProperty("name")); //false 12 console.log(Person.hasOwnProperty("name")); //true 13 console.log(Person.name); //Person 14 console.log(Person2.name); //Nick 15 16 console.log("name" in Person1); //true 17 console.log("name" in Person2); //true 18 console.log("name" in Person); //true 19 20 for(var prop in Person1){ 21 console.log(prop); //name age sayHi 22 } 23 for(var prop in Person2){ 24 console.log(prop); ////name age sayHi 25 }
答案：
1 function sum(){ 2 var result = 0; 3 for(var i = 0, l=arguments.length;i<l;i++){ 4 //parseFloat的结果要么为一个小数，要么为NaN，||运算如果前一个为真则不计算后一个，直接返回前一个表达式的值，如果是NaN则返回后一个表达式的值； 5 result += window.parseFloat(arguments[i])||0; 6 } 7 return result.toFixed(3)*1000/1000; 8 //这个是在做：保留三位小数，并且去掉末尾的0，最后一位会进行四舍五入。 9 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>1111</title> 5 <style type="text/css"> 6 table tr:nth-child(odd){ 7 background-color: white; 8 } 9 table tr:nth-child(even){ 10 background-color: grey; 11 } 12 /*两种方法都可以*/ 13 /*.table tr:nth-child(2n-1){ 14 background-color: white; 15 } 16 .table tr:nth-child(2n){ 17 background-color: grey; 18 }*/ 19 .table tr:hover{ 20 background-color: yellow; 21 } 22 </style> 23 </head> 24 <body> 25 <table class="table"> 26 <tr><td>第一行</td></tr> 27 <tr><td>第二行</td></tr> 28 <tr><td>第三行</td></tr> 29 <tr><td>第四行</td></tr> 30 </table> 31 </body> 32 </html>
解析：
CSS3 :nth-child() 选择器：
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
方法1：
- parseInt()函数可解析一个字符串，并返回一个整数。
-
- parseInt(string, radix)
-
- string 是被解析的字符串，radix可选，表示要解析的数字的基数。
- parseFloat（）函数可解析一个字符串，并返回一个浮点数。
- 该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
- 参数是string，必须
1 function traverse(oNode){ 2 var aResult = []; 3 oNode = oNode || document.body; 4 if(oNode.style){ 5 var nWidth = window.parseInt(oNode.style.width, 10) || 0; 6 var nHeight = window.parseInt(oNode.style.height, 10)|| 0; 7 if(nWidth>50 && nHeight>50){ 8 aResult.push(oNode); 9 } 10 } 11 var aChildNodes = oNode.aChildNodes; //获得子节点 12 if(aChildNodes.length > 0){ 13 for(var i=0;i<aChildNodes.length;i++){ 14 var oTmp = aChildNodes[i]; 15 aResult = aResult.concat(traverse(oTmp)); //concat连接多个数组，并返回被连接数组的一个副本 16 } 17 } 18 return aResult; 19 }
方法2：
1 //querySelectorAll()方法： 2 //接收一个CSS选择符，返回的是所有匹配的元素。所以这里'body *'是返回了所有元素 3 //Array.prototype.filter对数组元素进行过滤。使用call把该方法放到返回的所有元素中使用，第二个参数作为参数传入filter函数。 4 //这个方法好牛逼的撒 5 function traverse(){ 6 return Array.prototype.filter.call(document.querySelectorAll('body *'),function(node){ 7 return node.offsetWidth>50 && node.offsetHeight>50; 8 }) 9 }
方法3：
function getCurrentStyle(node,attr){ if(node.currentStyle){ return node.currentStyle.attr; //兼容ie } else { return getComputedStyle(node,null)[attr]; } } //obj.children获取作为对象直接后代的 DHTML 对象的集合 //childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合 function traverse(nodes){ var aResults = []; for(var i=0; i<nodes.length;i++){ var nWidth = parseInt(getCurrentStyle(nodes[i],'width')); var nHeight = parseInt(getCurrentStyle(nodes[i],'height')); if(nWidth>50 && nHeight>50){ aResults.push(nodes[i]); } if(nodes[i].hasChildNodes()){ aResults = aResults.concat(traverse(nodes[i].children)); } } return aResults; } traverse(document.body.children);
