js基础篇四

事件应用

1.list document.getElementById();静态方法list li document.getElementByTagName();动态方法2.btn.onclick = f1;this触发事件的对象，有触发动作的就是触发对象，其他所有的都是window。3.getElementsByTagName最大特点就是它是动态的。还和ID的区别就是可以不用documentgetElementById 只能由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.构造函数也就是类class3.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没有边框和背景。