javascript知识点记录（1）

javascript一些知识点记录

1.substring，slice，substr的用法

substring 和slice 都有startIndex 和 endIndex（不包括endInex），区别就在于slice取负数;

例如：var str='x123';

slice(-1,-2) -1指的就是3 负-2指的就是2； substring的中的负数，当做零来处理

substring中可以颠倒startIndex 和 endIndex的顺序，它会自动将最小的识别为开始的索引，最大的为结束索引；

substr(startIndex,length);开始位置，然后指定要截取的长度

2.instanceof 的用法

我们用一段伪代码来解释它的作用原理：

 //接下来我们用伪代码来解释instance of 的使用滴啊
 function instance_of(l,r){
    //l表示 表达式的左边
    //r表示 表示的右边
    var prototype=r.prototype;
    var l=l.__proto__;
    while(true){
      if(l===null){
         return false;
      }
      if(prototype===l){
        return true;
      }else{
        //继续循环
        l=l.__proto__;//往上一层循环滴呀
      }
    }
 }
 function prove(){
    //有了上面的代码我们就可以证明
    alert(Array instanceof Object);
    alert(Date instanceof Object);
    alert(Function instanceof Object);
    alert(Number instanceof Object);
    alert(Boolean instanceof Object);
    alert(String instanceof Object);
    //以上都是true

    alert(Number instanceof Number); //false
    var num=new Number(1);
    alert(num instanceof Number); //true

    //同样的
    alert(String instanceof String);//false

 }

 3.javascript:void(expression)的使用

点击后不做任何事情

<a href="javascript:void(0)">click</a>
<a href="javascript:;">click</a>
<a href="####">click</a>

ps：补充一点小知识;

void 是javascript的操作符，意思是：只执行表达式，但没有返回值；

<a href="#">click</> 默认的锚点跳转是我们的top 页面首页；

点击后响应用户自定义的事件;

<a href="javascript:void(0)" onclick="doSomething()">click</a>
<a href="#" onclick="doSomething;return false;">click</a>

再来一个小实例：

  function newPage(param,obj){
    obj.target="_blank";
    obj.href="web/info/data?"+param;
    obj.click();
  }

html代码

<a href="javascript:void(0)" onclick="newPage(3,this)">go</a>

4.默认事件和阻止默认事件

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

 两种模型 
 以前，Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

 W3C模型
 W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。

然后，再从事件源往上进行 事件冒泡，直到到达document。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

(IE只支持事件冒泡)

 事件传播的阻止

 在w3c中，使用的是stopPropagation

ie中，设置cancleBubble=true

 阻止默认事件

在w3c中，使用preventDefault()方法

在ie下，使用window.event.returnValue=false;

 5.获取行间样式；

   //样式的获取
  function getStyle(obj,name){
      if(obj.currentStyle!=undefined){
        return obj.currentStyle[name];
      }else{
        return getComputedStyle(obj,false)[name];
      }
  }

 6.Javascript中callee和caller的作用

calle的定义：返回一个对函数的引用，该函数调用了当前函数。r

如果是自己的函数体内调用该方法：则返回null；

实例:

  function a(){
     alert(a.caller); //返回的是空
  }
  a();
  function b(){
   a(); //alert 弹出的是b（函数对象引用）,也就是是 function b(){alert(a())}
  }
 b();

callee的定义：返回正在执行的函数本身的引用，它是arguments的一个属性；

注意：

1 这个属性只有在函数执行时才有效；

2它有个length属性，可以用来获得形惨的个数；因此可以用来比较形参和实参个数是否一致；

arguments.call.length 和arguments.length;

3.可以用来进行匿名函数递归

实例：

 var a=function (){

    alert(arguments.callee);//返回额函数体函数的引用 也就是 function (){alert(arguments.callee)} 

 }
 var b=function (){
    a();   //返回额函数体函数的引用 也就是 function (){alert(arguments.callee)} ,不是调用它的函数体
 }

 b();

那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少

对兔子？（使用callee完成）

var result=[];
function fn(n){
   if(n==1){
      return 1;
   }else if(n==2){
      return 2;
   }else{
      if (result[n]){
          return result[n];
        }else{
            //arguments.callee() 表示函数体本身，也就是fn
            result[n]=arguments.callee(n-1)+arguments.call(n-2);
            return result[n];
        }
   }
}

 

