JavaScript 学习笔记整理

1.字符集
   1.1 区分大小写 JavaScript 是区分大小写的
   1.2 空格 换行符和格式控制符
2.注释
  // 要注释的前面加这个
3.直接量
  程序中直接使用的数据值
4.标识符和保留字
  就是JavaScript中一些变量名等
5.数据类型
  5.1 number 数字型
  5.2 string 字符型
  5.3 boolean 布尔型  true or false  以上为原始类型   无法在分类
  5.4 undefined 未定义或者不存在
  5.5 null  空                       以上为特殊类型
  5.6 object 对象 可以是各种类型的集合
6.typeof运算符
  6.1 原生使用 object.prototype.toString.call() 检查数据的类型
  6.2 直接使用 typeof test 来判断类型
7.数值
  7.1 正0  和  负0  是等价的
  7.2 Infinity  javascript 在算术运算时发生溢出,下溢 或被零整除的时候不会报错  infinity大于一切数值除了 NAN  -infinity 小于一切数值  除了 NAN
  7.3 NaN 不等于任何值包括它本身
  7.4 JavaScript 不区分整数值和浮点数值,所有数字均采用浮点数值标识
8.字符串
  '123132'
9.转义
  反斜杠(\)
10.null 和 undefined
   null默认是一个特殊的对象,undefined 则是未定义
11.布尔值
    false 和 true
12.变量声明
    var a;
13.声明提前(变量提升)
 JavaScript 的工作方式先解析代码,获取所有被声明的对象,然后逐行运行,造成的后果就是所有变量的声明语句都会被提升到代码的头部,这就是声明提前
 注意:变量提升只对var 命令声明的变量有效,如果一个变量的声明不是var则无效
 变量作用域:全局作用域,局部作用域。
 注意:在函数体中局部变量的优先级高于同名的全局变量。也就是说在一个函数内部声明一个局部变量或者函数中带有的变量和全局变量同名,那么局部变量会覆盖全局变量。
 在函数中默认用var 声明的是局部变量,没有var 的则是全局变量声明。
 
14.语句
  14.1 表达式语句
  14.2 声明语句  var a=1,b=2;
  14.3 条件语句 if switch
  14.4 循环语句 for  do while   while for in
  14.5 return语句
15.对象 JavaScript中的一种基本类型
   15.1 键名  对象的所有键名都市字符串 又称为属性(prototype),它的键值可以是任何数据类型,如果一个属性的值为函数,通常把这个属性称之为方法。
   15.2 创建对象
        对象直接量  var   a = {};
        关键字new var a = new Object();
        Object.creat()  var a = Object.creat();
   15.3 对象直接量
       对象直接量 是由若干名/值对组成的映射表。键名和键值之间用冒号分隔。如果对象内部包含多个键值对,则每个键值对之间用逗号分隔。整个映射表用花括号括起来。
       注意:对象直接量的最后一个属性可由可无,但是在ie中如果多了一个逗号,会报错,
   15.4 构造函数
       通过new创建对象 new运算符创建并初始化一个对象,关键字new后跟随一个函数调用,那这个函数称作构造函数。
       例子:var a = {}
             var a = new Object();
             var a = Object.creat(null) 这三个是等价的
   15.5 对象常见的用法 
       创建(create) 设置(set)  查找(query) 删除(delete) 检测(test) 枚举(enumerate)
   
   15.6 读取属性
        例子: var a = {name:"1"}; a.name = 1
   15.7 查找属性
        例子: var a = {name:"1"}; Object.keys(a)
   15.7 删除属性
        例子: var a = {name:"1"}; delete a.name
        delete只能删除自身属性
16.构造函数
   解释:就是用来生成对象的函数,一个构造函数可以生成多个对象,这些对象都有相同的结构
   特点:函数体内使用了 this 关键字 ,代表了所要生成的对象实例 生成对象时,必须用 new命令
   注意:构造函数名的第一个字母必须大写,每一个构造函数都有一个prototype属性
   例子:function Cx(){
             this.name = 'cx'
         }
         var log = new Cx();
         log   // Cx{name:cx}
         
         or
         
         function Cx(name){
            this.name = name;
         }
         var log = new Cx('cx');
         log // Cx{name:cx}
    
    this  总是返回一个对象,返回属性或者方法当前所在的对象
        例子:this.prototype
        var A = {
           name:"cx",
           test:function(){
              return this.name
           }
        };
        var B = {
           name:"xc";
        }
        B.test = A.test;
        B.test()  // cx
        注意:如果一个函数在全局环境中运行,那么他的this 指向window也就是最顶层对象
