7月22号上课内容

第一节课:

  • 1 event 对象兼容性

     1) 对于兼容性,注意event ||  window.event;
     2) 区分target,currentTarget 、 IE 的srcElement,toElement 
    
             var target = e.target || e.srcElement
     3) 取消默认动作
           e.preventDefault(). e.returnValue = false;
     4) x,y 与 clientX,clientY的区别
    
     5) mouseover 与mouseenter的区别 
    
  • 2 dialog 弹层的基本实现

2 第二节课:

  • BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

    1 window
    2 history, history.back(),history.go(),;注意对应的pushState 
    3 window.location / hostname, pathname,port,protocal,href, hash,reload()
    4 window.navigator 做浏览器检测
    5 confirm,prompt, alert
    6 window.name
    7 getCompultedStyle(http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/)
    
  • 1 window对象讲解

     1) window.document
     2) window 尺寸
          对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
    
        * window.innerHeight - 浏览器窗口的内部高度
        * window.innerWidth - 浏览器窗口的内部宽度
    
  • 对于 Internet Explorer 8、7、6、5:

    * document.documentElement.clientHeight
    * document.documentElement.clientWidth
    
  • 或者

    * document.body.clientHeight
    * document.body.clientWidth
    
      var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
    
  • 3) window 方法

    * window.open() - 打开新窗口
    * window.close() - 关闭当前窗口
    * window.moveTo() - 移动当前窗口
    * window.resizeTo() - 调整当前窗口的尺寸
    * window.scrollTo/window.scrollBy
    
  • 实用的 JavaScript 方案(涵盖所有浏览器

cookie

Cookies 是一些数据, 存储于你电脑上的文本文件中。存储的数据量少为4k。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies
cookie的domain,过期时间等设置



重点:

       1) 区分cookie 和 session
       2) 获取窗口的大小和宽高度