JOB：前端面试4

1。ajax请求时，如何解释json数据

　　var jsonDate =   ' { "name":"周星驰","age":23 }'

　　var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

　　var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

“eval();” 和 “JSON.parser();” 这两个方法的参数只接受字符串，也就是说只能解析字符串！！！

小结：“eval();”方法解析的时候不会去判断字符串是否合法，而且json对象中的js方法也会被执行，这是非常危险的；

parse会判断字符的合法性。

2。添加、删除、替换、插入到某个接点的方法,”==”和“===”的不同

（Q1）

1）、创建元素节点：createElement
用法：document.createElement("p");//创建p标签；
创建文本节点：createTextNode;
用法：document.createTextNode("txt");//创建文本标签；
2）、插入节点：appendchild:在要插入的元素节点上调用，他插入指定的节点使其成为那个节点的最后一个子节点。
                   insertBefore:在已有的元素前插入一个新元素；
                   insertAfter:在现有的元素后面插入一个新元素；
3）、删除节点：removeChild;从文档树中删除一个节点（先找到要删除节点的父节点，用父节点删除）；
                用法：var para1=document.getElementById("p1");
                          para1.parentNode.removeChild(para1);
4）、替换节点：replaceChild;将一个节点替换为另一个节点（先找到要替换的节点的父节点，用父节点替换）；

<span style="font-size:18px;">/** 
 * Created by hua on 2014/10/21. 
 */  
//查找节点  
document.getElementById("id");//通过id查找，返回唯一的节点，如果有多个将会返回第一个，在IE6、7中有个bug，会返回name值相同的元素，所有要做一个兼容  
document.getElementsByClassName("class");//通过class查找，返回节点数组  
document.getElementsByTagName("div");  
  
//创建节点  
document.createDocumentFragment();//创建内存文档碎片  
document.createElement();//创建元素  
document.createTextNode();//创建文本节点  
  
//添加节点  
var ele = document.getElementById("my_div");  
var oldEle = document.createElement("p");  
var newEle=document.createElement("div");  
ele.appendChild(oldEle);  
//移除  
ele.removeChild(oldEle);  
//替换  
ele.replaceChild(newEle,oldEle);  
//插入  
ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle节点  
  
//复制节点  
var cEle = oldEle.cloneNode(true);//深度复制，复制节点下面所有的子节点  
cEle = oldEle.cloneNode(false);//只复制当前节点，不复制子节点  
  
//移动节点  
var cloneEle = oldEle.cloneNode(true);//被移动的节点  
document.removeChild(oldEle);//删除原节点  
document.insertBefore(cloneEle,newEle);//插入到目标节点之前  
</span>  

（ Q2 ）

”==”会自动转换类型
“===”不会

3。编写一个b继承a的方法

<script type="text/javascript">  
    window.onload = function(){  
        function parent(age,name){  
            this.age = age;  
            this.name = name;  
        }  
        parent.prototype.show = function(){  
            alert('父级方法');  
        }  
        function child(age,name,job){  
            parent.apply(this,arguments);  
            this.job = job;  
        }  
        (function(){  
            for(var i in parent.prototype){  
            child.prototype[i]=parent.prototype[i]  
            }  
        })();  
  
        var b = new parent(14,'侠客行');  
        var a = new child(15,'狼侠','侠客');  
        a.show();  
  
    }  
</script>

4。如何阻止事件冒泡和默认事件

1）防止冒泡

冒泡事件：一个按钮绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

阻止冒泡事件：

function myfn(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}

2） 阻止默认行为

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

function myfn(e){
window.event? window.event.returnValue = false : e.preventDefault();
}

总结：

当需要停止冒泡行为时，可以使用

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

当需要阻止默认行为时，可以使用·

//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html
//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

注意事项：

• event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；
• event对象只在事件发生的过程中才有效。
  5。简述一下src与href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

<script src ="js.js"></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

<link href="common.css" rel="stylesheet"/>

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。