JS学习：第二周——NO.3盒子模型

1.CSS盒子模型包括四个部分组成：设定的宽高+padding+border+margin；

2.JS盒子模型：通过系统提供的属性和方法，来获取当前元素的样式值

  JS提供的属性和方法：

1. client系列：clientWidth，clientHeight，clientLeft，clientTop；
2. offset系列： offsetWidth，offsetHeight，offsetLeft，offsetTop，offsetParent
3. scroll系列：scrollWidth，scrollHeight，scrollLeft，scrollTop

3.关于父级

 1）parentNode  结构父级

 2）offsetParent  定位父级

4.JS提供的属性和方法：

1）clientWidth/clientHeight：元素设定的宽/高+左右padding值/上下padding值；

      clientLeft/clientTop：代表对应左边框/上边框的宽度；

     **跟内容是否溢出无关；

2）offsetWidth:clientWidth/clientHight+左右border/上下border；

     offsetLeft：当前元素的外边框距离定位父级内边框的距离；

    **跟内容是否溢出无关；

3）scrollHeight：：

      跟内容是否溢出有关

     内容溢出：约等于上padding+真实内容的高度；

     内容没溢出：等于clientWidth或clientHeight；

      为什么是约等于？

      ①不同浏览器中，拿到的scrollHeight值是不同的；

      ②同一浏览器是否溢出隐藏，拿到的值不同；

5.关于JS盒子模型的一些问题

1）通过JS的属性和方法拿到的都是属性的复合 样式，拿不到单独的值；getCss;

2）拿到的复合样式值都是整数，不会出现小数；

3）offsetLeft只能求出当前元素的外边框距离定位元素父级的内边框之间的距离，但是求出与定位元素距离body的距离；—offset{left,top}

4)JS盒子模型的兼容性存在问题；—clientWidth,scrollHeight__—win

6.关于浏览器的常用兼容处理思想

 ①思想一，属性值的判断：

• attr in window
• obj.attr
• typeOf obj.attr==‘function'

②思想二，浏览器异常捕获：try{……}  catch(e){……}  finally{……}

③思想三，通过浏览器判断处理浏览器兼容问题；

     var reg=/MSTE (6|7|8)/g;

• reg.test(window.navigator.userAgent);//true:IE678;
• window.navigator.userAgent.match(reg );true —>ie678
• window.navigator.userAgent.search(reg); !==-1—>ie678

7.结构父级中最大的是HTML；定位父级中最大的元素是body；

8.this的用法

1）当前元素被触发的时候，会调用一个函数，函数中的this指向当前这个元素；

2）函数被调用的时候，点前面是谁，this就是谁

3）自执行函数中的this，window；

4）构造函数中的this是实例；

5）回调函数中的this默认是window；

6）call可以改变this指向

9.类和实例

//给类添加私有属性，跟实例没有任何关系；
//实例：可以使用自己的私有属性和方法，也可以使用原型上的公有方法，但实例无法使用类的私有属性和方法；
function Fn(){

    this.aa=123;//给实例添加私有属性；
}
Fn.aa=456;//给类添加私有属性；
var f=new Fn();
alert(f.aa);
alert(Fn.aa)