js基础

Array

1.专有的push和pop方法

2.数组添加原型属性

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers);    //最大值
var minInNumbers = Math.min.apply(Math, numbers);   //最小值

numbers .length = 0 //清空数组，删除数组元素请不要用 delete，而是用 splice
numbers .length = 4; //截取数组 numbers will be equal to [5, 458 , 120 , -215]
Array.prototype.push.apply(array1, array2);//在一个数组后附加一个数组
var argArray = Array.prototype.slice.call(arguments);//把伪数组转为数组
var arr = [1,2,3,4,5];
arr.push(6);
arr[arr.length] = 6; //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 43% 的速度

splice() 方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除后的项目

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

ar arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

arr.splice(2,0,"William")//George,John,William,Thomas,James,Adrew,Martin

arr.splice(2,1,"William") //George,John,William,James,Adrew,Martin

arr.splice(2,3,"William") //George,John,William,Martin

slice() 方法

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")  //Thomas,James

document.write(arr) //George,John,Thomas,James,Adrew,Martin
</script>

splice() 方法 用于插入、删除或替换数组的元素。
slice() 方法 可提取字符串或数组的某个部分，并以新的字符串返回被提取的部分。

NodeList

通过这种方法获取的这一组dom元素，不是数组（Array），而是NodeList，NodeList不是数组

var arr = [];              //NodeList转换成数组

var list = document.getElementsByTagName("li"); 
for (var i = 0; i < list.length; i++) {  
    var li = list[i]; 
    arr.push(li); //arr就是我们要的数组  
}

闭包

闭包是一个函数，它在函数内部创建，并且携带了自身创建时的所处环境信息（比如变量信息和其它函数信息）。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

作用：一个是前面提到的可以读取函数内部的变量；另一个就是让这些变量的值始终保持在内存中。

 

 

function init() {
    var name = "Jone"; // name 是在 init 函数里面创建的变量 // displayName() 是一个内部函数，即一个闭包。注意，它不是匿名的。

function displayName() {
        console.log(name);
    }
    //当 displayName 函数返回后，这个函数还能访问 init 函数里面定义的变量。return displayName;
}
var closure = init(); //Jone
closure(); //undefined

原型链

function MyObject(name, message) {
    this.name = name.toString();
    this.message = message.toString();
}
MyObject.prototype.getName = function() {
    return this.name;
};
MyObject.prototype.getMessage = function() {
    return this.message;
};

var myobj = new MyObject();

链式作用域（chain scope）

子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

 

值类型和引用类型

在 JS 中，有值类型和引用类型两种区别：
1、值类型：数值、布尔值、null、undefined。 
2、引用类型：对象、数组、函数。 

属性

attributes：//获取一个属性作为对象 attributes["value"]; 结果为obj类型 value='abc'

getAttribute：//获取某一个属性的值getAttribute("value"); 结果为 string类型  'abc'
setAttribute：//建立一个属性，并同时给属性捆绑一个值,setAttribute("good","hello"):多了一个名为good的属性hello

createAttribute：//仅建立一个属性
removeAttribute：//删除一个属性removeAttribute("disabled")

 getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node（节点) 

getAttributeNode：获取一个节点作为对象 

1.var d = document.getElementById("sss").getAttributeNode("value");   
2.document.write(d.name);  
3.document.write(d.value);  //显示 value aaa 

setAttributeNode：建立一个节点

1.var d = document.createAttribute("good");  
2.document.getElementById("sss").setAttributeNode(d);  

removeAttributeNode：删除一个节点removeAttribute("value"); 

1.var d = document.getElementById("sss").getAttributeNode("value")  
2.document.getElementById("sss").removeAttributeNode(d);

 给DOM添加属性：oDiv.index=1; //给oDiv添加了一个index属性 

正则

字符	效果
.	匹配换行符以外的任意字符
d	匹配所有数字
D	匹配非数字
s	匹配一个空格符
S	匹配非空格
w	匹配字母数字下划线=>其实就是匹配单词word(简单易懂)
W	匹配!字母数字下划线=>就是不匹配单词

d => [0-9]
w => [0-9a-zA-Z_]
S => [^	
x0Bf
]  //(f标识分页符)

/D+/.test("  ")// true

锚字符
^	匹配字符串的开头，在多行检索中，匹配一行的开头
$	匹配字符串的结尾，在多行检索中，匹配一行的结尾
	匹配一个单词的边界