7.关于获取的一个简单封装

   var obj={
       $id:function(id){
           return document.getElementById(id);
       },
       getByClass:function(className,parent){
           var oParent=parent?this.$id(parent):document;
           if(oParent.getElementsByClassName){
             return oParent.getElementsByClassName(className);
           }else{
             var result=[];
             //获取父元素下的所有元素
              var childs=oParent.getElementsByTagName('*');
              for(var i=0,len=childs.length;i<len;i++){
                 if(childs[i].className==className){
                    result.push(childs[i]);
                 }
              }
              return result;
           }
       },
       getFirstByClass:function (className,parent){
         var eles=this.getByClass(className,parent);
         return eles[0];
       }
   }

 8.bind的用法

在EcmaScript5中也扩展了叫bind的方法（IE6,7,8不支持）

具体看实例：

  function func(name,id){
    console.log(name,id,this);
  }
  func('jack','son');
  //使用bind 返回改变上文的this后的函数；
  var a=func.bind('jack','son',"-->");
  a();//这样才执行滴呀

  //call是改变上下文并执行函数
  var b=func.call('jack','son',"-->");

参数方面的特点：

  function f(a,b,c){
    console.log(a,b,c);
  }
  var f_extend=f.bind(null,'extend_A');
  f('a','b','c'); //结果a b c
  f_extend('a','b','c'); //结果 extend_A a b
  f_extend('b','c');     //结果 extend_A b c
  //结论：实参则是在bind中传入参数的基础上往后

9.关于Array.prototype.slice用途

将像arguments那种的类数组对象转换为数组的形式

实例:(至于原理，我以后再研究)

  function test1(){
     var a={length:2,0:'first',1:'seconde'};
     var b=Array.prototype.slice.call(a);
     console.log(b);  // ["first", "seconde"]
     //Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，
     //除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，
     //js对象与com对象不能进行转换）

     //对于字符串
     var c="today";
     var d=Array.prototype.slice.call(c);
     console.log(d); //["t", "o", "d", "a", "y"]

     //对于数字
     var num=12345;
     var numVal=Array.prototype.slice.call(num);
     console.log(numVal);//[] 空的

     var jq={length:2};
     var jqVal=Array.prototype.slice.call(jq);
     console.log(jqVal); //[] 空的
     console.log(jq.length); //

     //也可以将选中的DOM元素转换成数组

  }
  test1();
  //在IE下就会有误

 10.递归的使用

//递归:方式一
  function gui(num){
        if(num<=1){
         return 1;
        }else{
         return num*gui(num-1)
        }
  }
 alert(gui(5));
 //递归方式二： 使用命名函数表达式实现递归
 var factorial=(function f(num){
     if(num<=1){
        return 1;
     }else {
         return num * f(num-1);
     }
 });
 alert(factorial(5));

 11.querySelector和querySelectorAll 的用法

定义： querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。

querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空

实例：

   window.onload=function (){

     var obj=document.querySelector("#outer");
     var obj0=document.querySelectorAll("#outer")[0];

      //tmd 的 这个是支持我们css的选择器滴呀
      var obj=document.querySelector("div.test>p:first-child");
      var obj0=document.querySelectorAll("div.test >p:first-child")[0];
      var objlist=document.querySelectorAll('div.test>p'); //这个将以数组的形式显示滴呀
      //这是原生方法，比起jquery速度快，缺点是IE6、7不支持。

      var list=document.querySelectorAll(".info");
      var len=list.length;
      for(var i=0;i<len;i++){
        list[i].style.fontWeight='bold';
      }
   }

bug-以及解决方案

html

<div class="test" id="testId">
     <p><span>Test</span></p>
</div>

js：

   function show(){
      var obj=document.getElementById("testId");
      var ele=obj.querySelector('.test span');
      var eleList=obj.querySelectorAll('.test span');

      console.log(ele); //<span>Test</span>>
      console.log(eleList);//[span]

   }

按照W3C的来理解，这个例子应该返回：element：null；elementList：[];

因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点；

但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；

这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！(也就是说，没有限制到收索范围)

用jquery把，

