整理下《前端江湖面试》对自己有益的题目。

摘要：面试题目汇总前言近期在找工作，也在读前端面试江湖这本书，书中整理了很多基础的面试题目，在书中也发现了一些错误。好记性不如烂笔头，于是整理下对自己有益的题目，都是一些较为基础的题目后期还会更新。，返回一个数组，成员为匹配的字符串。

近期在找工作，也在读 前端面试江湖 这本书，书中整理了很多基础的面试题目，在书中也发现了一些错误。
好记性不如烂笔头，于是整理下对自己有益的题目，都是一些较为基础的题目,后期还会更新。时时刻刻勉励自己，注重基础。
现在在找工作，初中级前端，如有哪位热心的仁兄公司在招前端，希望@我一下，目标广州，前端路很长，希望一起努力向前。

截取字符串 var a = "www.qdjhu.com中的qdjhu"。

考察知识点，substr()第一个参数为起始位置，第二个参数为截取的长度，注意第一个参数为负数则从末尾往前找，第二个参数为负数则返回空字符串，此方法不会修改原字符串，只是查找并返回查找的结果，与slice()方法不同的是，slice()方法第二个参数为结束位置，slice()的第一个参数如果大于第二个参数则返回空字符串。
a.substr(4,5)或者a.slice(4,9)

判断字符串是否是这样组成的，第一个必须是字母，后面的可以使字母，数字，下划线，总长度为5-20。

考察知识点，正则。[a-zA-Z]是匹配所有字母，w表示匹配任意字母，数字，下划线。{n}代表重复几次，{n,m}代表重复至少n次，至多m次。
var a = /^[a-zA-Z]{1}w{4，19}/

给定一个字符串 "IamWangZhiJun",要求查找里面的字符串Wang。

考查知识点，对String对象的操作，indexOf()方法表示查找一个字符串在另一个字符串中的位置，返回一个整数，字符串匹配开始的位置。

          var a ="IamWangZhiJun"
          var b ="Wang"
          var c =a.indexOf(b) //3
          var d = a.substr(c,b.length) 

如何实现一个删除字符串左边为空白字符的方法。

知识点1，replace(),第一个参数为匹配模式（正则），第二个参数为替换的内容。

知识点2，量词符和贪婪模式，？表示0次或者1次{0，1}，*表示0次或者多次{0，}，+表示1次或者多次{1,}。默认情况下匹配贪婪模式。

        function leftTrim(str){
        return str.replace(/^s*/,"")
        };
        var a = leftTrim("   abc")//abc

JavaScript 的typeof 都返回那些数据类型。

知识点，js的6种数据基本类型。underfined,String,Number,Object,function,boolean 。

请定义一个函数，实现字符串的反转。

知识点，主要是把字符串从末尾开始的每一个元素截取后，在重新组成一个新字符串，用到的方法charAt(), 返回指定位置的字符，注意是从0开始。

      function reverStr(str){
      var temStr = "";
      for(var i = str.length-1:i>=0:i—-){
      temStr+=str.charAt(i)}
        }
         returun temStr;
      }  

7. 字符串的操作主要有那些。
 * 查找类型
      *   indexOf()，返回匹配开始的位置。
      *   search(),返回匹配的第一个位置。
      *   match()，返回一个数组，成员为匹配的字符串。
      *   length(),返回字符串的长度
    
 * 截取，拼接,替换类
      *    slice(),从原字符串中取回字符串并返回,第一个参数为起始位置，第二个参数为结束位置。
      *    substr(),从原字符串中取回字符串并返回，第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。
      *    concat(),方法用于连接两个字符串，返回一个新字符串，不改变原字符串。
      *    replace(),第一个参数为被替换的内容，第二个参数为要替换的内容，一般只匹配一个。
      *    charAt()方法返回指定位置的字符，参数是从0开始编号的位置。
      *    trim()
 *    转换类
      * split(),第一个参数为起始位置 第二个参数为限定放回数组的成员数，注意，第一个参数如果为空，则返回数组的成员是原字符串的每一个字符。此方法会将字符串装换为数组。

