自己搜集的js面试题

1.怎样添加、移除、复制、创建、移动和查找节点
添加：appendChild()
移除：removeChildNode
移动:insertBefore()
复制:cloneChildNode

替换：replaceChild()

创建:createElement(),createTextNode()
查找:getElementById,getElementByTagname,getElementByName

2.怎样调用事件，IE和DOM事件模型之间存在哪些主要差别？ 如何阻止冒泡？如何获取事件对象？

调用事件：js中调用事件,先获取事件触发的元素，再将要执行的函数赋值给事件。或为元素绑定事件

IE的事件模型是冒泡型，从子节点传递到父节点最后传递到根节点。netscape浏览器的事件模型是捕获型，从根元素搜索，一直搜索到子元素。DOM事件模型既支持冒泡型，又支持捕获型。它可以在一个元素上绑定多个事件处理器，并且在函数内部，this关键字指向被绑定的dom元素，函数的第一个参数传递event对象。

function evtObject(evt){
    if(window.event)
    {
        evt=window.event;
    }    
}


evt.stopPropagation();





3.面向对象编程:b怎么继承a
<script type="text/javascript">
function a() {
    // 属性
    this.Gender = "female";
    this.Age = 18;
    this.Words = "Silence";
    // 方法
    this.shouting = function() {
        alert("开心哦！父类的方法");
    }
}
// 继承
function b() {
    this.base = a;
}
b.prototype = new a;
// 为子类添加新的方法
b.prototype.typeCode = function() {
    alert("俺是敲代码的！IT民工，很不开心。子类的方法");
}
// 调用示例
function sayHello() {
    var nb = new b();
    alert(nb.Gender); // 调用父类的属性
    nb.shouting(); // 调用父类的方法
    nb.typeCode(); // 调用子类的方法
}        
sayHello();

 

</script>

<script type="text/javascript">

 

function a() {
         // 属性
         this.Gender = "female";
         this.Age = 18;
         this.Words = "Silence";
         // 方法
         this.shouting = function() {
                 alert("开心哦！父类的方法");
         }
 }
 // 继承
function b() {
         //this.base = a;
         this.color = "red";
 }
 b.prototype = new a();
 //b.prototype.constructor = b;
 // 为子类添加新的方法
 b.prototype.typeCode = function() {
         alert("俺是敲代码的！IT民工，很不开心。子类的方法");
 }
 var nb = new b();

</script>

