HTML,CSS,JS试题

1.call和apply方法的用途和区别？

用途：都改变this指向；

区别：call传递的是连续参数，apply传递的是数组参数

2.利用纯css构造一个三角形

<style>
.dom{
    width: 0px;    height: 0px;
    border-width: 40px;
    border-style: solid;
    border-color: red transparent transparent transparent;
        /*或者border-color: transparent transparent red;*/
}
</style>
<div class="dom"></div>

3.JavaScript中typeof可能返回的结果？如何检测？

string  number object function undefined boolean

方法：Object.prototype.toSring.call（）

调用object构造函数上的原型的toSring方法，改变它的this指向

4.

push（）：可向数组的末尾添加一个或多个元素，并返回新的长度

pop（）：用于删除并返回数组的最后一个元素。

shift（）：用于把数组的第一个元素从其中删除，并返回第一个元素的值

unshift（）：可向数组的开头添加一个或更多元素，并返回新的长度。

5.什么是默认事件，什么是冒泡事件？如何禁止？

冒泡事件：即事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。在非IE浏览器中提供了一个事件对象stopPropagation，那么在IE浏览器中可以通过cancelBubble事件对象阻止。

默认事件：浏览器的默认事件就是浏览自己的行为，比如我们在点击<a href="#">的时候，浏览器跳转到指定页面，或者是当我们滚动鼠标时页面会向下滚动，但我们按空格键和按方向键时也会向下滚动，为了更好的用户体验，这时我们就需要阻止这种行为的发生。

阻止事件冒泡：

function stopBubble(e) {
    if(e && e.stopPropagation) {        
　　　　e.stopPropagation();
    }else {
        window.event.cancelBubble = true;
            }
    }

阻止默认事件：

function stopDefault(e) {
    if(e && e.preventDefault) {
        e.preventDefault();
        }else {
          window.event.returnValue = false;
          }
    return false;
}

 

6.异步加载的三种方案

第一种：defer

<script type="text/javascript" src="demo.js" defer="defer"></script>

第二种：async

<script type="text/javascript" src="demo.js" async="async"></script>

第三种：创建script，插入到DOM中，加载完毕后callBack

function loadScript(url, callback){
   var script = document.createElement("script");
   script.type = "text/javascript";
   if (script.readyState){
       //IE
      script.onreadystatechange = function(){
          if (script.readyState == "loaded" ||script.readyState == "complete"){
               script.onreadystatechange = null;
               callback();
              }
       };
   } else {
    //Others: Firefox, Safari, Chrome, and Opera
   　　script.onload = function(){
    　　callback();
        };
     }
   script.src = url;
   document.body.appendChild(script);
  }                    

 

7.你了解JS对象吗？可以简单说说自定义构造函数创建对象的原理吗？

var this = {} return this //隐式返回this

var this = Object.create(Person.prototype)return this;//显式返回

8.有字符串“aaabbbcccdddeeefgggaa”，转换成连续不重复的字符串，eg：abcdefga

var reg = /(.)1*/g;

var str = 'aaabbbcccdddeeefgggaa';

str.replace(reg,str);

9.很多浏览器的body都有默认的margin，这个值是多少呢？

8px;

10.如今有一个Ul，里面有十亿个Li，要求点击li触发事件，弹出对应的li的内容

var ul = document.getElementsByTagName('ul')[0];
ul.onclick=function(e) {
　　var event = e || window.event;
　　var tar = event.target || event.srcElement;
　　if(tar.tagName.toLowerCase()==="li")
　　alert(tar.innerText);
}

考点：事件委托：“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务

11.描述时间线的顺序

①、创建Document对象，开始解析web界面。document.readyState='loading'。

②、遇到link外部css，创建线程加载，并继续原线程的解析。

③、遇到外部js文件，并没设有async/defer的属性，浏览器正常加载js（阻塞），等js加载完成再执行下面的内容。

④、遇到外部js文件，但是设有async/defer的属性，浏览器创建新的线程进行加载，原线程继续自己的行为。（async是当加载js完毕直接就执行，defer是页面解析完毕后再执行，异步加载不允许用document.write()）;

⑤、遇到Img，先正常解析出dom结构，异步加载src，并继续进行解析。

⑥、当文档解析完毕（document.readyState="interative"）。

⑦、解析完毕之后，所有设置defer的脚本会按照顺序执行。

⑧、document对象触发DOMContentLoaded事件，标志程序执行从同步脚本执行阶段转换为事件驱动。

⑨、当async的脚本加载并执行后，Img加载完成后，document.readyState="compete"。

⑩、以异步响应处理网络，用户操作实行交互。