17.改变this的指向
    方法:call apply bind
    例子:call(obj1,arr1);  第一个参数为要指向的对象,也就是要指定的上下文   后面的为传入的参数  如果参数为空,null,undefined 则默认传入全局对象
          apply(obj1,[arr1,arr2]);  同上,只是参数换成了数组
          bind(0bj1)  将函数体内dethis绑定到某个对象上返回一个新的函数
      
18.原型
    解释:JavaScript中每一个对象(除null)都会和另一个对象相关联,也就是继承另一个对象。那么另一个对象就称之原型,每个对象都从原型继承属性
          所有通过对象直接量创建的对象都具有一个原型对象,我们都可以通过Object.prototype获得对原型对象的引用。
          通过关键字new 或者构造函数创建的对象的原型就是构造函数的prototype属性。比如 通过new Object()创建的对象继承自Object.prototype, 通过new Array()创建的对象的原型就是Array.prototype。
          Object.parototype  不会继承任何属性,它没有原型
          所有内置构造函数都具有一个继承自Object.prototype的原型
      
      
19.原型链
    解释:对象的属性和方法可能定义在本身,也可能定义在它的原型对象。由于原型对象本身也对象又是原型,所以形成了一条链式关系,就又可能 a 的原型对象是b b的原型对象是c
    原型链的作用:如果查找一个对象的属性,JavaScript是先查找这个对象本身,如果没有则查找它的原型对象,如果没有则查找原型对象的原型  如果一直没有直到最顶层的object.prototype还是没有则返回undefined
20.继承
    JavaScript对象具有自身属性,也又一些属性是从原型对象继承而来,当查询一个不存在的对象的时候 不会报错而是返回undefined
    如果对象自身和它的原型都定义了一个同名的属性,那么优先读取自身的属性,这个叫做覆盖。
21.constructor
    prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。
22.object.prototype.isPrototypeOf()
    用来判断一个对象是否是另一个对象的原型
23.数组
   数组是值的有序集合,每个值叫做一个元素,而且每个元素在数组中都有一个位置也就是下标从0开始也称之为索引,整个数组用[]表示
   创建数组  var a = [1,2,2] or var a = new Array(1,2,2);
   求数组的长度   a.length
   添加/删除   a.push()往数组最后一个添加    shift() 删除数组中的元素   具体数组的操作看前面笔记
   
24.函数
   函数就是一段可以反复调用的代码块。
   函数使用关键字function来定义,还包括一个称为形参(parameter)的标识符列表,这些参数在函数体内像局部变量一样工作
   函数调用会为形参提供实参的值,函数使用它们实参的值来计算返回值,称为该函数调用表达式的值
   除了实参之外,每次调用还会拥有另一个值,   本次调用的上下文    也就是this关键字的值
   
   如果函数挂载在一个对象上,作为对象的一个属性,就称之为 对象的方法
   
   js中的函数可以嵌套在其他函数中定义,这样它们就可以访问它们当时所处作用域中的任何变量,这个就叫做闭包,闭包的作用   读取函数内部变量,让这些变量常驻内存
   
   函数的定义有三种方法
       function命令:function name(){}
       函数表达式:var a = function(){}
       function构造函数   var a = new Function(){}   =  var a = function(){}
   
   注意:如果函数多次声明,那么后声明的会覆盖前面声明的。
   
   函数可以调用自身,这就是递归
   
   24.1 嵌套函数
      在JS中函数内可以嵌套其他函数
   24.2 函数调用
      构成函数主题的JavaScript代码在定义时并不会执行,只有调用该函数,它们才会执行。有4中方法调用JS函数
         1.作为函数、 f()
         2.作为方法   o.f = function(){}   o.f();
         3.作为构造函数 var a = new Object();  var a = new Object;
         4.通过它们的call() 和 apply() 方法间接调用
   24.3 传参
       如果传入的参数名字相同,则取最后出现的那个的值
       例子: function go(x,x){
                 console.log(x) 
              }
              
              go(1,2)  // 2
              
    24.4 函数作用域
         指变量存在的范围,js中有两种作用域,一种全局作用域,变量在整个程序中一直存在,所以地方都可以读取。一种函数作用域,变量只有在函数内部存在,只有函数内部可以访问。
         如果在函数内部定义一个变量和全局变量名相同,那么函数内部的变量将覆盖全局变量
    
    24.5 函数属性、方法和构造函数
         name属性   function a(){}   a.name // a
         length属性 function f(x,y){}  f.length //2    
              
    24.6 严格模式
        'use strict'
