js基础3

内置对象

内置对象就是JS提供的一套工具箱，我们通过内置可以很方便的进行一些操作。
Math对象：
    Math.ceil()  //向上取整，天花板
    Math.floor()  //向下取整，地板
    Math.round()  //四舍五入
    Math.random()  ：返回0-1之间的一个随机数，[0,1)  能取到0，取不到1
    Math.abs()  :取绝对值
    Math.pow(num, power)   :求num的power次幂
    Math.sqrt(num)         :对num开平方
Date对象：
    "2016-07-25 10:14:09:991"  字符串的日期格式
    2005，9，1日期的每一部分，注意月份是从0开始的
    表示日期的毫秒形式1128096000000
Array对象：
    检测目标是否是一个数组：arr instanceof  Array
    join方法：将数组的值拼接成字符串
    toString()方法：将数组转换成字符串,调用了join方法
    数组的拼接与截取：
        concat()方法  ：concat  合并 注意：concat并不会影响原来的数组
        1.slice方法截取数组只包含begin，不包含end。
        2.slice方法的参数可以是负数，表示从后面往前数第几个元素，（慎用，容易搞混）
        3.slice方法不会影响到原来的数组。
        splice()方法    splice：拼接
        splice() 方法用新元素替换旧元素，以此修改数组的内容。

    indexOf()查找数组中元素第一次出现的位置，
    HTML5中新增加了很多迭代方法，这些方法都不会修改原数组。
        every()、filter()、forEach()、map()、some()
        forEach()方法对数组进行遍历：forEach(参数)
        filter()方法：对数组进行过滤，创建并返回一个新数组，包含了所有通过测试的元素

基本包装类型

简单数据类型是没有方法的。为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean。
基本包装类型：把基本类型包装成复杂类型。
1.把简单类型转换成复杂类型：var s = new String(str);
2.调用包装类型的indexOf方法：var result = s.indexOf(“a”);
销毁刚刚创建的复杂类型

注意：基本包装类型我们只会用string的基本包装类型，number和布尔的不用，因为用的时候会引起歧义

String对象

字符串所有的方法都不会修改字符串本身，因为字符串是不可变的，操作完成会返回一个新的字符串

trim：只能去除两边的空白，内部的空白去不了
concat：字符串拼接，基本不用，拼接字符串使用+号更简单

截取：方法很多，记得越多越混乱，就记一个最好用的：substr
String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。
slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，
因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。

slice：从start开始，end结束，并且取不到end
subString：从start开始，end结束，并且取不到end
substr：从start开始，截取length个字符

replace：字符串替换 var result = str.replace("a","b");只会替换一次
match（）：查找字符串中特定的字符串，并且如果找到的话，则返回这个字符
charAt（）：返回在指定位置的字符
charCodeAt（）：返回在指定的位置的字符的Unicode编码
search（）：检索与正则表达式相匹配的值
split()： 方法用于把一个字符串分割成字符串数组。

BOM

BOM基本概念

javascript的三个组成部分

ECMAScript、DOM、BOM

什么是BOM

BOM（Browser Object Model）：浏览器对象模型，提供了一套操作浏览器功能的工具

window.open与window.close
window.open(url,[name],[features]);参数1：需要载入url地址  参数2：新窗口的名称
_self:在当前窗口打开    _blank:在新的窗口打开
参数3：窗口的属性，指定窗口的大小   返回值：会返回刚刚创建的那个窗口，用于关闭
示例： var newWin = window.open("http://www.baidu.com","_blank","width=300,height=300");
newWin.close(); window.close()

location对象：
    location对象也是window的一个属性，location其实对应的就是浏览器中的地址栏。
    location.href = "http://www.baidu.com"  让页面跳转到百度首页

    location.reload():让页面重新加载
    location.reload(true):强制刷新  相当于ctrl+F5
    location.reload(false):刷新  相当于F5
location的其他属性：
    console.log(window.location.hash);//哈希值 其实就是锚点
    console.log(window.location.host);//服务器 服务器名+端口号
    console.log(window.location.hostname);//服务器名
    console.log(window.location.pathname);//路径名
    console.log(window.location.port);//端口
    console.log(window.location.protocol);//协议
    console.log(window.location.search);//参数

window.navigator的一些属性可以获取客户端的一些信息
navigator.userAgent：浏览器版本

history对象：
    后退：
    history.back();
    history.go(-1);

    前进：
    history.forward();
    history.go(1);

screen对象:
    console.log(screen.width);//屏幕的宽度
    console.log(screen.height);//屏幕的高度
    console.log(screen.availWidth);//浏览器可占用的宽度
    console.log(screen.availHeight);//浏览器可占用的高度

动画

offset
    offset系列用于获取元素自身的大小和位置，在网页特效中有广泛应用
    offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop

offsetHeight与offsetWidth
    1.获取的是元素真实的高度和宽度（包括border）
    2.获取到的是数值类型，方便计算
    3.offsetHeight与offsetWidth是只读属性，不能设置。
style.height与style.width
    1.只能获取行内样式
    2.获取到的是字符串类型，需要转换
parentNode和offsetParent
    parentNode始终是父元素
    offsetParent是离当前元素最近的定位元素(absolute、relative)，如果没有，那就找body
offsetLeft与offsetTop
    offsetLeft: 自身左侧到offsetParent左侧的距离：left + margin-left
    offsetTop:自身顶部到offsetParent顶部的距离 :  top + margin-top

