前端基础知识笔记

www.zhangxinxu.com
www.caniuse.com
1: html: 显示的内容。
3: js: 交互。
4: DOCTYPE: document type 文档类型。
5: 选择器：
标签选择器：1；
Class类选择器；10
Id选择器：100（权重值可以叠加，但只要有id选择器，就以id选择器为准）；
分组选择器：
子代选择器：>
内联选择器：1000
后代选择器：
!Important:
伪类选择器：:hover
:hover 选择器用于选择鼠标指针浮动在上面的元素。hover 选择器可用于所有元素，不只是链接。但是IE6下只支持给a加hover.
6:基本型放栈内存，引用型放堆内存。
7:w3school标准盒模型中高度宽度是元素的高度和宽度。
8：如果一对父子元素，给子元素赋上外边距，父元素会和子元素一起往下掉
解决方法：给父元素设置overflow：hidden。
9：两个兄弟元素 分别设置marign-top和marign-bottom，两者之间距离取最大的那个。
10：custor:pointer;鼠标放上变成小手。
11: onselectstart:return false取消双击选中等。
12.childNodes在谷歌浏览器既能获取到文本节点，也能获取到元素节点，而IE8之前只能获取到元素节点
文本节点：nodeType=3； 元素节点：nodeType=1.
属性： 2 注释：8
children获取的是亲子代。
13.this.nextSibling:它的兄弟点。 this.nextElementSibling：它的下一个元素节点。
找兄弟
function next(elem){
do{
elem=elem.nextSibling;
}while(elem && elem.nodeType==!1)
return elem;
}
14.=:赋值。==：判断是否成立即值相等。===：全等，值和类型都相等。
15.　float: left|right; 可以自动排列自动折行, 但需要clear（这里我们习惯用overflow：hidden）来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative; 要配合top,left等定位;

　　position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。
其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。

　　float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。

　　display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果
(3)值=0表示全透明，值=1表示不透明；
16. z-index:改变已经定位的层叠顺序。值越大表示浮在最上。只有定位的元素才能加zindex。
17.定位：固定定位-position：fixed；
relative：相对于元素的初始位置定位；
absolute：相对已经定位的最近的祖先元素；
fixed：相对于浏览器定位；固定定位 相对与浏览器 比如说页面上的小广告滑动滚动条也不跟着走的小广告 但ie6不支持
ie6要获取滚动条的高度
Static：初始位置；
块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。
2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。
特殊情况：
● Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
● IE7下会附加到父元素的末尾。
● 应用了position: relative/absolute的元素，margin属性仍然有效，以position:relative来举例。如果设置了left、top、bottom、right的属性，建议大家不要设置margin数据，因为很难精确元素的定位，尽量减少干扰因素
● position: absolute忽略根元素的padding。
● 在IE6/7中设置position属性后会导致z-index属性失效
● 行内元素在应用了position：absolute之后会改变display，display属性由inline变成了block因此，要注意到relative是并没有改变行内元素的呈现模式，而absolute是会改变行内元素的呈现模式，如果设置了absolute并不需要显式的的将元素display改成block
● 应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置成-1。
● 在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：
● 会改变行内元素的呈现模式，使display之变更为block。
● 会让元素脱离普通流，不占据空间。
● 默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变
18.div2相对于父级div1居中方法
top值和left值设为50%margin-left : -的宽度的一半 margin-top:-的高度的一半。
右 下 为正轴；
19.JS数据类型：
（1）：基本类型：number,string,boolean,undefined,null
(2):引用类型（对象类型）：
1，内置对象
2，自定义对象
3.DOM对象
定义一个对象：var obj=New object();
20.类型（typeOf）null:object. 获取对象时，对象并不存在
undefined : undefined，定义了没赋值
console.log(typeof a)或者console.log(typeof(a));
21.定时器timer返回number型；
22.setTimeout（它只等待一段时间执行一次就停止）很特殊 因为setTimeout(function(),0)会使它跳出队列 最后执行
setTimeout(function(){
console.log(1);
},0);
console.log(2);
console.log(3);
输出：
2
3
1
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
},0);
}
输出4
4
4
23.给行级元素设置外边距 只能设置左右 不能设置上下。内边距上下左右都可以设置。
24.offset：
1.offsetLeft：取离该元素最近的已经定位的祖先元素的距离；
2.offTop:取离该元素最近的已经定位的祖先元素的距离；
3.offwidth:取离该元素最近的已经定位的祖先元素的距离；包括内容 边框 内边距，不包括外边距。
4.offheight:取离该元素最近的已经定位的祖先元素的距离；
5.offparent:取离该元素最近的已经定位的祖先元素；
25.复制一个元素：例：var newNode = aImg[0].cloneNode();
oImgs.appendChild(newNode);
26.获取滚动条高度：var scrollTop = document.documentElement.scrollTop || document.body.scrollTop；
27. 行级元素设置内外边距时，外边距只能设置左右边距，不能设置上下边距；内边距上下左右都可设置 ；
28. .style.left只能赋值不能获取，并且有单位，offsetLeft只能获取，不能赋值，无单位
29.透明度：（1）opacity:0.8;兼容性问题，ie不支持;
（2）filter：alpha（opacity=80）;这两句话都得写
(3)值=0表示全透明，值=1表示不透明；
30.gbk： 汉字 ； gb2312：简体中文 ； utf-8：所有编码集
31.class的属性中，无论类名的顺序“sale important”还是“important sale”都会匹配该元素
32.animate函数：（对象，属性，回调函数）
33.innerHTML :对象.innerHTML取的是对象的HTML内容
基本数据类型存在栈里 对象即引用类型 存在堆里
34.形参和实参：var bb = function(){} bb()这样设定参数必须先声明后调用
bb(); function b(){}； 可以这样
当实参多形参少时可以通过arguments[]来获得实参
当实参少形参多时控制台输出时其他的是undefined
35.只有0，空字符串，null，undefined返回false，其他的都返回true
36.e = e || window.event，能力检测，只要遇到e就这么写，否则会出现兼容性问题，但是e可以换成a之类的，只是个形参。e指event，是一个对象，ie9之前只认识后者，标准浏览器认识和ie9及之后也认识e ，event会涉及到很多兼容性问题（逢考必问）
37.document.documentElement是获取浏览器的值document.documentElement.clientWidth是获取浏览器的高度
38.return false 阻止默认行为
39.e.clientX算的是鼠标当前位置到浏览器左边的距离，e.clientY算的是鼠标当前到浏览器上边缘的距离
40.行级元素居中，把他当成文字去处理，text-align：center，块级元素居中，margin： 0 auto；
41.script写在body里面可以保证dom结构加载完，但是没有办法保证资源加载完，而把script写在head里面的window.onload里面不仅可以把dom结构加载完，还可以保证图片等资源加载完，但是相对较慢，所以一般选择前者
42.在界面输出用document.write()，在控制台输出的时候才用console.log();
43.arr.sort()是按字典序排序的，如果想按照其他顺序进行排序，那么sort里面需要传一个参数，这个参数是一个function，arr.sort(function(a,b){return a-b;})是升序，b-a是降序
44.DATE里面的东西大多都是从0开始的
45.Math.random()的取值范围是[0,1);
string:
46.indexOf()判断当前字符串第一次出现的位置，经常用来看是否出现了这个字符串，没有出现就是-1
47.substring 一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
var str=”Hello world!”
document.write(str.substring(3,7))