25.表达式和运算符
    25.1 JS 原始表达式包含 常量 直接量 变量 或者关键字
          直接量就是直接在程序中出现的常数值 如 1.2    "hello"
          保留关键字  this true false this 等
          变量   i  num
    
    25.2 对象和数组的初始化表达式
         实际上是一个新创建的对象和数组,也可以称之为  对象直接量  和  数组直接量
         例子   var a = {},   var b = [];
    
    25.3 函数定义表达式
         函数定义表达式(函数直接量)定义一个Javascript 函数 。表达式的值就是这个新定义的函数。
         例子:var f = function(){}
    
    25.4 属性访问表达式
         var f = {name:"1",age:"22"}    f.name // 1   or    var t = [1,2,12,3]   t[3] //3
         
26.DOM 文档对象模型,表示和操作HTML和XML文档内容的基础
    firstChild lastChild  返回该节点子节点的第一个和最后一个 如果没有返回null
    parentNode   当前节点的父节点 没有返回null
    childNodes  当前节点的子节点列表
    nextSibling previousSibling   当前节点的前一个  和 下一个。 具有相同父节点的两个节点称之为兄弟节点
    textContent  返回该节点的文本内容
    nodeType  返回当前节点类型
    nodeValue 返回text节点或者comment节点的内容 ,其他类型一律返回null
    nodeName 元素标签名,大写显示
    
    children 类型childNodes  返回一个NodeList对象,但是children列表只包含Element对象
         注意 : text 和commont 没有children 属性
    
    firstElementChild lastElementChild   类型firstChild  和  lastChild   但是只代表子Element
    
    nextElementChild  previousElementSibling    类似nextSibling 和 previousSibling 但是只代表兄弟 Element
    
    childElementCount  返回子元素的数量
    
    offsetParent   返回当前HTML元素最靠近 并且css 的position 不等于static的父元素
    
    innerHTML  返回 读取元素内部的html
    
    outerHTML 返回所有内容 包括读取元素的本身
    
    insertAdjacentHTML() 将任意HTML标记字符插入到指定的元素相邻的位置
    
    createElement  创建节点
    
    createTextNode() 创建一个text节点,参数为所要生成的文本节点的内容
    
    createAttribute() 用来复制已存在的节点
    
    appendChild 和 insertBefore  用来插入节点
    
    removeChild 删除一个节点
    
    replaceChild 删除一个节点并用新的替换一个节点
    
    elementFromPoint() 判断元素在某点
    
    scrollTop  滚动方法
    
    scrollBy  用于将网页移动指定距离  可以向右 和向下滚动 像素
    
    scrolllntoView  保证元素在视口可见
    
    文档属性
       clientWidth clientHeight    返回元素节点可见区域的宽度 和  高度
       clientLeft  clientTop    返回元素节点左边框的宽度 和 网页元素顶部边框的宽度  内联元素 则为0 
       scrollWidth  scrollHeight   返回网页元素的高度和总宽度。
       scrollLeft  scrollTop    返回网页元素的水平滚动条向右侧滚动的像素数量   和  元素的垂直滚动条向下滚动的像素数量
       offsetWidth offsetHeight   返回元素的水平宽度和垂直高度
       offsetLeft  offsetTop   返回当前元素相对于左上角offsetParent节点的垂直偏移 和 返回水平位移
       
    document.cookie 操作浏览器的cookie
    
    domain 返回当前文档的域名
    
    lastModified  包含文档修改时间的字符串
    
    location 与window对象的location属性引用同一个location对象
    
    document.referrer  返回当前文档的访问来源  如果当前是从浏览器键入或者无法获取来源则返回空
    
    title  当前文档标题
    
    doctype  document对象一般有两个子节点,第一个子节点是document.doctype 它是一个对象包含当前文档类型信息。 html5 用 <!DOCTYPE html>
    
    documentElement  返回当前文档的根节点   它是文档的第二个节点  第一个是上面的
    
    defaultView   在浏览器中返回document 对象所在的window对象  否则返回null
    
    activeElement  返回当前文档中获得焦点的元素
    
    characterSet  返回渲染当前文档的字符集  如  utf-8
    
    readyState   返回当前文档的状态  
         有三种 :
              loading   加载html部分还在解析 
              interactive 加载外部资源
              complete  加载完成
              
    compatMode  返回浏览器处理文档的模式
        类型
             BackCompat   向后兼容模式
             CSS1Compat   严格模式
    
    document.write  docuemnt.writeIn
    
    window.getSelection() 方法返回一个 selection 对象   查询选取的文本
    
    contenteditable  设置div 可编辑
    
    execCommand   插入元素 或者改变样式