12.javascript中的私有变量（块级作用域）

实例一

(function (window){
       var name='jack';
       var F=function (){};
       F.prototype.getName=function (){
        return name;
       };
       F.prototype.setName=function (str){
          name=str;
       };
       window.F=F;  //相当于初始化
                    //独立的块级作用区域
                    //避免申明大量的公共变量；
   })(window);
    var a=new F();
    a.getName();
    a.setName('tom');
    a.getName();

实例二

(function ($){
       $("#id");
   })(jQuery);

13.$.extend 和$.fn.extend的区别

//extend的基本使用
     var target={name:'jack',fn:function (){alert('')}};
     var obj={age:18,show:function (){alert('show')}};
     var newTarget=$.extend(target,obj);
     //新的对象就有了旧的对象的方法;
     //给我们的targe添加扩展
     newTarget.show();
     alert(newTarget.age);

     //如果没有设定target对象，则，扩展的是我们jQuery对象的方法；
     $.extend({
         test:function (){
             alert('test');
         }
      })
     //使用
     $.test();
     /*
       $.fn=$.prototype
       //这个就是原型滴呀
     */
     $.fn.extend({
         check:function (){
            alert('check');
         }
      })
     //这样调用无效
      $.check();
     //应该制定到某个对象上
     $("#info").check();
     

 14 eq 和get 

   eq返回的是一个jquery对象，get返回的是一个html 对象数组

15.js数组排序的问题

 看代码

function Person(name,age){
    this.name=name;
    this.age=age;
}

function show(){
  //sort方法是按ascii字母顺序排序的
  var arr1=['b','a','c'];
  var result=arr1.sort();
  console.log(arr1);   // a b c
  console.log(result); // a b c

  var arr2=[0,21,4];
  var result=arr2.sort();
  console.log(arr2);    //0 21 4
  console.log(result);  //0 21 4

  //正确的写法;
  var arr3=[0,21,4];
  arr3.sort(function (a,b){
    return a-b;
  })
  console.log(arr3); //0 21 4

  var arr4=[0,21,4];
  arr4.sort(function (a,b){
    return b-a;
  })
  console.log(arr4); //21 4 0

  //自定义对象的排序的呀
  var arr5=[];
  arr5.push(new Person('jack',19));
  arr5.push(new Person('Tom',18));
  arr5.push(new Person('frank',20));

  arr5.sort(function (a,b){
    return a.age-b.age;
  })

  console.log(arr5);
}

顺便补充一下随机数的生成。

//放置重复的覆盖独享的值滴啊
  function show(){
      //这个是生成一个0-1之间的浮点数
     var num=Math.random();
     console.log(num);
     //1-10
     var val1=Math.floor(Math.random()*10+1);
     console.log(val1);
     //0-9
     var val2=Math.floor(Math.random()*10);
     console.log(val2);
  }
  //返回一个指定范围的随机数滴呀
  var rand={};
  rand.get=function (start,end){
     return Math.floor(Math.random()*(end-start)+begin);
  }
  

 16.字符串和json之间的互相转换

   //方式一：eval
   function strToJson(str){
       var data=eval('('+str+')')
       return data;
   }
   //第二种是使用一种new function的方式滴呀
   function strToJson1(str){
     var json=(new Function("return"+str))();
     return json;
   }
   //方式三：使用全局的对象；
   function strToJson2(str){
     return JSON.parse(str);
     //使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来
     //jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json ),
     //接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript （JSON）
   }

   //同样我们也有jsonto字符串额转换方式滴呀；
   function jsonToStr(json){
     //在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()
     var result=JSON.stringify(json);
     return result;
   }

 17. 利用createDocumentFragment，进行优化

    function slowAdd(){
      for(var i=0;i<10000;i++){
          var span=document.createElement('span');
          var text=document.createTextNode('nodeValue');
          span.appendChild(text);
          document.body.appendChild(span);
      }
    }

    function fastAdd(){
      var oFragMent=document.createDocumentFragment();
      for(var i=0;i<10000;i++){
          var span=document.createElement('span');
          var text=document.createTextNode('data');
          span.appendChild(text);
          oFragMent.appenChild(span);
      }
      document.body.appendChild(oFragMent);
    }