输出：lo w
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。
48.substr() 的参数指定的是子串的开始位置和长度
var str=”Hello world!”
document.write(str.substr(3,7))
输出：lo worl
49.charAt(index),index表示字符串中某个位置的数字，即字符在字符串中的下标。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

var str="Hello world!"document.write(str.charAt(1))

输出e
50.split var str=”How are you doing today?”
document.write(str.split(” “,3))

How,are,you
“|a|b|c”.split(“|”) //将返回[“”, “a”, “b”, “c”]

51.concat表示把str1和str2两个字符串相连吗，(str1.concat(str2))

52.navigator.userAgent用来获取浏览器的信息，就是具体是哪个浏览器
53.getelementsbyTagname等获取的都是节点列表，并不是数组，有时候可以当做数组来用，但是不能用数组的一些函数，比如说pop等
54.并不是点谁谁就是事件源
获取事件源：
var target = e.target || window.event.srcElement;
事件委托或者事件代理： 把子元素的事件绑定到父元素上
aLi = oUl.children;
oUl.onclick = function(e){
var target = e.target || window.event.srcElement;
console.log(target.innerHTML);
}
55.a.onclick=function(){};不存在兼容性问题，但是只有冒泡，没有捕获
a.addEventListener(“click”,function(){}，false);有捕获也有冒泡，但是不兼容IE6，7，8
a.attachEvent(“onclick”,function(){});支持IE的老版本
oDiv1 .onclick =function(){
alert(“div1”);
}
oDiv1 . onclick =function(){
alert(“123”);
}
输出123，类似于赋值。

先捕获后冒泡

事件冒泡：第三个参数是false，
oDiv1.addEventListener(“click”,function(){alert(1);}，false);
oDiv2.addEventListener(“click”,function(){alert(2);}，false);
输出是 2 1

事件捕获：第三个参数是true，
oDiv1.addEventListener(“click”,function(){alert(1);}，true);
oDiv2.addEventListener(“click”,function(){alert(2);}，true);

