javascriptDom笔记(四)

回顾:
1. 添加和删除：
  添加一个元素:3步:
   var elem=
document.createElement("标签名");
   elem.xxx=值;
   parent.appendChild(elem);
         .insertBefore(elem,oldElem);
         .replaceChild(elem,oldElem);
  同时添加多个平级元素: 
   var frag=
    document.createDocumentFragment();
   frag.appendChild(child);
   parent.appendChild(frag);
  移除: parent.removeChild(child);
2. HTML DOM:
  1. Image: var img=new Image();
  2. Select/Option:
     事件:onchange
     属性:.selectedIndex
          .value
          .length
          .options
     方法:.add(opt);
          .remove(i);
  3. Table/行分组/tr/td
    逐级管理：
     table: .createTHead/TBody/TFoot()
            .deleteTHead/TFoot()
            .tHead/tFoot/tBodies[i]
     行分组: .insertRow(i);
             .deleteRow(i);
             .rows
     tr: .insertCell(i);
         .deleteCell(i);
         .cells


    table->tr: .insertRow(i);
               .deleteRow(i);
               .rows;
     tr.rowIndex
  
  4.Form:
    获取: 
     var form=
       document.forms[i/id/name];
     属性: .length
     方法: .submit();
    获取元素:
       form.elements[i/id/name]
       form.name
     方法: .focus();
           .blur();
    
正课:
1. BOM:
  1.打开和关闭窗口:
  2.窗口大小和窗口定位(了解):
  3.*****定时器:


什么是BOM:专门操作浏览器窗口的API
    没有标准
  DHTML模型:
  window:2个角色: 1. 全局作用域
                  2. 当前打开的窗口
    history: 管url历史记录，管前进后退
    navigator: 管浏览器的配置信息
    location: 管地址栏
    document: 管网页内容——DOM
    screen: 管当前显示器
    event: 管事件绑定，事件触发


window 窗口
1.打开和关闭窗口:
  总结:打开超链接的方式: 
   1. 在当前窗口打开，可后退
     html: <a href="url">...</a>
     js:window.open("url","_self");
   2. 在当前窗口打开，不可后退
     js: location.replace("url");
   3. 在新窗口打开，可同时打开多个
     html: <a href="url" target="_blank">
     js:open("url","_blank");
       其实_blank可省略
   4. 在新窗口打开，只能打开一个
     html: <a href="url" target="?">
     js:open("url","name");
     其实,每个window在内存中都有一个唯一的name属性值。
      浏览器规定，相同name属性值的窗口只能打开一个。
       其实html中的target和js open中的第二个参数，都是name属性
       只不过: name属性有预设：
        _self _blank
   补: var pop=open("url","name",config)
     config: 配置打开新窗口的大小和位置
         "属性=值,..."
     open方法会返回打开的新窗口对象
       pop其实就是新窗口的window

     

正课:
1. *****定时器: 
 
1. 周期性定时器:
 让程序按照指定的时间间隔反复执行同一任务
 何时使用: 只要不需要用户干预，即可自动反复执行任务时。
 如何使用: 3件事:
  1. 一项任务: 函数
     只规定了动画中，每一步执行的操作
  2. 启动定时器: 
    var timer=setInterval(fn,interval);
  3. 停止定时器:
    clearInterval(timer);
    timer=null;
    timer: 定时器的序号！
     从1开始，连续不重复的数字
    如何停止：
     1. 用户手动停止: 
     2. 都要在任务行数内设计自动停止机制:


2. 一次性定时器: 
  让程序先等待一段时间间隔，然后自动执行一次，自动停止。
  用法：同周期性: 3件事儿
   1. 任务函数: 
   2.启动定时器:
    var timer=setTimeout(fn,wait);
    wait: 等待的毫秒数
   3. 停止定时器:
    clearTimeout(timer);
    timer=null;


  定时器原理: 
    setXXX(fn,ms)
     向定时器中添加一项任务: fn,ms
    定时器会根据ms的间隔，自动调用fn:
      先将fn加入回调队列callback queue等
      等到主程序(ECS)中最后一条语句执行完，才能从callback queue中进入ECS执行。
      
  鄙视题: 
    for(var i=0;i<3;i++){
      setTimeout("console.log(i)",0);
    }//i=3
    //3 3 3
    //3 console自动输出最后一条语句的执行结果


  关于回调函数: 2种:
   1. 事件处理函数就是一种回调函数：
     elem.click(); //this->elem
      var me=this;//留住this
      elem.οnclick=function(){
this->elem ; me->obj
      };
   2. 放入定时器中的任务函数
     fn(); //this->window
     setxxx(fn.bind(obj),ms)

2. 窗口大小和窗口定位: 
  窗口大小: 
   整体大小: outerWidth/Height
   文档显示区大小:innerWidth/Height
  设置: （了解）
    resizeTo(width,height);
    resizeBy(width增量,height增量)
   强调: 不能自己修改自己的大小
  窗口定位: 
   screenLeft,screenTop
   设置: 
    moveTo(left,top)
    moveBy(left的增量,top的增量)
  屏幕大小:
   屏幕总大小: screen.width/height
   屏幕可用大小: screen.availWidth/Height