27.DOM属性 和 css
    27.1 属性
        HTML 元素由一个标签和一组称为属性的名/值对 组成
        HTML 属性作为 Element的属性
        
        获取和设置非标准HTML属性 
            getAttribute() //获取属性
            setAttribute() //设置属性
            hasAttribute() //检测属性是否存在
            removeAttribute() //删除
        
        数据集(dataset)
            例子:<div id="test" data-tip="title"></div>
                  var a = document.getElementById('test');
                  a.dataset.tip // title
    
        attr节点属性(attributes)
            用法:document.body.attributes[0]   body元素的第一个属性
            属性节点对象由name和value属性,对应该属性的属性名和属性值 等同于 nodeName属性和 nodeValue 属性
                例子: <div id="top"></div>
                       var t = docuemnt.getElementById('top');
                       t.attributes[0].name //id
                       t.attributes[0].nodeName // id
                       t.attributes[0].value // top
                       t.attributes[0].nodeValue // top
                       
    27.2 元素的内容
        用法: <div id="t">a</div>
               var a = docuemnt.getElementById('t');
               a.innerHTML //a
               a.innerHTML = 'b'   //b
    
    27.3 css
        例子: <div id="t">a</div>
               var a = docuemnt.getElementById('t');
               a.style.color = red
               a.style.fontSize = '14px'   //  需要带单位
               
               a.style.cssText= "font-size:14px"
               a.style.setProperty('color','blue') //设置css属性
               a.style.getPropertyValue('color')  //读取css属性
               a.style.removeProperty('color')   //删除css属性
               
               window.getComputedStyle(t,null) 获取引用的样式或者伪元素样式 第一个参数是要获取其计算样式的元素,第二个参数也是必需的,通常是null或空字符串
                  例子:<style>
                          #tc{ height:30px;}
                          #tc:before{content:'t';color:green};
                        </style>
                        <div id="tc" style="background:yellow"></div>

                        var t = document.getElementById('tc');
                        window.getComputedStyle(t,null).height  //30px
                        window.getComputedStyle(t,':before').content  // t
                        window.getComputedStyle(t,null).getPropertyValue('line-height');
                        

        脚本化css   通过改变或者添加HTML的class属性值,也是改变内联style属性的一个方法。
             例子: t.className = 'attention';  //设置class属性
                    t.className += 'attention2';  //添加class属性
                    t.className = '';  //删除全部class
                    t.className = t.className.replace('attention2','');  //删除名为attention2的class
    
        在HTML5中,每个元素都定义了classList属性,该属性值是DOMTokenList对象:一个只读的类数组对象,它包含元素的单独类名,而且是实时的。它有四个方法:
                element.classList.add()   //添加
                element.classList.remove()  //删除
                element.classList.contains()  //是否包含
                element.classList.toggle()  //如果不存在类名就添加,否则删除
                
        查询、插入和删除样式表
            document.styleSheets[]数组的元素是CSSStyleSheet对象。CSSStyleSheet对象有一个CSSRules[]属性,指向一个类数组对象,它包含样式表的所有规则:
            document.styleSheets[0].cssRules[0]
    
    27.4 css事件
        transitionEnd  监听 transition 结束
        animationstart 监听 动画开始 触发
        animationend  动画结束触发
        animationiteration   开始新一轮动画循环时触发  如果循环次数为1  则不触发
            例子:  element.addEventListener("animationstart", listener, false);  
                    element.addEventListener("animationend", listener, false);  
                    element.addEventListener("animationiteration", listener, false);
                     注意:要加上 webkit 等前缀
                 
                 通过AnimationPlayState(animation-play-state)   控制动画的状态。
                 例子:element.style.webkitAnimationPlayState = "paused"; 
                       element.style.webkitAnimationPlayState = "running";

                