oDiv1.addEventListener(“click”,function(){alert(1);}，false);
oDiv2.addEventListener(“click”,function(){alert(2);}，true);
oDiv3.addEventListener(“click”,function(){alert(3);}，false);
输出2 3 1

oDiv1.addEventListener(“click”,function(){alert(1);});
oDiv2.addEventListener(“click”,function(){alert(2);});
输出1 2，但是早期IE不支持，谷歌支持

oDiv1.attachEvent(“onclick”,function(){alert(3);});
oDiv2.attachEvent(“onclick”,function(){alert(4);});
输出4，3顺序和谷歌的相反，但是谷歌的不支持,而且把this搞丢了，变成了window，只支持事件冒泡，不支持事件捕获

标准浏览器阻止事件冒泡：e.stopPropagation();
IE浏览器阻止事件冒泡：e.cancelBubble=“true”（不是w3c标准浏览器）

56.事件是存在的，不绑定事件也是存在的
57.放大镜：
如果不加mask：
oSmallBox.onmouseover鼠标先移到图片上
oSmallBox.onmouseout，然后生成小块，从图片移到小块上
oFloat.onmouseover
oSmallBox.onmouseover，然后事件冒泡
58.if是判断值，而且是一个区间，而switch只能判断一个点，而且不仅判断值还判断类型，相当于===
59.prompt获得的是一个string型的
60.parseInt(“a”,16)，第二个参数代表进制，默认是10，tostring（10）里面的参数也是进制
61.函数立即调用：没有函数名
var a=5;
（function(xx){
console.log(xx);
}）(a);
62.怎么判断是不是数组？
a instanceof Array
instanceof 返回的是true或者false，判断是不是某种类型
而typeof 返回的是某种数据类型
63.字符串运算的时候，当是加法的时候，按照字符串去操作，当遇到减乘除的时候，是能运算先运算。
64.局部变量在函数中处处都有定义
例：var foo = 1；
function aa(){
console.log(foo);
var foo = 2;
console.log(foo);
}
aa();
输出的是 undefined （这里不输出1，相当于在里面也定义了foo只是没赋值，如果下面没有var foo=2的话，那么应该是输出1的）
2
65.w3c标准下的盒模型指的是内容的高度宽度之类的。
66如果是变量，用对象[]属性，如果是定值，用对象.属性
67.var a=b=3；相当于var a=3；b=3；如果在函数里面的话a是局部变量的赋值，而对于b是全局变量的赋值
68.实现页面两列布局,要求左侧固定宽度200px，右侧根据屏幕宽度自适应。（写出能想到的所有实现方法）
第一种：float
第二种：position

开启怪异盒模型的方式是去掉
怪异盒模型：高度宽度指的是内容+border+padding
w3c标准下的盒模型指的是内容
这两者和offsetwidth无关，offsetwidth取到的永远都是内容+border+padding
eg:width：200px；
padding：10px；
border：10px；
当输出offsetWidth的时候，怪异盒模型在IE6输出200，chorme输出240，w3c标准下的盒模型输出240

弹性盒模型
父元素：box，display：box（5种都需要写）
子元素：bos-flex，占父元素的份数，去分父元素的剩余空间，而不是整个的父元素的空间，flex是大于1的整数

box-align：垂直方向上的位置
box-pack：水平方向上的位置

找上一级的文件用../,同级文件直接找

两个图片之间有空白可能是因为有空格，然后用float可以消除，这些图片显示在同一层，并不一定是float的功劳，很有可能是父元素很宽，然后图片很窄，因为img是行级元素，所以这些图片会显示在一行

外边框有几个问题：(这是一个bug，因为当块级元素变成一行的 会浮动或者定位，就会破坏当前这个环境，所以不在我们 当前讨论的范围之内)
1.当两个元素是兄弟关系的时候，如果我给上面的元素设置margin-bottom，给下面的元素设置margin-top，他们两个的外边框会合并，取的值是二者最大值；当二者的关系是父子关系是，给里面的元素设置margin-top，父元素会跟着一起掉下去，想消除的话，给父亲加overflow：hidden

图片的预加载：new一个img，然后先onload事件。然后获取一个src。
IE6，7,8下只能先onload事件，然后再对src进行操作
只要有src，就可以用onload事件

document.documentElement获取的是html
document.body获取的是body

元素一定位之后，它的宽高就不再是自适应，而是内容撑开的了

让元素看不见的方法
display：none是从dom元素里面消失了，不占着位置，绑定事件没用
opacity：0是透明度变成0了，但是还占着位置，事件也能绑定上
visibility：hidden占着位置，事件绑定不上

未完待续