关于原生 JS

在 JavaScript 中有 5 种不一样的数据类型：string、number、boolean、object、function

3 种对象类型：Object、Date、Array

2 个不包含任何值的数据类型：null、undefined

正则表达式

正则表达式是由一个字符序列造成的搜索模式。

语法

/正则表达式主体/修饰符(可选)

修饰符 能够在全局搜索中不区分大xiao 写:

修饰符	描述
i	执行对大 xiao 写不敏感的匹配。
g	执行全局匹配（查找全部匹配而非在找到第一个匹配后中止）。
m	执行多行匹配。

参考： http://www.runoob.com/js/js-regexp.html

阻止冒泡和默认事件

冒泡简单来讲就是 HTML 子元素与父容器之间都存在一些相同的事件，当触发子元素事件后，其父容器的事件也相应的触发。举例来讲好比 click 事件，当触发了子元素事件后， 包括这个控件的父控件也有 click 事件，则会继续执行 。

阻止冒泡须要在子控件事件加入相关代码：

btn.onclick = function(e) { 
  var _event = e || event; 
  // 高版本浏览器 
  _event.cancelBubble = true;
  // IE
  window.event.cancelBubble = true; 
  // 非 IE
  _event.stopPropagation();  
}

阻止默认事件

function preventDefa(e){ 
  if(window.event){ 
    //IE中阻止函数器默认动做的方式  
    window.event.returnValue = false;  
  } 
  else{ 
    //阻止默认浏览器动做(W3C)  
    e.preventDefault(); 
  }  
}

常见 DOM 操做

查找 HTML 元素

var x = document.getElementById("main"); // 经过 id 查找
var y = x.getElementsByTagName("p");  // 查找 id="main" 元素中的全部 <p> 元素
var x = document.getElementsByClassName("intro"); // 经过类名查找

改变 HTML

document.write();  // 可用于直接向 HTML 输出流写内容。 
document.getElementById(id).innerHTML=新的 HTML // 改变 HTML 元素的内容
document.getElementById(id).attribute=新属性值 // 改变 HTML 元素的属性
document.getElementById(id).style.property=新样式 // 改变 HTML 元素的样式

建立新的 HTML 元素

var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

删除 HTML  元素

var parent=document.getElementById("div1");
// 找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
// 从父元素中删除子元素：
parent.removeChild(child);

注意：DOM 须要知道要删除的元素及其父元素才可删除，可以使用如下简便写法

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

面向对象

JavaScript 对象是拥有属性和方法的数据。js 函数就是对象！

对象定义：

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

对象键值对的写法相似于：PHP 中的关联数组

两种方式访问对象属性

person.lastName; 
person["lastName"];

对象方法经过添加 () 调用 (做为一个函数)。

name = person.fullName();

最简单的面向对象程序

<script type="text/javascript">
    var obj = new Object();
    obj.qq = '1079161148';
    obj.name = 'mr lan'
    obj.showName = function() {
        alert('my name =' + this.name)
    }
    obj.showQQ = function() {
        alert('my qq =' + this.qq)
    }
    obj.showName()
    obj.showQQ()
</script>

封装重复使用的方法

<script type="text/javascript">
    function createPerson(name, qq) {//构造函数 构建出一个对象；
        var obj = new Object();
        obj.qq = qq;
        obj.name = name
        obj.showName = function() {
            alert('my name =' + this.name)
        }
        obj.showQQ = function() {
            alert('my qq =' + this.qq)
        }
        //出厂
        return obj
    }
    var obj = createPerson('Mr Lan','1079161148');
    var obj2 = createPerson('Mr Li','1079161168');
    obj.showName();
    obj.showQQ();
</script>

升级 ---> 构造函数加 new

<script type="text/javascript">
    function createPerson(name, qq) { //构造函数 构建出一个对象；
        this.qq = qq;
        this.name = name
        this.showName = function() {
            alert('my name =' + this.name)
        }
        this.showQQ = function() {
            alert('my qq =' + this.qq)
        }
    }
    var obj = new createPerson('Mr Lan', '1079161148');
    var obj2 = new createPerson('Mr Li', '1079161168');
    obj.showName()
    obj.showQQ()