28.Event 事件
  28.1 相关术语
       什么是事件   就是浏览器通知应用程序发生了什么事情
       
       事件类型     用来说明发生什么类型事件的字符串   比如 mouseover
       事件目标     发生的事件与之相关的对象,当江事件式,必须同时指明类型和目标
       事件处理处理程序  处理或响应事件的函数
       事件对象 与特定事件相关且包含该事件详细信息的对象
       事件传播  浏览器决定哪个对象触发其事件处理程序的过程。    当文档元素上发生某个类型的事件时,它们会在文档树上  传播 或  冒泡
       事件捕获   事件传播的另一种方式,在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前捕获它。著作权归作者所有。
       
   28.2 Event事件
       注册事件处理程序 有两种基本方式
           1.给事件目标对象或文档元素设置属性
           2.通过 addEventListener(type,listener[,useCapture])
                 type  事件名称(事件类型),字符串,大小写不敏感
                 listerner  监听函数。事件调用时,调用它
                 useCapture 布尔值,在监听函数是否在捕获阶段触发,默认false(监听函数只在冒泡阶段触发)
                 注意:使用监听函数的时候  事件去掉on
    
       事件分为三种阶段
           捕获阶段
           目标阶段
           冒泡阶段
       
       事件委托(事件委托)使用后  后面在插入的新节点还是可以监听到的
          基于事件在冒泡阶段会向上传播到父节点上,我们可以将子节点的监听放到父节点上,由父节点的监听函数统一处理多个子元素事件。这种方法叫做事件的代理
       
       事件取消    
          用属性注册的事件处理程序的返回值能用于取消事件的浏览器默认操作
            function cancelHandler(event){
              var event = event || window.event;
              if(event.preventDefault) {event.preventDefault();}  //标准
              if(event.returnValue) { event.returnValue = false;}  // IE
              return false; //用于处理使用对象属性注册的处理程序
            }
     
        取消事件传播
             e.stopPropagation    //ie   e.cancelBubble = true
             
        
        文档事件
            beforeunload   //当你要从当前浏览页面跳走的时候出现你是否要离开的弹框
                window.addEventListener('beforeunload',function(e){
                  var message = '你确认要离开吗!';
                  e.returnValue = message;
                  return message
                });
        
            unload   //当窗口要关闭或者document事件要卸载的时候触发,排在window body frameset对象上面   触发顺序排在beforeunload 和pagehide后面   只有在页面没有被浏览缓存的时候触发
            
            load  //直到文档和所有图片都被加载完触发  缓存的页面不会触发
            error //在页面加载失败的时候触发
            pageshow  // 在页面加载时触发
            pagehide  // 通过 前进后退按钮的时候触发
            
            DOMContentLoaded事件:当文档加载解析完毕且所有延迟(deferred)脚本(图片未加载完毕)都执行完毕时会触发,此时图片和异步(async)脚本可能依旧在加载,但是文档已经为操作准备就绪了。也就是说,这个事件,发生在load事件之前。
            document.addEventListener('DOMContentLoaded',handler,false);
            
            readystatechange事件:document.readyState属性会随着文档加载过程而变,而每次状态改变,Document对象上的readystatechange事件都会触发。
            document.onreadystatechange = function() {
              if(document.readyState == 'complete'){
            
              }
            }
            
            scroll事件、resize事件
                scroll事件在文档或文档元素滚动时触发,主要出现在用户拖动滚动条。
                resize事件在改变浏览器窗口大小时触发,发生在window、body、frameset对象上面。
            
            
            hashchange事件、popstate事件
                hashchange事件在URL的hash部分(即#号后面的部分,包括#号)发生变化时触发。如果老式浏览器不支持该属性,可以通过定期检查location.hash属性,模拟该事件。
                
                popstate事件在浏览器的history对象的当前记录发生显式切换时触发。注意,调用history.pushState()或history.replaceState(),并不会触发popstate事件。该事件只在用户在history记录之间显式切换时触发,比如鼠标点击“后退/前进”按钮,或者在脚本中调用
                
            cut事件、copy事件、paste事件
                这三个事件属于文本操作触发的事件。
                cut事件:在将选中的内容从文档中移除,加入剪贴板后触发。   
                copy事件:在选中的内容加入剪贴板后触发。   
                paste事件:在剪贴板内容被粘贴到文档后触发。
                
                这三个事件都有一个clipboardData只读属性。该属性存放剪贴的数据,是一个DataTransfer对象


            焦点事件
                焦点事件发生在Element节点和document对象上。
                    focus事件:Element节点获得焦点后触发,该事件不会冒泡。   
                    blur事件:Element节点失去焦点后触发,该事件不会冒泡。   
                    focusin事件:Element节点将要获得焦点时触发,发生在focus事件之前。该事件会冒泡。Firefox不支持该事件。   
                    focusout事件:Element节点将要失去焦点时触发,发生在blur事件之前。该事件会冒泡。Firefox不支持该事件。
                    
                    这四个事件的事件对象,带有target属性(返回事件的目标节点)和relatedTarget属性(返回一个Element节点)。对于focusin事件,relatedTarget属性表示失去焦点的节点;对于focusout事件,表示将要接受焦点的节点;对于focus和blur事件,该属性返回null。 
                    
                    由于focus和blur事件不会冒泡,只能在捕获阶段触发,所以addEventListener方法的第三个参数需要设为true。
            
            鼠标事件
                click
                contextmenu
                dbclick
                mousedown  mouseup
                mousemove
                mouseover mouseenter
                mouseout mouseleave
                
                MouseEvent 对象的属性
                   button buttons
                   clientX clientY
                   mousementX mouseentY
                   screenX screenY
                   pageX pageY
                   relatedTarget
                   
                鼠标滚轮事件 
                   mousewheel
            
            键盘事件
                keydown
                keyup
                keypress
                textinput  输入文本触发
                altKey属性:alt键  
                ctrlKey属性:key键  
                metaKey属性:Meta键(Mac键盘是一个四瓣的小花,Windows键盘是Windows键)  
                shiftKey属性:Shift键
            
            表单事件
                input propertychange
                change 
                select
                reset  //表单重置的时候触发
                submit //提交的时候触发
            
            触控事件
                TouchEvent
                Touch
                TouchList
                touchstart   //接触触摸屏开始触发
                touchend     //不在触摸触发
                changedTouches // 返回一个TouchList对象 包含所有不在触摸的触摸点
                touchmove   //移动触摸 触发
                touchcancel //触摸点取消触发
                touchenter  //触摸点击触发
                touchleave  //触摸离开触发
            
            进度事件
                进度事件用来描述一个事件进展的过程。比如XMLHttpRequest对象发出的HTTP请求的过程、<img>、<audio>、<video>、<style>、<link>加载外部资源的过程。下载和上传都会发生进度事件。    
                进度事件有以下几种:
                    abort事件:当进度事件被中止时触发。如果发生错误,导致进程中止,不会触发该事件。   
                    error事件:由于错误导致资源无法加载时触发。   
                    load事件:进度成功结束时触发。   
                    loadstart事件:进度开始时触发。   
                    loadend事件:进度停止时触发,发生顺序排在error事件\abort事件\load事件后面。   
                    progress事件:当操作处于进度之中,由传输的数据块不断触发。   
                    timeout事件:进度超过限时触发。
                   
            拖放事件
                拖放(Drag-and-Drop,DnD)是在“拖放源(drag source)”和“拖放目标(drop target)”之间传输数据的用户界面。
                <div draggable="true"> 此区域可拖拉 </div>
                
29. window对象
  29.1 计时器 
     setTimeOut() 和  setlterval()
  29.2 浏览器定位和导航
     location
  29.3 解析URL
     // 当前网址为 http://user:passwd@www.example.com:4097/path/a.html?x=111#part1location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1" 
        location.protocol // "http:" 
        location.host // "www.example.com:4097" 
        location.hostname // "www.example.com" 
        location.port // "4097" 
        location.pathname // "/path/a.html" 
        location.search // "?x=111" 
        location.hash // "#part1" 
        location.user // "user" 
        location.password // "passed"
  29.4 Location对象的方法:
        location.assign():使窗口载入并显示指定的URL中的文档。
        location.replace():和assign()方法类似,但它在载入新文档之前会从浏览历史中把当前文档删除。这样“后退”按钮就不会把浏览器带回到原始文档。
        location.reload():重新载入当前文档,可传入一个布尔值为参数,默认false。如果为true,则优先从服务器重新加载;否则优先从本地缓存中重新加载。
        当然,我们还有更直接跳转到新页面的方法:
        location = 'http://baidu.com';  
        //或者
        location.href = 'http://baidu.com';
  29.5 浏览历史
       History.back() // 移动到上一个访问的页面,等同于浏览器的后退键
       History.forward() // 移动到下一个访问页面,等同于浏览器的前进键
       Histroy.go()  //接受一个整数作为参数,移动到该整数指定的页面,比如go(1)相当于forward(),go(-1)相当于back(),go(0)相当于刷新页面
       History.pushState() 会改变referrer的值,而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值。referrer的值则是创建 XMLHttpRequest 对象时所处的窗口的URL
            state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。 
            title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。 
            url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

       history.replaceState():会修改当前历史记录条目而并非创建新的  
       
       history.state   返回当前页面的state对象
   29.6 浏览器和屏幕信息
       navigator.appName 浏览器的全程
       navigator.userAgent  返回标识浏览器的厂商和版本信息
       navigator.platform  返回用户操作系统的信息
       navigator.onLine   当前浏览器是否连接到网络
       navigator.geolocation 包含用户的地理位置
       navigator.cookieEnable 浏览器是否能存储cookie
       
30.Ajax
  30.1 HTTP  超文本传输协议
       HTTP 请求由4个部分组成
             1.HTTP请求方法或动作
             2.正在请求的URL
             3.一个可选的请求头集合,其中可能包括身份验证信息
             4.一个可选的请求主题
        服务器返回的HTTP响应包含三部分
            一个数字和文字组合成的状态码,用来显示请求的成功和失败
            一个响应头集合
            响应主体
        
        HTTP状态码
            200, OK,访问正常  
            301, Moved Permanently,永久移动  
            302, Move temporarily,暂时移动  
            304, Not Modified,未修改  
            307, Temporary Redirect,暂时重定向  
            401, Unauthorized,未授权  
            403, Forbidden,禁止访问  
            404, Not Found,未发现指定网址  
            500, Internal Server Error,服务器发生错误
        
        HTTP进度事件
            除了使用readystatechange事件来探测HTTP请求的完成外,在XHR2中,还定义了多个有用的事件。
            abort事件:当进度事件被中止时触发。如果发生错误,导致进程中止,不会触发该事件。  
            error事件:由于错误导致资源无法加载时触发。
            load事件:进度成功结束时触发。
            loadstart事件:进度开始时触发。
            loadend事件:进度停止时触发,发生顺序排在error事件\abort事件\load事件后面。
            progress事件:当操作处于进度之中,由传输的数据块不断触发。
            timeout事件:进度超过限时触发。
       
        HTTP请求无法完成有3种情况:
            请求超时,会触发timeout事件
            请求终止,会触发abort事件
            请求发生错误,会触发error事件
        
        同源策略(严格)
            协议相同
            域名相同
            端口相同
        不严格的同源策略
            使用Document对象的domain属性
                来自home.example.com的文档里的脚本要合法的读取developer.example.com载入的文档的属性(默认情况下是不允许的,会受到同源策略的限制
                document.domain = 'example.com';
            跨域资源共享
                Access-Control-Allow-Origin:*,//允许所有域名的脚本访问该资源。  
                Access-Control-Allow-Origin:http://www.example.com  //允许特定的域名访问。
            跨文档消息
                允许一个文档的脚本跨域传递文本消息到另一个文档里的脚本
        跨站脚本 XSS
            安全术语,攻击者跨域向目标web站点注入HTML标签或者脚本
            防止XSS攻击的方式时,在使用任何不可信的数据来动态的创建文档内容之前,从中移除HTML标签
            
31.正则表达式
    search():按照给定的正则表达式进行搜索,返回一个整数,表示第一个与之匹配的字符串的起始位置,如果找不到匹配的子串,将返回-1。
    match():返回一个数组,成员是所有匹配的子字符串。    
    replace():按照给定的正则表达式进行替换,返回替换后的字符串。  
    split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。
    RegExp对象
        RegExp()构造函数带有两个字符串参数,第二个参数是可选的,它指定正则表达式的修饰符(可传入修饰符g、i、m或者它们的组合);第一个参数包含正则表达式的主体部分,也就是正则表达式直接量中两条斜线之间的文本