8. 有一个字符串 abcd-ef-ghi,请用js把它处理成ghi&ed&abcd。
  * 知识点，字符串和数组之间的装换。

        var a ="abcd-ef-ghi";
        var b = a.split("-");
        var result = b.reverse().join("&")
        ```

请编写代码拓展JavaScript中string对象，让其有一个方法删除字符串中所有英文句号"."。

 
String.prototype.killPoint = function(){
return this.replace(/^./g,"");
 }

将字符串"wang zhi j un"中由空格分割的每个单词首字母大小写。

  function str(words) {
     words = words.split(" ");
     for(var i = 0;i


JS初级之变量,DOM，循环语句


JS如何检测变量是一个string类型？请写出函数实现。
      function isString(str){
      if(typeof(str) === "string" || str.constructor === String){
         return true;
         }else{
          return false;
          }
      }
      var str = "hello world"
这里需要注意的是也要判断这个值的数据类型。


请说明javaScript中的nodeName,nodeVaule,nodeType的区别
*   nodeName 表示节点的名称
    *   元素节点的nodeName是标签名称
    *   属性节点的nodeName是属性名称
    *   文本节点的nodeName是#text
    *   文档节点的nodeName是#document
*   nodeVaule 表示文本内容
    *   对于文本节点，nodeVaule属性包含文本
    *   对于属性节点，nodeValue属性包含属性值
*   nodeType 属性返回节点的类型,常用的如下
    *   元素类型对应的节点类型为1
    *   属性类型对应的节点类型为2
    *   文本属性对应的节点类型为3
    


下列代码执行后，结果是什么
        
        for(i=0,j=0;i<6,j<10;i++,j++){
        var k =i+j
        }
        alert(k) //18
        for(i=0,j=0;i<10,j<6;i++,j++){
        var k =i+j
        }
        alert(k) //10

知识点，在for语句中条件用逗号隔开，就相当于“并且”。
var t =(4,5,6),console.log(t) //6,这里也说明逗号表达式返回的结果是由最后一个表达式决定的。



统计从1-400之间的自然对数中含有多少个1？
 
      var count = 0;
      for(var i=0;i<=400;i++){
       for(var j=0;j<=i.toString().length;j++){
         if(i.toString()[j]=="1"){
          count++}
        }
      }
      alert(count)



js中基本数据类型有哪些？本地对象，内置对象，宿主对象有那些？


基本数据类型
string,boolean,number,null,undefined,object。


本地对象(常用)



Object,Function,String,Number,Boolean,Data,Array,RegExp。


内置对象
简单的说，内置对象是本地对象的一种，其中包含2种对象，Math,Global(isNaN,parseInt,parseFloat)


宿主对象
   所有BOM,DOM都是宿主对象
   其中BOM常用对象有

localtion
navigation
screen
history



JS中级之函数


编写一个函数，参数为一个元素，返回指定元素的第一个元素，函数越简单越好
   
    function getFirst(el){
    var nodes = el.children;
    return nodes.length!=0?nodes[0]:null;
    }


简述JavaScript中this的理解。

this代表函数执行的时候，自动生成一个内部对象，在函数内使用
this指的是调用函数的那个对象

一下讨论this的四种用法


纯粹的函数调用，说明此时this代表全局对象。
var x = 1;
     function test(){
     this.x = 0;//这里等同于x = 0;已改写
     }
     test();//window.test()
     alert(x);//0


作为对象方法的调用，说明此时this指向这个的上级对象。
       function test(){
       alert(this.x);
       }
       var o = {};
       o.x=1;
       o.m = test;
       o.m()//1

 


作为构造函数的调用，说明此时this是指向新对象，不是全局对象！！！
      var x = 2;
      function test(){
      this.x = 1;
       }
      var o = new test();
      alert(o.x)//1
      alert(x)//2
    


apply调用
 
      var x = 0;
      function test(){
      alert(this.x)}
      var o = {};
      o.x = 1;
      o.m = test;
      o.m.apply()//0,当参数为空的时候，默认调用全局
      o.m.apply(o)//1








什么是闭包？闭包的特性？对页面有什么影响？好处和坏处？请写出一个闭包的简单实例？

闭包就是能够读取其他函数内部变量的函数。

闭包特性

闭包外层是一个函数
闭包内层也是一个函数
闭包会return内部函数
闭包返回的函数内部不能有return
执行闭包后，闭包内部的变量会缓存
闭包只有被执行的时候才会调用



好处和坏处

方便上下文调用
加强封装性
坏处 浪费内存



实例
       function a(){
         var i = 0;
         function b(){
           console.log(++i)
           // i=null 解决内存泄漏 
         }
         return b;
       } 
       var c = a();//执行a函数
       c()//执行b函数，也就是执行闭包，结果为1
       c()//2
       …
       




IE和Firefox处理兼容。


绑定事件监听
 function addEvent(elem,eventName,handler){
 if(elem.attachEvent){
    elem.attachEvent("on"+eventName,handler)
    }else if{
    elem.addEventListener(eventName,handler,false)}
    }else{
    elem["on"+eventName]
    }
            
     function removeEvent(elem,eventName,handler){
     if(elem.detachEvent){
     elem.detachEvent("on"+eventName,handler)
     }else if{
     elem.removeEventListener(eventName,handler,false)
     }else{
      elem["on"+eventName]
        }      
    }


获取到event对象
function getEvent(e){
return e ? e : windowm.event;
}
function getTarget(e){
return e.target||e.srcElement
}
//阻止默认和冒泡
function prevent(e){
if(e.prevent){
e.preventDefault();
}else{
e.returnValue = false
}
                }
                function stop(e){
                if(e.stopPropagation){
                e.stopPropagation();
                }else{
e.cancelBubble()}
               }




将$(".red").attr("sth",4)装换成Js实现

知识点，得到的是数组，要遍历。
var a = document.getElementsByClassName("red"); 
for(var i =0;i



}
6. 作用域问题

var a = {n:1};
   var b =a;
   a.x=a={n:2};//a.x={n:2};a={n:2}
   console.log(a.x);//undefined
   console.log(b.x);//{n:2}
 理解，首先 `var a = {n:1}` a这里指向一个对象，`var b =a ` 则是将b也指
 向这个对象，第三行代码，实际是已经不共享对象了，a已经改写了，而b.x里面则添
 加了x = {n:2}，故有上结果。
7. Boolean对象和Boolean值
 
var x = new Boolean(false);
   if (x) {
   alert("hi");
   } 
   var y = Boolean(0);
   if (y) {
   alert("hello"); 
   }
   //alert("hi"),undefined
8.什么是跨域？跨域的几种实现方法？
 * 跨域是通过js在不同域进行数据传输或者通信，当端口号，协议，域名 不同的情况下，使用ajax是拿不到数据的。
 * 解决方法
 * 使用window.name进行跨域,
    a.html页面,比如说域名是www.abc.com/a.html;这里需要注意的是 数据只能是字符串形式。
  
 
  ```
   b.html页面，比如说www.baidu.com/b.html
 
  ```
  
  
  
  
  ```
