js基础篇四

事件应用

1.
list document.getElementById();静态方法
list li document.getElementByTagName();动态方法

2.
btn.onclick = f1;
this触发事件的对象，有触发动作的就是触发对象，其他所有的都是window。

3.

getElementsByTagName最大特点就是它是动态的。还和ID的区别就是可以不用document
getElementById 只能由document调用因为id在页面中是唯一的。

例如：oUl.getElementsByTagName;

4.
div.innerHTML += '<input type="button" value="按钮">';
性能有问题，firfox直接崩溃

5.

div.innerHTML += '<input type="button" value="按钮">';
性能有问题，firfox直接崩溃
str += '<input type="button" value="按钮">';
div.innerHTML = str;
不与页面发生直接关系，直接一次性写入而不是每次写入，性能优化。

6.
    div3.onclick = function () {
        div3.style.cssText = 'width:100px;height:100px';
    };
    btn2.onclick = function () {
        div3.style.cssText = '';
    };
    还原CSSText相当于在js里面一个一个改变,将行内元素的样式变为没有，回到原来的状态。

面向对象

1.this指向,正常情况下函数内的this函数属于谁那么this就属于谁
(但是有 new 的情况下就不同了这时this指向new 出来的对象)

2.构造函数也就是类class

3.class          改变一类的样式     prototype
  行内样式       改变一个元素       给对象加方法             实例是没有原型的

Array.prototype.a = 12;
var arr = [1,2,3];
console.log(arr.a);    //12      样式表
arr.a = 5;
console.log(arr.a);   //5        行内样式(优先级高)
delete arr.a;
console.log(arr.a);   //12       行内样式删除

类              模具
对象(实例)      蛋糕

var arr = new Array();
Array类         不具备实际功能，只可以用来构造对象
arr对象         真正有功能的东西，被类构造出来的。
原型的重要的一个功能，给系统对象扩展。Array.prototype.sum = fun;

一个构造函数其实就是一个类。创建一个对象就是new 一个函数，date = new Date();Date()函数，即类
构造函数首字母大写

不一样的东西当做属性添加，而相同的东西用原型方法添加；

4.this出错的问题
  1.定时器：所有定时器里面函数都是指向window，
          var _this = this;
          setInterval(function () {
            _this.show();
        },1000);
  2.事件
      var _this = this;
      document.getElementById('btn1').onclick = function () {
        _this.show();
    };
解决办法:利用临时变量存储this     再嵌套一层函数

5.  构造对象的方法：1.构造函数   2.json方法
    优点：方便
    缺点：不能new实例，适合单一的一个对象。

6.将对象一层一层的嵌套起来，便于管理，这就叫  -- 命名空间
var Airfald = {};
Airfald.common = {...};
Airfald.common.main = {...};

7.Worker.prototype = Person.prototype;解决办法:通过复制
  (构造函数)继承属性，通过(原型继承)父类方法，这种写法相当于引用。影响了父类
        Person.call(this,name,sex);
        this.job = job;

        for (var x in Person.prototype) {
        Worker.prototype[x] = Person.prototype[x];
    }
    在这里的继承都是通过复制父类属性方法得到的。

8.console.log(xiaohong instanceof Worker);
  查看对象是否是某个类的实例

9.  Global Math.ceil()      不需要实例化就可以用 -- 静态对象 -- 内置对象
    Array            需要实例化new 出来才可以用  -- 非静态对象  -- 本地对象

HTML兼容性问题

<!-- inline-block
     IE6,7不支持inline-block;

     1.清除浮动：1.父级设置宽高(写死了)
                 2.父元素浮动(父级很多,无法居中等)
                 3.空div clear:both
                 (最小高度问题)在IE6下高度小于19px，被当做19px;所以空div可以看到；
                  解决：font-size = 0;
                        overflow：hidden

                 4.<br clear = "all">
                 5.父级overflow

                 6.父级:after {content:"";display:"block";clear:both;}
                    zoom:1;两者结合就没有问题
                 IE6,7不支持a那四个以外的伪类；
                 IE6,可以设置宽度不用清除浮动，或zoom：1(详细见hasLayout)


    建议：一个元素浮动要并在同一行的其他元素都要浮动。

    IE6双边距bug:
    (块)元素(有浮动时    属性类型inline-block)有横向的margin放大成了两倍
    解决办法：display:inline;

    IE6,7 li下本身不浮动内容浮动那么li下面多出几个px间隙;
    1.给li加浮动
    2.设置vertical-align:middle,top,bottom

    (不设置宽高显现出来)图片基线下面的空隙：vertical-align:top;

    vertical-align两个块要对齐则两个都要设置(例如：div1,div2中间对齐，这两个都要设置middle)
 -->

HTML兼容性二

1. right:0; bottom:0;absolute  滚动条移动会改变位置
                        fixed  滚动条移动不改变位置

2.IE6下不支持fixed，使用js结合使用进行兼容;

3.
不要给table,th,td以外的加样式(tbody,tr等等有兼容性的问题)；、

4.
table决定了真个表格的宽度,即使里面设置了宽高;
但是有内容的时候根据内容来决定你的宽高,设置比内容小的宽度没有用。
(表格每一列都加上宽度)
表格同一竖列继承最大的宽度。内容可以撑开表格宽度


5.表单
label元素;<label><input type="text" value="男"></label>(不兼容IE6)
          <input type="text" value="男" id="男"><label for="男"></label>(解决办法

6. <input type="file">各浏览器表现不一致无法兼容,flash进行操作

7.表单元素全都是inline-block,单选和多选表现不一致不一般不会设置宽高
select高度控制不怎么好。只会设置宽度，漂亮的用模拟实现。
textarea宽高不能拉伸resize = 'none';默认滚动条去除overflow：auto;
outline去掉焦点线；


8.解决input背景滚动的方法,在input外层加上一个div,input没有边框和背景。