B	匹配非单词边界

var reg = /^d+$/;  //匹配整个字符串为数字

量词字符说
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n, m}	重复n到m次

贪婪量词：*,+,?     全文匹配，如果不成功，则，将末尾的最后一个字符减去，再匹配，如果还不成功，则，再减一次，至到为0。

惰性量词：  ?    惰性量词一开始只会匹配一个字符，如果不成功，则在进行匹配。
var str = "blablablabla";
console.log(str.match(/(b.*a)/g)); //["blablablabla"]贪婪
console.log(str.match(/(b.*?a)/g)); //["bla", "bla", "bla", "bla"] 惰性匹配
 ""转义字符
不想匹配a,b,c中的任意一个，只需要在"[]"里面加上"^"即可。

 /[^abc]/.test("c") // false

/i  (忽略大小写,ignore)
/g  (全文查找出现的所有匹配字符,global)
/m  (多行查找,multiLine)
/ig (全文查找、忽略大小写,ignore+global)

反向引用：就是给匹配到的小括号加上数字，来表明他是第几个匹配到的。

?: 是 不想被捕获的时候使用 可以提高程序执行速度

var reg = /(100) (99)/;
var str = "100 99";
console.log(str.replace(reg,"$2 $1")); //99 100

正则	名称	作用
(?=exp)	正向前瞻	匹配exp前面的位置
(?!exp)	反向前瞻	匹配后面不是exp的位置
(?<=exp)	正向后瞻	匹配exp后面的位置
(?< !exp)	反向后瞻	匹配后面不是exp的位置

phone: /^1(3d|5[0-35-9]|8[025-9]|47)d{8}$/

 email: /^[w-]+(.[w-]+)*@([w-]+.)+[a-zA-Z]+$/

 company: /^[u4E00-u9FA5a-zA-Z][u4E00-u9FA5a-zA-Z0-9s-,-.]*$/

uname: /^[u4E00-u9FA5a-zA-Z][u4E00-u9FA5a-zA-Z0-9_]*$/

 zh: /^[u4e00-u9fa5]+$/ //纯中文