用H5 window.postMessage,可自行百度。
9.判断当前浏览器的类型
var useAgent = window.navigator.useAgent;

if(useAgent.indexOf("Chorme")){
  alert("是Chorme浏览器")
};
if(useAgent.indexOf("Safari")){
  alert("是Safari浏览器")
};
if(useAgent.indexOf("Firefox")){
  alert("是Firefox浏览器")
};

 主要涉及的知识点 是考察window对象下的navgator对象的useAgent属性，得到是字符串，返回最字符串进行操作。
HTML5，CSS3初级，中级面试题

CSS3新特性有哪些？请做说明。不少于5条


选择器类(稍微特别一点的)
* first-child
* last-child
* nth-child
* :cheecked



文字样式


@font-face
 
       @font-face{
       font-family:BorderWeb;
       src:url(BorderWeb.eot)
       }
       .border{
       font-family:"BorderWeb"
       }
    


text-overflow & white-space & word-warp
       
        .ellipsis{text-overflow:ellipsis; 
        overflow:hidden;
        white-space:nowrap; 
        width:200px; background:#ccc;}
 

text-decoration为文本添加下划线 默认值none
边框，背景 样式
圆角 border-radius,四个参数 从上左到下右 4个方位

渐变，


线性渐变.

linear-gradient(left,#333,#999)(默认是从上到下)
第一个参数为方位，可以是对角,如left to。也可以是角度，注意这里是顺时钟，如180deg就是从下到上




径向渐变.
radial-gradient(center,circle,yellow 10%,bule 30%)

阴影，box-shadow.反射,box-reflect
背景，background-clip

布局

flex布局
多列布局column,参数column-count,column-gap,column-rule





动画,过渡
  * transition
  * transform
  * animation







HTML有哪些新特性？


新增标签