javascirpt 进一步的了解

泡泡同学上一篇文章分享的JS的基本知识，这一篇分享一点js中级一点的知识，希望对你有帮助

一、window对象
    1、位置
      screenX       相对屏幕X坐标的位置
      screenY       相对屏幕Y坐标的位置
      screenleft    IE浏览器支持
      screentop     IE浏览器支持
    2、窗口大小
       innerWidth   显示区域的宽度
       innerHeight  显示区域的高度
       document.document.Elerent.client.weidth    IE浏览器支持
       document.document.Elerent.client.weidth    IE浏览器支持
    3、window对象的方法
       窗体的移动和尺寸
       Windows.moveBy(x,y)     相对浏览器当前坐标把窗口移动
       Windows.moveTo(x,y)     相对浏览器坐标把窗口左上角
       scrollBy(x,y)           
       scrollTo(x,y)           移动到固定位置
    4、时间隔函数
       window.setInterval(code,time)    按周期固定调用，循环执行，code指函数名称，time值时间，单位毫秒
       window.setTimeout(code,time)     按时间只执行一次
       window.clearInterval(time)       清除对象   time指返回的值
二、history对象
    history.back()     后退  相当于 history.go(-1)
    history.forward()  前进  相当于 history.go(1)
    go(number)
    注意：这个针对的是访问过后的网页
三、Loction对象
    1、属性
       href      URL的地址
       hostname  主机名（ip地址）
       port      端口的名字
       pathname  相对于项目的相对路径
       search    返回一个URL查询部分
       eg:console.log(location.href)
    2、方法
       assign(url)   跳转到一个页面
       reload()       用于刷新当前文档，整个页面的刷新
       replace()      跳转页面，不存在页面历史
       eg:location.assign(url)
     
四、screen
    window.screen.availwidth    返回屏幕的宽度
    window.screen.availheight   返回屏幕的高度
    width   height              整个屏幕的高和宽
    eg:console.log(window.screen.availwidth)

document对象

一、属性
      1、document.title             返回title元素内的值
    2、document.URL               返回url地址
    3、document.bgColor           设置背景颜色
    4、document.fgColor           设置前景色
二、方法 
       1、document.getElemenById()       根据id查找元素
    2、document.getAlemenTaName()     返回的是一个集合，具备数组的属性
    3、document.getAlemenTaName(“*”)  找到所有的元素
    4、document.getElementByName()    返回某个name属性值得元素，iE中不能使用
    5、document.getElementByClassName()  找到选择器为calss,的元素
三、对象集合
    1、document.all  所有对象的集合，只针对IE，其他浏览器不能用，常用来做判读兼容问题
    2、forms (表单集合)
       document.forms.length（表单的长度）
    3、获取表单的方法
       （1）下标的方式
        eg: document.forms[0]
       (2)直接通过form表单中name属相的值
        eg:document.forms.[form1]
       (3)直接写写出form表单中name属相的值
        eg:document.forms1
    例如：console.log(document.form1.name1[0].value)

         获取到名为form1表单中第一个出现name值为name1的value的值
四、操作元素内容
     1、返回所有元素的内容，包含标签
       innerHTML
       eg: var div1= document.getElementByClassName("div1");
           coonsole.log(div1.innerHTML);
     2、返回文本的内容，不包含标签
       （1）innerText     不适用于火狐
       （2）textContent   不适用于IE
五、行内样式操作
    1、eg：div.style.width="100px";
    2、onmousover   鼠标进去事件
    3、onmousout    鼠标移除事件
六、css层叠样式   
      1、批量修改样式
      直接换calssName和id名，不推荐用id
    2、document.stylesheet[].rules[].style.width
     注释：document.stylesheet[]；表示找到文档中的指定的style样式，通过下标的方式来找。
          火狐不支持：rules[]；找选择器，把css中写的样式也看做一个数组，通多数组找到每一个css样式
          IE不支持：cssRules[]；
    3、添加
     eg:IE不支持：document.stylesheet[0].inserRule(".one{width:100px;heigth:100px;},2)
                 document.stylesheet[0].addRule(".one{width:100px;heigth:100px;},2)
     注释：在第一个style中，在css第三个位置中为选择器class=one的内容加上高和宽
    4、删除
      eg: document.stylesheet[0].deleleRule[2];  [2]代表css中设置样式的位置；
          document.stylesheet[0].removeRule[2] 
七、获取最终的样式
     var div1 = document.getElementByClassName("div1");
     alert(window.getComputedStyle(div1, null).width);针对谷歌和IE
     alert(div1.currentStyle.width); 针对火狐
八、获取元素的尺寸    
      (1)返回的长和宽包含：content+padding
        console.log(div1.clientWidth + " " +div1.clientHeight);
     (2)返回的长和宽包含：content+padding+border
        console.log(civ1.offsetWidth + " " + div1.offsetHeight);

一、事件绑定
    1、脚本绑定事件
    例如： btn.onclick= function () {
                    alert(1);           
                 };
    2、 监听器的方式
       function fu(){
            alert(1);
        }
     btn.onclick =fu;
二、添加和删除
      1、在IE中的添加和删除
     （1）element.attachEvent(event,fuction)；//添加
          eg:btn.attachEvent("onclick",fu)
          注释：在btn点击的时候添加调用fu函数
     （2）element.attachEvent(event,fuction);//删除
    2、在chorme和FF中的天添加个删除
     （1）element.addEventListener(event,fuction;userCapture)；//添加
          eg:btn.attachEvent("click",fu,null)//注释在chorme和FF中，事件的写法
           注释：在btn点击的时候添加调用fu函数
     （2）element.removeEventListener(event,fuction;userCapture)//删除
三、事件对象
    1、事件源对象（event）    
      var e1 = e || window.event;//兼容问题的解决
四、event对象的属性
    1、鼠标事件
    （1）相对于浏览器位置
         event.clientX   水平坐标
         event.clientY   垂直坐标
    （2）相对于屏幕的位置
          event.screenX
         event.screenY
    （3）相对于事件源本身位置
         event.offsetX  
         event.offsetY 
         event. layerX //针对FF
         event. layerY  
    2、键盘事件
    （1）keyCode 获取键盘按键值得值
    （2）altkey  判定事件发生时，    alt键是否被按下
    （3）shiftkey
     (4)ctrlkey
五、type属性
     event.type
      当多个事件都绑定在一个函数，用type判断用的是哪一个事件

事件流
    定义：当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定的顺序相应该元素的触发事件，
    事件传播的顺序，叫事件流。
冒泡型事件
     1、什么叫冒泡型事件
      所有的浏览都支持，由明确的事件源到最不确定的事件源依向上触发。。
      2、触发顺序：（由内部到外部触发）
        div（onclick）--→ body-→html-→document→window
     3、触发器的方式：
      child.addEventListener("click", function(),false)
捕获型事件（需要运用触发器的方式，IE不支持） 
    1、什么叫捕获型事件
    （IE不支持）不确定的事件源到明确的事件源依次向下触发。
    2、触发顺序：（从外部到内部）
        window-→ document--→html-→body-→div（onclick）
    3、触发器的方式：
      child.addEventListener("click", function(), true)
阻止事件流
    IE:event.cancelBubble=true;
    FF:event.stopPropagation();
事件委托
    IE：event.srcElement
    FF:event.target
    解释：事件绑定在父级元素上，点击那个子元素就是哪个子元素。