offsetLeft与offsetTop 1.元素自身与offsetParent真实的距离 2.获取到的是数值类型，方便计算 3.只读属性，只能获取，不能设置 style.left与style.top 1.只能获取行内样式 2.获取到的是字符串，需要转换 3.可以获取，也可以设置

scroll
    scroll:滚动
    scroll家族用来获取盒子内容的大小和位置
    offset家族用来获取盒子自身的大小和位置
    scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop
scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。

对于有滚动条的盒子，可以使用onscroll注册滚动事件，每滚动一像素，就会触发该事件。
scrollTop是盒子内容被滚动条卷去的头部的高度。
scrollLeft是盒子内容被滚动条卷去的左侧的宽度。

获取页面的滚动坐标有兼容性问题
    现代浏览器（除了IE678外的浏览器）
        window.pageYOffset
    IE和IE678
        document.documentElement.scrollTop
    未声明 DTD
        document.body.scrollTop

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

function scroll() {
   return {
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    };
}

client
    offset家族用来获取元素自身的大小和位置
    scroll家族用来获取元素内容的大小和位置
    client（客户区、可视区）家族用来获取元素可视区域的大小

clientWidth与clientHeight
    偏移offsetWidth: width  +  padding  +  border
    卷曲scrollWidth: width  +  padding  不包含border   内部内容的大小
    可视clientWidth: width  +  padding  不包含border(绿色背景的部分)

clientTop与clientLeft完全没有用，他们就是borderTop与borderLeft
但是：如果有滚动条，还会包含滚动条的宽度，但是见过滚动条在上边或者左边的？

网页可视宽高
    现代浏览器浏览器（除了IE678外的浏览器）
        window.innerWidth
    IE678 (标准模式)
        document.documentElement.clientWidth
    IE678（怪异模式，不声明DTD）
        document.body.clientWidth

function client(){
    return{
        width:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
        height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}

onresize事件会在窗口被调整大小的时候发生。

事件对象
    为什么要有事件对象？
        在执行事件的时候，需要一些和事件相关的数据。
        在触发事件的时候，会产生一个事件对象event，这个对象中包含了与事件相关的信息。
        但是在IE678里面，支持window.event
事件对象的常用属性
    screenX与screenY：光标相对于屏幕左上角的水平位置与垂直位置
    clientX与clientY：光标相对于页面可视区左上角的水平位置和垂直位置
    pageX与pageY：光标相对于网页（文档）左上角的水平位置与垂直位置（推荐使用）
    在IE678中，没有pageX与pageY属性，但是我们可以通过scrollTop + clientY的方式进行计算来获得。

function getPageX（event）{
    return event.pageX || event.clientX + document.documentElement.scrollLeft;
}

function getPageY(event){
    return event.pageY || event.clientY + document.documentElement.scrollTop;
}

清除选中文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

移除事件：
    语法：target.removeEventListener(type, listener, [useCapture])
    //type：事件类型
    //listener:事件处理程序，注意要移除事件的话，在注册的时候不能使用匿名函数。
    //useCapture:与注册的时候一致。

    在IE678里面不支持addEventListener和removeEventListener，而是支持attchEvent和detachEvent两个方法。

注意：
    1.在attchEvent里面的this指向的不是事件的调用者，而是window（奇葩）
    2.attachEvent的type一定要加上on，不然没效果

注册事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){
            obj.attachEvent("on" + type,fn);
        }else{
            obj["on"+type] = fn;
        }

移除事件
    function removeEvent(obj,type,fn){
        if(obj.removeEventListener){
            obj.removeEventListener(type,fn,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on"+type,fn);
        }else{
            obj["on"+type] = null;
        }
    }

事件流
    当HTML元素产生一个事件时，这个事件会在元素节点与根节点之后的路径传播，路径
    所经过的节点都会接受到这个事件，这个传播过程称为DOM事件流
    DOM事件流分为冒泡事件流和捕获事件流
事件冒泡：
    当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这个过程称为事件冒泡；
    说白了就是：当我们触发了子元素的事件后，元素对应的事件也会被触发
    这个事件从原始元素开始一直冒泡到DOM树的最上层
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload（关闭页面）

阻止事件冒泡
    正常浏览器：event.stopPropagation() 可以阻止事件冒泡
    IE678 ： event.cancelBubble = true;阻止冒泡
    function stopPropagation(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }

事件捕获
    老版本浏览器只支持事件冒泡，不支持事件捕获（我们基本用的都是事件冒泡）
    事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递

事件的三个阶段
    捕获阶段   目标阶段，执行当前对象的事件处理程序  冒泡阶段
注意：事件的三个阶段一直都在执行，只不过我们通常都会去干预冒泡阶段，而不会去干预捕获阶段

正则

正则表达式（Regular Expression）：用来匹配规律规则的表达式
用途：表单验证、高级搜索、生化科学

通过构造函数创建
    var regExp = new RegExp(/\d/);
正则表达式的字面量（推荐）
    var reg = /\d/;//正则表达式字面量
| 表示或 或的优先级最低 可以通过()提升优先级
[]表示一个字符的位置，[]里面写这个位置可以出现的字符
^表示该位置不可以出现的字符
^表示开头   []里面的^表示取反
$表示结尾
*：表示能够出现0次或者更多次，x>=0;
+：表示能够出现1次或者更多次，x>=1；
?：表示能够出现0次或者1次，x = (0|1);
{n}：表示能够出现n次
{n,}：表示能够出现n次或者多次
{n,m}：表示能够出现n次到m次
{}大括号限定出现的次数
[]表示一个字符的出现位置
()用来提升优先级