前端基础知识笔记

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占着位置，事件绑定不上

未完待续