前端面试题(二)

一、H5存储类型有什么区别

localStorage 没有时间限制的数据存储,数据永远不会过期,关闭浏览器也不会丢失

sessionStorage  针对session的一个数据存储,针对同一个会话页面中才能访问,并且结束后,会话才能销毁。限于窗口

cookie  单个cookie大小不能超过4KB,有有效期。任何cookie形式存储的数据,不论服务器端是否需要,每一次http请求都会吧这些数据传输到服务器端。不限于窗口

二、H5中的canvas有什么作用?

用于在网页上绘制徒刑,可以直接在H5上进行图像操作。

三、H5废弃了哪些H4标签

applet、basefont、center、dir、font、isindex、s(定义加删除线的文本)、strike(定义加删除线的文本)、u(定义下划线文本)、xmp(定义预格式文本)

四、H5提供了哪些新的API

canvas

本地存储:localStorage、sessionStorage

媒体控制:如音乐播放器中添加滚动条

离线网页程序:可以将资源文件完全存储于客户端,并且用JS的一些方法清除缓存

文档的编辑:更好的支持文档编辑

拖动:支持拖动某个文件到某个区域上传

跨文档请求:websocket,一种更加高效的通讯方式

历史管理:可以通过JS管理和插入历史记录

MIME头自定义

地理位置共享

本地数据库

索引数据库

五、H5应用程序缓存和浏览器缓存有什么区别

H5引入了应用程序缓存,意味着web应用可进行缓存,可在没有因特网时进行访问

应用程序的缓存优势:

  离线缓存:用户可在离线时使用他们

  速度:加载速度更快

  减少服务器负载:浏览器只从服务器下载更新的或者更改过的资源

实现借助于 manifest 文件

<html manifest="demo.appcache">

  

六、doctype 作用?严格模式与混合模式如何区分?它们有何意义?

作用:告知浏览器用哪种html或者XHTML规范。

在标准模式中,浏览器根据规范呈现页面,混合模式,页面以一种比较宽松的方式向后兼容的方式显示

<!-- HTML4.01文档严格定义类型,此类型定义的文档可以使用HTML中的标签与元素,不能包含不被W3C推荐的标签,不可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML4.01文档过渡定义类型,此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签,不可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML4.01文档框架定义类型,此类型等同于HTML4.01文档过渡定义类型,但可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<!-- XHTML1.0文档过渡定义类型,此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签,不可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML1.0文档严格定义类型,此类型定义的文档只可以使用HTML中定义的标签与元素,不能包含不被W3C推荐的标签,不可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- XHTML1.0文档框架定义类型,等同于XHTML1.0文档过渡定义类型,但可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


<!-- XHTML1.1文档严格定义类型,等同于XHTML1.0文档过渡定义类型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  

七、用js写个原生的ajax过程

var Ajax={
    get: function(url, fn) {
        var obj = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, obj.responseText);  //从服务器获得数据
            }
        };
        obj.send();
    },
    post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http头,发送信息至服务器时内容编码类型
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}

  

jQuery的ajax请求

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

  

八、请实现,鼠标点击页面中的任意标签,alert 该标签的名称(注意兼容性)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert标签名</title>
</head>
<body>
    <div>div</div>
    <a href="javascript:;">a</a>
    <b>b</b>
    <script>
    function elementName(evt){  
          evt = evt|| window.event;   // IE: window.event  
          // IE用srcElement获取事件源,而FF用target获取事件源  
          var selected = evt.target || evt.srcElement;  
          alert(selected.tagName);  
      }  
      window.onload = function(){  
          var el =document.getElementsByTagName('body');  
          el[0].onclick = elementName;
      }
    </script>
</body>
</html>

  

九、请写出jquery绑定事件的方法

on ,bind ,live ,delegete

.live()是通过冒泡的方式的方式绑定在元素上,支持动态数据,但由于性能的原因已经废弃

.delegate() 更精确的小范围的使用事件代理,由于.live

$('.myClass').on({
    click:function(eleDom){ 
        ...do someting
    }, 
    dbclick:function(eleDom){ 
        ...do someting    
    } 
})   

  

$("button").bind("click",function(){
  $("p").slideToggle();
});

  

原文地址:https://www.cnblogs.com/karila/p/7278749.html