card: /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)d{4}(((((19|20)((d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(d{2}(0[13578]|1[02])31)|(d{2}02(0[1-9]|1d|2[0-8]))|(([13579][26]|[2468][048]|0[48])0229)))|20000229)d{3}(d|X|x))|(((d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(d{2}(0[13578]|1[02])31)|(d{2}02(0[1-9]|1d|2[0-8]))|(([13579][26]|[2468][048]|0[48])0229))d{3}))$/ //身份证号    

 int: /^[0-9]*$/

function

1.caller 属性：caller 属性是函数对象本身的一个成员属性。

• caller 属性是帮助我们在当前函数里获取调用当前函数的某个未知函数，之所以称 未知函数 ，是因为我们在写一个函数时，很可能根本不知道哪个函数会调用到我们的这个函数。

• 全局环境中调用函数是不会生成此 caller 属性

   

  function callerDemo() { 
    if (callerDemo.caller){ 
             var a = callerDemo.caller.toString(); 
              console.log(a);  
            } else { console.log("this is a top function"); } } 
  function handleCaller() { callerDemo();} 
  handleCaller(); //"function handleCaller() { callerDemo(); }" 
  callerDemo(); //"this is a top function"

  2.callee ：属性 对当前函数对象的一个引用

  function calleeDemo() { console.log(arguments.callee); }

  • callee 属性隶属于Function的一个隐藏对象—— arguments 中，这个 arguments 对象大家应该不陌生，表示的就是当前函数传入的参数，一般用于函数不限制参数数量的传参。

  • 与 caller 属性一样，也是要在当前函数的内部（上下文环境）才有效。

  • 可配合 caller 属性一起使用： arguments.callee.caller ，这样就可以完全忽略到具体的函数名了。

  • 函数递归时用起来比用函数名调用函数更带感！

     

    3.apply / call 方法：这俩方法性质一样，只是用法稍有不同

    function type(obj) {
      return Object.prototype.toString.call(obj).slice(8, -1);    //换成用apply方法亦可
    }

    • apply / call 方法的意义在于 借用 其它对象的成员方法来对目标对象执行操作。
      语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
      语法：apply([thisObj[,argArray]]) 
      在 借用 的过程中， apply / call 方法会改变被借用的成员方法的上下文环境：把 this 这一与上下文环境高度相关的变量指向目标对象，而非原来的对象。看下面的这段代码：

    function Point(x, y){
        this.x = x;
        this.y = y;
    }
    Point.prototype.move = function(x, y) {
        this.x += x;
        this.y += y;
    }
    var p = new Point(0,0);
    var circle = {x:1, y:1, r:1};    //只是一个普通的Object对象
    p.move.call(circle, 2, 1);    // 这个例子中的意思就是用 p.move来替换 circle，p.move.call(circle, 2, 1)== p.move(2,1)  ，p.move.apply(circle, [2, 1]); 等价于p.move.call(circle, 2, 1);  运得后的circle = {x:3, y:2, r:1};

    这里的circle只是一个普通的Object对象，不含任何自定义的成员方法，但通过 apply / call 方法，可以借用Point类对象定义的move方法来帮助circle达到目的（本例其实是圆心在坐标轴上的移动）。在 借用 Point类对象的move方法时，move方法中的this就不再指向p，而是指向circle了，达到了上下文环境改变的效果。

    另外，从代码里也可以看出， call 方法与 apply 方法的区别仅在于： call 方法直接把需要传入的参数列在目标对象其后，而 apply 方法则以数组的形式整体传入。

    bind 方法

    bind 方法与 apply / call 方法也非常类似，相当于稍微再封装了一下，仍以上述DEMO作为案例：

    function Point(x, y){
        this.x = x;
        this.y = y;
    }
    Point.prototype.move = function(x, y) {
        this.x += x;
        this.y += y;
    }
    var p = new Point(0,0);
    var circle = {x:1, y:1, r:1};
    // p.move.call(circle, 2, 1);
    // p.move.apply(circle, [2, 1]);
    var circleMove = p.move.bind(circle, 2, 1);    //此时并不执行move方法
    circleMove();    //此时才执行

    从上面这段DEMO可以看出， bind 方法其实是给 apply / call 方法缓了一下，也可以说是封装了一下方便后续调用，其实质上相当于下面的这段代码：

    function circleMove() {
        p.move.call(circle, 2, 1);
    }
    circleMove();

    bind 方法兼容性适应

    bind 方法，即 Function.prototype.bind ，属于 ECMAScript 5 ，从 IE 10 版本才开始支持，那怎么做兼容性适应呢？

    if(typeof Function.prototype.bind !== 'function') {
      Function.prototype.bind = function() {
        var thatFunc = this;
        var args = [];
        for(var i = 0; i < arguments.length; i++) {
          args[i] = arguments[i];
        }
    
        return function() {
          var context = args.shift();
          thatFunc.apply(context, args);
        }
      }
    }

    easing,localScroll,lightbox,preload
    
     javascript的方法可以分为三类：a 类方法、b 对象方法、c 原型方法 
    function People(name) { this.name=name; //对象方法 this.Introduce=function(){ alert("My name is "+this.name); } } //类方法 People.Run=function(){ alert("I can run"); } //原型方法 People.prototype.IntroduceChinese=function(){ alert("我的名字是"+this.name); } //测试 var p1=new People("Windking"); p1.Introduce(); People.Run(); p1.IntroduceChinese();
    
     

    prototype

    每一个函数对象都有一个显示的prototype属性，它代表了对象的原型，更明确的说是代表了同函数对象（构造函数）所创建出来的对象的原型。

    函数 （对象）

    函数传遵递的参数：数字、字符串、布尔、函数、对象、未定义。函数以参数的形式传给函数时，函数不用加（），加（）就直接执行了，函数就会有返回值，如果函数里面没有返回值就会返回undifine。

    fun( fun1) // function fun1(){...}

    1.函数的定义

    函数挂载在一个对象上，作为对象的一个属性，就称它为对象的方法。

    用于初始化一个新创建的对象的函数称为构造函数。

     

    var tensquared=(function(x){return x*x}(10));    //函数表达式在定义后产立即调用

     

    函数定义包括函数语句和表达式两种方式，表达式方式定义的函数无法在定义之前使用，函数表达式也可以作为参数传给其它 函数

    var square = function(x){return x*x}  //函数表达式定义时可以包涵名称也可以不包涵

    var f = function fact(x) {if(x<=1) return 1;else return x*fact(x-1);}

     

    2.函数的调用

    函数调用有4种方法：

    1.作为函数；

    2.作为方法；

    3.作为构造函数：方法调用之前带关键字new,凡是没有形参的构造函数定义都是可以省略圆括号的，如：var o=new Object(); var o =new Object;

                           构造函数调用创建一个新的空对象，这个对象继承自构造函数的prototype属性。

    4通过call()和apply()方法间接调用

    3.作用域

    只要遇到域都会发生域解析，域包括： <script></script>、函数

    onclick事件以参数的形式传进去：oDom.onclikc等价于 oDom[evt]  

    window.onload=function(){
    var el=document.getElementById("btn-add");
    function fun(oBtn,evt) //evt是传进来的参数如：onclick onmouseover
    {
    oBtn[evt]=function(){alert("success");}
    }
    fun(el,"onclick")
    }

    表达式：=、 + 、-、*、%、++、--、Number()、参数

    js预解析：预解析var 、function、参数。变量返回undifine,遇到重名的只留下一个， 变量和函数重名的时候，留下函数；js逐行读取时：表达式可以修改预解析的值

    alert(a); //function a(){alert(4)}
    var a=1; alert(a); //1
    function a(){alert(2)}alert(a)//1
    var a=3;alert(a);//3
    function a(){alert(4)}

     

    函数内部不能读取到函数外部的变量，参数a相当于一个 var a

    var a =2; function fun(){ alert (a); var a=3; } fun(); //undifine alert(a); //2

    var a =2; function fun(){ alert (a); a=3; } fun(); //2 alert(a) //3

    var a =2; function fun(a){ //a==var a 预解析undifine alert (a); a=3; } fun(a); //2 alert(a) //2

     

    if、for不是作用域，所以定义在里面和定义在外面的变量都是一样的. Firfox浏览器不能预解析{ }里面的代码；

     

    “use strict" //在严格模式下

    object

    1.1 new构造函数法

    var person =new object();
    person.name="wang";

    person.sex="男";

    1.2 对象字面量

    var person={

    name:"wang",

    sex:"男"

    }

    函数调用时的括号

    简单点说，带括号的是函数调用，直接执行函数；不带括号的是绑定事件，事件触发再执行。

    复杂点说，带括号的是把返回值赋值给事件，不带括号的是把函数体所在地址位置赋值给事件。

    function cc(ele){
    var a=document.getElementById("a");
    a.style.color="red";
    alert(ele);
    }
    function change(){
    var ip=document.getElementById("ip");
    // ip.onclick=cc("hello"); //正常绑定事件，onclick触发执行
    // ip.onclick=cc; //调用cc时,才执行
    ip.onclick=function(){cc("hello")}(); //调用cc,直接执行，有参数的情况
    }
    change(); //调用change,直接执行

    checkbox

    $('[name="msgOrderCheckbox"]').is(":checked")是否选中返回true/false
    
    

    ~~作用

    其实是一种利用符号进行的类型转换,转换成数字类型
    
    ~~true == 1
    ~~false == 0
    ~~"" == 0
    ~~[] == 0
    ~~undefined ==0
    ~~!undefined == 1
    ~~null == 0
    ~~!null == 1

    window.location.hash属性介绍

     

    location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。

    对于Ajax页面想将它收藏起来，可是地址只有一个呀。浏览器上的“前进”“后退”按钮也会失效，这于很多习惯了传统页面的用户来说，是一个很大的使用障碍。

    用location.hash来解决这两个问题呢。

    比如，我的作者管理系统，主要功能有三个：普通搜索、高级搜索、后台管理，我分别给它们分配一个hash值：#search、#advsearch、#admin，在页面初始化的时候，通过window.location.hash来判断用户需要访问的页面，然后通过javascript来调整显示页面。比如：

    var hash; 
    hash=(!window.location.hash)?"#search":window.location.hash; 
    window.location.hash=hash; 
      //调整地址栏地址，使前进、后退按钮能使用 
    switch(hash){   
    case "#search":  
        selectPanel("pnlSearch");   //显示普通搜索面板  
        break;    
    case "#advsearch":    
          
    case "#admin":  
         
    }

    通过window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用（实质上欺骗了浏览器）。然后再根据hash值的不同来显示不同的面板（用户可以收藏对应的面板了），这就使得Ajax页面的浏览趋于传统化了。