<script type="text/javascript">
function ClassA() {
    this.color = "red";
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB() {
    this.name = "";
    this.sayName = function () {
        alert(this.name);
    };
}

ClassB.prototype = new ClassA();

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

</script>

 

构造器属性（constractor）

4.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?属性和方法？初始化XHR对象？
    异步化js和xml两种语言，ajax模型是指用户通过ajax引擎与服务器通信，服务器将返回结果提交给ajax引擎，再由ajax引擎把返回的数据插入到页面上。
    同步和异步的区别体现在，在异步的状态下，JavaScript 无需等待服务器的响应，可以执行其他脚本。在同步的状态下，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
    jquery的getScript方法

    var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

    常用方法：open(),send(),abort();
    特殊事件：onreadystatechange,
    属性：获取请求状态属性：readyState,返回服务器的http状态码：status,返回字符串形式的响应:responseText,返回XML形式的响应:responseXML




5.什么是闭包?闭包的作用？下面这个ul，如何点击每一列的时候alert其index?
当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。

function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

把全局函数复制给全局变量，这个新的全局变量（函数），就可以访问原函数的私有空间。

function show_me(){
        var ul = document.getElementById('test');
        var li = ul.getElementsByTagName('li');
        for(var i = 0;i < li.length;i++) {
            li[i].onclick = function(num) {
                return function(){
                    alert(num);
                }
            }(i);
        }
     }
 
window.onload = show_me;



    setTimeout/setInterval
    回调函数（callback）
    事件句柄（event handle）




6.javascript里typeof返回的结果有哪几种？
    string,number,undefined,boolean,object,function

7、如何获取下拉框选中项的内容？
var obj = document.getElementById(”select_id”); //selectid

var index = obj.selectedIndex; // 选中索引

var text = obj.options[index].text; // 选中文本

var value = obj.options[index].value; // 选中值


8.正则表达式验证邮箱？
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

9.CSS的盒子模型？

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

10，IE与FF脚本兼容性问题

一、window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

二、document.getElementByName()
IE中document.getElementByName()不能获取div元素，FF中可以。

三、IE：支持outerHTML，FF不支持。

四、ajax对象的初始化。

11，JavaScript中如何检测一个变量是一个String类型?请写出函数实现
Var str = “hello world”;

Var str2 = new String(“hello world”);

function IsString(str){

return (typeof str == “string” || str.constructor == String);

}

var str = “”;



alert(IsString(str));

alert(IsString(str2));

12.什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

13.JSON 的了解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{'age':'12', 'name':'back'}

14.遍历DOM的属性

一、parentNode属性
    返回当前节点的父节点。
二、firstChild属性
    返回当前节点的第一个子节点。
三、lastChild属性
    返回当前节点的最后一个子节点。
四、previousSibling属性
    返回当前节点的前一个兄弟节点。
五、nextSibling属性
    返回当前节点的后一个兄弟节点。

15.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
    作用：告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    意义：使内容和表现相分离


16，js中如何定义class,如何扩展prototype?

Ele.className = “***”; //***在css中定义，形式如下：.*** {…}

A.prototype.B = C;

A是某个构造函数的名字

B是这个构造函数的属性

C是想要定义的属性的值

17.jquery与其他库冲突
noConflict();

18. Function 类直接创建函数的语法
    var function_name = new function(arg1, arg2, ..., argN, function_body)


19.递归函数
function fact(num){
if (num<=1){
return 1;
}else{
return num*fact(num-1);
}
}

alert("10!是："+fact(10));

20.什么是cookie？cookie的写入，读取，删除？
    cookie是WEB服务器保存在客户端上的小块文本文件，用来保存用户信息。

    //创建cookie
    function setCookie(name,value,iDay){
        var oDate = new Date();
        oDate.setDate(oDate.getDate()+iDay);
        document.cookie = name+"="+value+";expires="+oDate;
    }
 
    //获得cookie
    function getCookie(name){
        var arr = document.cookie.split("; ");//以“; ”为分割点把字符串分割成字符串数组
        var i;
         for(i = 0; i<arr.length; i++){
            var arr2 = arr[i].split("=");//把arr->[user=wangchi,pass=1234,..]中的具体项再分割
            if(arr2[0] == name){
                return arr2[1];
            }
            //alert(arr2[1]);
         }
         return "";
    }
 
    //删除cookie
    function removeCookie(name){
        setCookie(name,"1",-1);
    }
 
 
    //测试数据
    setCookie("user","wangchi",20);//为user创建cookie，值为wangchi，过期时间为一天后
    alert(document.cookie);
    alert(getCookie("user"));//弹出框里的值为wangchi
    removeCookie("user");
    alert(getCookie("user"));//cookie已被删除，无值

 

语法：$.cookie(名称,值,[option])

　　　(1)读取cookie值

　　　$.cookie(cookieName)　　　　　　　　　cookieName:要读取的cookie名称。

　　   示例：$.cookie("username");　　　　　  读取保存在cookie中名为的username的值。

　　　(2)写入设置Cookie值：

　　　$.cookie(cookieName,cookieValue);　　cookieName:要设置的cookie名称，cookieValue表示相对应的值。

　　　示例:$.cookie("username","admin");　  将值"admin"写入cookie名为username的cookie中。

　　　　　 $.cookie("username",NULL);　　　销毁名称为username的cookie

　　　(3) [option]参数说明：

　　　　　expires:　　有限日期，可以是一个整数或一个日期(单位：天)。　　这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了

　　　　　path:　　　 cookie值保存的路径，默认与创建页路径一致。

　　　　   domin:　　  cookie域名属性，默认与创建页域名一样。　　这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置　　".xxx.com"

　　　　   secrue:　　 一个布尔值，表示传输cookie值时，是否需要一个安全协议。

$.cookie("username", $("#username").val(), {
                    path: "/", expires: 7
                }

 

 

 

21.获取浏览器对象

    $.browser


22.遍历数组和对象
    $.each方法
    $.each(obj,function(key,value){……})
    作用：把json格式的数据和对象解析成键值对形式的数据。


23.数据筛选，$.grep()


24.数据变更，$.map()


25.数据搜索，$.inArray()


26.检测一个DOM节点中是否包含另一个DOM节点，$.contains()
    
27.对数组，对象，DOM元素进行序列化排列，$.param(obj,traditional)

 

28.限制函数作用域，$.proxy()

 

29.缓存数据，data()方法，移除缓存数据，removeData(name)方法。

 

30.sessionStorage和localStorage的方法

       localStorage.setItem(key,value);

       localStorage.getItem(key);

localStorage.clear();

       sessionStorage.setItem(key,value); 

      sessionStorage.getItem(key);

 

 

31.HTML5的离线储存怎么使用，工作原理能不能解释一下？
    离线存储通过每个页面的manifest文件来管理，把需要缓存的文件写入到manifest文件中，然后在服务器软件上设置一下，就可以实现离线缓存了。

31.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
   在指定资源文件的时候，把资源文件分为3类：cache,network和fallback。cache是需要缓存的文件，network是不需要缓存的文件，fallback是区分对待的文件。离线时加载一种文件，在线时加载另一种文件。

 

 

32.html5的文件API?

        File对象，FileList对象。

        filereader对象的的方法：abort，readAsBinaryString，readAsDataURL，readAsText

        filereader对象的的事件：onabort：中断时触发，onerror：出错时触发，onload：文件读取成功完成时触发，onloadend：读取完成触发，无论成功或失败，onloadstart：读取开始时触发，onprogress：读取中。

 

33.html5跨域传输消息

        接收消息使用message事件：window.addEventListener('message', function(){……},false);

        发送消息使用postMessage方法：otherWindow.postMessage(message, targetOrigin);

 

34.websocket对象

        事件：onopen,onclose,onmessage,方法：close,属性：readyState.

 

35.服务器事件server-sent event。EventSource对象

        事件：onmessage，还会用到event对象的sourse属性。

 

21，编写一个方法 去掉一个数组的重复元素
Array.prototype.unique1 = function(){
 var res = [this[0]];
 for(var i = 1; i < this.length; i++){
  var repeat = false;
  for(var j = 0; j < res.length; j++){
   if(this[i] == res[j]){
    repeat = true;
    break;
   }
  }
  if(!repeat){
   res.push(this[i]);
  }
 }
 return res;
}
var arr = [9,1,'3',8,7,7,6,6,5,7,8,8,7,4,3,1]
alert(arr.unique1());

22.定义函数有几种方法，有何不同？
普通方法，

function add(x,y){
      return x+y;
    }

构造函数

var add=new Function("x","y","return x+y");

，函数直接量

var f2=function(x,y){return x*x+y*y；}

构造函数可以定义类，函数直接量可以存储一个变量中或传递给其他的函数甚至被“直接调用”。

23.js作用域
    JavaScript的作用域变量与函数的可访问范围，全局作用域和局部作用域两种。按函数划分。
    1.  全局作用域（Global Scope）
    在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：window对象和全局变量
    局部作用域（Local Scope）
    和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部

    作用域链：

    当函数嵌套时，内层的函数可以访问父级和祖先级作用于当中的变量，这种现象叫做作用域链。

24.不使用中间变量，交换 a, b两个变量的值。
var a = 33,b=44
a=[a,b]
b=a[0]
a=a[1]

    


----------------------------------20150526----------------------------------

21.js中的内置函数有哪些？

    eval函数（待补充），parseInt():将字符串转化为整形，parseFloat()：将数据转化为浮点型，encodeURI(),将字符串转化为有效的URL，decodeURI(),对encodeURI()编码的字符进行解码。

22.object对象的通用方法
    toLocalString():返回当前日期，toString():返回对象的字符串表示。valueOf():返回指定对象的原始值。

23.string对象的常用方法
   charAt():返回指定位置的字符。concat():连接字符。indexOf():定位指定字符串首次出现的位置，序号从0开始，未出现则返回-1。lastIndexOf():从后向前搜索字符串。match():匹配字符串或正则表达式。replace():替换字符串。search():检索与正则表达式匹配的值。并返回正则表达式所在的位置。split():把字符串分割为字符串数组。substr():从起始索引号开始提取指定数目的字符。substring():提取两个索引号之间的字符，slice():提取字符串片段并返回。valueOf():返回某个字符串对象的原始值。

    array的常用方法
    pop()：删除并返回数组的最后一个元素，push()：向数组的末尾添加一个或更多元素，并返回新的长度。shift()：删除并返回数组的第一个元素，unshift()：向数组的开头添加一个或更多元素，并返回新的长度。reverse()：颠倒数组中元素的顺序。join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。slice()：从某个已有的数组返回选定的元素。sort()：对数组的元素进行排序。


24.jquery对象和DOM对象相互转化
    JQ对象转DOM对象：jquery的get()方法，获得由选择器指定的dom元素。
    DOM对象转JQ对象：用$()吧dom对象包起来即可。

25.对less css框架的了解？对Bootstrap框架的了解？
    LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数.

---------------------------------------------------------------------------------------------------------
21.clearfix:after

.clearfix:after{display:block; clear:both; content:""; visibility:hidden; height:0; font-size:0;}

22.前端优化问题
    1. 减少HTTP请求次数
    6. 把CSS放到顶部，把JS放到底部，防止js加载对之后资源造成阻塞。
    11. 精简CSS和JS
    17. 减少DOM元素数量
    23. 缩小favicon.ico并缓存

24.hack问题（主要是IE）

25.自己写一个TAB切换

 

函数：

函数作用域

作用域链：当函数嵌套的时候，子函数可以访问的变量既来自于内部，也来自于父级函数和祖先及函数，这种现象称为作用域链。

 

26.前端跨域的方法：

  1.设置document.domain

  2.postMessage方法。

  3.jsonp

  4.通过CORS跨域

 

27.网页优化

1.加载优化：
    合并CSS文件，JS文件
    外链式引用CSS文件，JS文件。
    压缩html,css,js文件
    减少cookie
    避免域名重定向。

    css文件写在头部，js文件写在尾部
2.图片优化：
    使用智图
    用css3绘制小图标或使用iconfont

     使用雪碧图
3.脚本优化：
    缓存列表.length
    缓存dom操作
    尽量使用ID选择器
    避免批量绑定事件
4.css优化
    避免在html文件中写style
    不要写空的css规则，图片路径也不要为空
    不声明过多的font-size
    值为0时不要写单位
    选择符尽量简单一点

28.this对象

    this总是指向函数的直接调用者。
    在new对象中，this指向new出来的对象。
    在事件中，this指向当前事件的触发者。

29.IE6的bug

    (1)双边距bug，_margin

    (2)3像素bug,浮动元素与不浮动元素相邻时，中间有3像素间距。可以把两个元素都设置成浮动元素，或者让右边的元素"_margin-left:-3px;"

    (3)子元素撑开父元素，为父元素设置overflow:hidden;

 

30.html5拖动

 

<script type="text/javascript">
        var p3 = document.querySelector("#p3");
        p3.ondragstart=function(e){
                console.log('事件源p3开始拖动');
                //记录刚一拖动时，鼠标在飞机上的偏移量
                offsetX= e.offsetX;
                offsetY= e.offsetY;
        }
        p3.ondrag=function(e){
                console.log('事件源p3拖动中');
                var x= e.pageX;
                var y= e.pageY;
                console.log(x+'-'+y);
                //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
                if(x==0 && y==0){
                        return true; //不处理拖动最后一刻X和Y都为0的情形
                }
                x-=offsetX;
                y-=offsetY;

                p3.style.left=x+'px';
                p3.style.top=y+'px';
        }
        p3.ondragend=function(){
                console.log('源对象p3拖动结束');
        }

</script>

<script type="text/javascript">
          var div1=document.querySelector('#div1');
          var maxW=document.body.clientWidth-div1.offsetWidth;
          var maxH=document.body.clientHeight-div1.offsetHeight;
 
    div1.addEventListener('touchstart',function(e){
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        oL = touch.clientX - div1.offsetLeft;
        oT = touch.clientY - div1.offsetTop;
        document.addEventListener("touchmove",defaultEvent,false);
    })
 
 
    div1.addEventListener('touchmove',function(e){
        var ev = e || window.event;
       var touch = ev.targetTouches[0];
       var oLeft = touch.clientX - oL;
       var oTop = touch.clientY - oT;
       if(oLeft<0){
           oLeft=0;
       }else if (oLeft>=maxW) {
           oLeft=maxW;
       }
       if(oTop<0){
           oTop=0;
       }else if (oTop>=maxH) {
           oTop=maxH;
       }
 
       div1.style.left = oLeft + 'px';
       div1.style.top = oTop + 'px';
 
    })
    div1.addEventListener('touchend',function(){ 
       document.removeEventListener("touchmove",defaultEvent);
    })
    function defaultEvent(e) {
 
 
       e.preventDefault();
     }
</script>