　　alert(obj.showName()==obj2.showName()) //false

</script>

进阶面向对象编程

<script type="text/javascript">
    //混合构造函数混合方式(构造函数配合原型)
    function createPerson(name, qq) { //构造函数加属性
        this.qq = qq;
        this.name = name
    }
    createPerson.prototype.showName = function(){//原型加方法
        alert('my name =' + this.name)
    }
    createPerson.prototype.showQQ = function(){
        alert('my qq =' + this.qq)
    }
    var obj = new createPerson('Mr Lan', '1079161148');
    var obj2 = new createPerson('Mr Li', '1079161168');
    //obj.showName() //还能够继续用不影响使用
    //obj.showQQ()
    alert(obj.showName()==obj2.showName())//true
</script>

函数定义做为对象的属性，称之为对象方法。
函数若是用于建立新的对象，称之为对象的构造函数。

call 方法

调用一个对象的一个方法，以另外一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,  [,.argN]]]]])

参数

thisObj：可选项。将被用做当前对象的对象。

arg1, arg2,  , argN：可选项。将被传递方法参数序列。

说明

call 方法能够用来代替另外一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由thisObj 指定的新对象。若是没有提供 thisObj 参数，那么 Global 对象被用做 thisObj。

实例1

var Add=function(a,b){  
      console.info(a+b);  
    }  
      
    var Sub=function(a,b){  
      console.info(a-b);  
    }  
      
    Add.call(Sub,3,3); //它输出6:用Add对象替换Sub对象来执行方法.

实例2

function Sister(){   
        this.age=18;  
        this.sayAge= function(){  
            document.write("Age:"+this.age);  
        }  
        this.yaya=function(){  
            document.write("yaya.....");  
        }  
    }  
    function Brother(){   
        this.age=25;  
        this.sayAge=function(){  
            document.write("Age:"+this.age);  
        }  
        this.hoho=function(){  
            document.write("hoho.....")  
        }  
    }  
    var sis=new Sister();  
    var bro=new Brother();  
    sis.sayAge.call(bro);  // 输出的是 Age:25

自调用函数

函数表达式能够 "自调用"。自调用表达式会自动调用。若是表达式后面紧跟 () ，则会自动调用。不能自调用声明的函数。经过添加括号，来讲明它是一个函数表达式：

(function () {
    var x = "Hello!!";      // 我将调用本身
})();

JS 闭包

变量声明时若是不使用 var 关键字，那么它就是一个全局变量，即使它在函数内定义。

闭包是可访问上一层函数做用域里变量的函数，即使上一层函数已经关闭。 就是一个函数引用另外一个函数的变量，由于变量被引用着因此不会被回收，所以能够用来封装一个私有变量。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

this

在JavaScript中，this一般指向的是咱们正在执行的函数自己，或者是指向该函数所属的对象（运行时）

数组迭代

• reduce() 接收一个函数做为累加器，数组中的每一个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
function(total,currentValue, index,arr)	必需。用于执行每一个数组元素的函数。 函数参数: 参数 描述 total 必需。初始值, 或者计算结束后的返回值。 currentValue 必需。当前元素 currentIndex 可选。当前元素的索引 arr 可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

// 计算数组元素相加后的总和
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}

• map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

array.map(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每一个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当期元素的索引值 arr 可选。当期元素属于的数组对象
thisValue	可选。对象做为该执行回调时使用，传递给函数，用做 "this" 的值。 若是省略了 thisValue ，"this" 的值为 "undefined"

// 数组中的每一个元素+3，并返回新数组:
var oldArray = [1,2,3,4,5];
var timesFour = oldArray.map(function(val){
  return val + 3;
});
var newArray = timesFour;

• filter() 方法建立一个新的数组，新数组中的元素是经过检查指定数组中符合条件的全部元素。

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每一个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象做为该执行回调时使用，传递给函数，用做 "this" 的值。 若是省略了 thisValue ，"this" 的值为 "undefined"

// 返回<6的值
var oldArray = [1,2,3,4,5,6,7,8,9,10];

array  = oldArray.filter(function(val) {
  return val < 6;
});
var newArray = array ;

• sort() 方法用于对数组的元素进行排序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。

// 数字排序（数字和升序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});