DOM操作(四)

Apr 6, 2017


动态创建表格

BOM

window对象

open()

window.open(url,target,param) url 要打开的地址 target新窗口的位置 _blank _self _parent(父框架) param 新窗口的一些设置

win = window.open(“01-window.html”,”_black”,”width=200,height=200,top=100,left=100”); window = object.open([URL ][, name ][, features ][, replace]]]]) URL:新窗口的URL地址 name:新窗口的名称,可以为空 featurse:属性控制字符串,在此控制窗口的各种属性,属性之间以逗号隔开。 fullscreen= { yes/no/1/0 } 是否全屏,默认no channelmode= { yes/no/1/0 } 是否显示频道栏,默认no toolbar= { yes/no/1/0 } 是否显示工具条,默认no location= { yes/no/1/0 } 是否显示地址栏,默认no directories = { yes/no/1/0 } 是否显示转向按钮,默认no status= { yes/no/1/0 } 是否显示窗口状态条,默认no menubar= { yes/no/1/0 } 是否显示菜单,默认no scrollbars= { yes/no/1/0 } 是否显示滚动条,默认yes resizable= { yes/no/1/0 } 是否窗口可调整大小,默认no width=number 窗口宽度(像素单位) height=number 窗口高度(像素单位) top=number 窗口离屏幕顶部距离(像素单位) left=number 窗口离屏幕左边距离(像素单位)

close()

window.close()

moveTo()和moveBy()

在新窗口打开页面时,移动新页面的相对位置,参考位置是电脑屏幕

resizeTo()和resizeBy()
location对象

location相当于浏览器地址栏 可以将url解析成独立的片段

location对象的 属性 href hash 返回url中#后面的内容,包含# host 主机名,包括端口 hostname 主机名 pathname url中的路径部分 protocol 协议 一般是http、https search 查询字符串

location对象的 方法 location.assign() 改变浏览器地址栏的地址,并记录到历史中 设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转 location.replace() 替换浏览器地址栏的地址,不会记录到历史中 location.reload() 重新加载

可以获取客户端的一些信息 userAgent 浏览器版本内核等信息 platform 浏览器支持的系统

history对象

历史记录管理

后退(注意,如果在新窗口打开页面,该方法失效) history.back() history.go(-1) 0是刷新

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

定时器

循环执行(等待时间过去之后执行) var timerId = setInterval(code,interval); clearInterval(timerId); 间隔时间执行,不是特别精确

定时执行(立刻执行) var timerId = setTimeout(code,interval); clearTimeout(timerId);

事件绑定

  1. on事件名称=function(){}事件绑定的方法容易被覆盖。
  2. addEventListener(“事件名称”,function(){})事件监听器。原事件被执行的时候,后面绑定的事件照样被执行 事件监听原理
    //原理(了解)(自己封装一个)(click)
    function fn(str,fn,ele){
     //判断位置要注意:如果进入绑定事件本身,那么该事件已经被绑定了
     //所以获取旧的事件必须在新的事件绑定之前
     var oldEvent = ele["on"+str];
     ele["on"+str] = function () {
         //不能直接执行函数,因为我们还不知道以前有没有绑定我同样的事件
         //进行判断,如果以前有过绑定事件,那么把以前的执行完毕在执行现在的事件,如果没有就直接执行
         //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
         //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
         if(oldEvent){
             //因为oldEvent本身他就是函数本身,那么后面加一个();就是执行函数
             oldEvent();
             fn();
         }else{
             //没有绑定过事件
             fn();
         }
     }
    }
    

火狐谷歌IE9+支持addEventListener IE678支持attachEvent

//兼容写法
EventListen = {
    addEvent: function (ele,fn,str) {
        //通过判断调用的方式兼容IE678
        //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
        if(ele.addEventListener){
            //直接调用
            ele.addEventListener(str,fn);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+str,fn);
        }else{
            //在addEventListener和attachEvent都不存在的情况下,用此代码
            ele["on"+str] = fn;
        }
    }
}
EventListen.addEvent(btn,fn1,"click") 

事件解绑的兼容性写法:

EventListen = {
    addEvent: function (ele,fn,str) {
        //通过判断调用的方式兼容IE678
        //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
        if(ele.addEventListener){
            //直接调用
            ele.addEventListener(str,fn);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+str,fn);
        }else{
            //在addEventListener和attachEvent都不存在的情况下,用此代码
            ele["on"+str] = fn;
        }
    },
    removeEvent: function (ele,fn,str) {
        if(ele.removeEventListener){
            ele.removeEventListener(str,fn);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+str,fn);
        }else{
            ele["on"+str] = null;
        }
    }
}

addEventListener和attachEvent区别:

  • 事件名称的区别 addEventLisener中第一个参数type是click、load,不带on attachEvent中一个参数type是onclick、onload
  • this的区别 addEventLisener:事件处理程序会在当前对象的作用域运行,因此,时间处理程序的this就是当前对象 attachEvent:事件处理程序是在全局作用域下运行因此this就是window。