html负责内容,css负责提供关于表示的信息,js负责关于"行为"的信息.(结构层→表示层→行为层)
HTML
1 盒子模型 margin padding
2、display:none和visibility:hidden区别
CSS display:none;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
3、
我只是添加了一行
看文章,其实只要添加
4、
先自己画好了logo,大小为16×16像素的图片,然后利用站点将你的图片转换成ico格式的,最后在你的文档中增加上面一句话就OK啦!
CSS
1、 在进行float设置之后会影响后面的div或者其他标签的float属性,这时的解决方法是在后面加一个div
这行代码纯粹是为了消除float属性
2、文档流,css中很重要的一个属性
4、margin标记可以带一个、二个、三个、四个参数,各有不同的含义。
margin: 20px 40px 60px 80px;(上20px;右40px;下60px;左80px。)
5、将ul变成一行
将ul变成一行
- the first line
- the second line
- the third line
- the fourth line
- the fifth line
这样变成:
前面总是有个小的空隙(如上图的红色方框),根据查询,需要将样式设置为
ul,li {margin:0;padding:0;}
于是样式修改为:
这样就行了。
6、display的作用
纵向排列的元素,display:inline之后就在一行了
横向排列的元素,display:block之后每一个元素就是一行了
display:none消失不见
7、position 属性值的含义(来自w3school,这个要记录一下,因为之前搞错,还有float属性):
- static
- 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。 relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 absolute
- 元素框从文档流完全删除,并相对于其包含块( 容器)定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 fixed
- 元素框的表现类似于将 position 设置为 absolute,不过其包含块( 容器)是视窗本身。
static、relative是在文档流中的,absolute、fixed是脱离文档流的。
8、一开始没理解好的css属性:display、position、float
js(DOM脚本)
1、方法直接调用为函数,用new调用为对象
2、
简单理解:闭包就是能够读取其他函数内部变量的函数。 闭包有两个很重要的作用:一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
NOTE:理解了函数也是值。所以返回的是一个函数以及他的上下文,其实就是返回了一堆数值。这堆数值就是闭包。
3、一个节点的结构
Don't forget to buy this stuff
DOM节点包含着其他类型的节点,这里就列举了其中的三种:元素节点、文本节点、文本节点。要注意的是,包含在<p>元素里的文本是另一种节点,他是<p>元素的第一个子节点。所以用alert(discription.nodeValue)返回的是null值,alert(discription.childNodes[0].nodeValue);或者alert(discription.firstChild.nodeValue);是可以正常显示文本节点中的内容的。
4、用return false可以阻止js的动作
这样按下“百度”,是不会跳转到http://www.baidu.com,因为有了return false;
所以,οnclick="showpic(this);return false;" 当然这里的showpic(showwhat)已经在js中被定义,这样就可以执行了showpic的动作,并且不进行其他的动作。
5、事件绑定
要注意一点在进行事件绑定的时候不能写上参数上的括号,那样是接受函数的返回值,而不是进行事件绑定。
//定义了一个函数function firstFunction(a,b){....}//定义第二个函数function secondFunction(c,d){....}//将函数绑定在window.onload事件上window.οnlοad=firstFunction;//下面这样写是不正确的window.οnlοad=firstFunction();//要是绑定了两个函数可以这样写window.οnlοad=function(){ firstFunction(); secondFunction();}//这样写是错误的window.οnlοad=firstFunction;window.οnlοad=secondFunction; //这样只是将secondFunction绑定在了window.onload上
6、为了将“动作”与内容分离
在.js文件中定义事件
object.οnclick=function(){.....}
7、在DOM看来,一个文档就是一棵节点树
8、动态创建标记
传统的方法有:document.write()、innerHTML
DOM方法:先创建元素或者文本节点(createElement方法、createTextNode方法),再将他们加载到文档中(appendChild方法、insertBefore方法)。所以总结DOM方法动态创建就是:创建元素节点用createElement、创建属性节点用object.setAttribute("","")、创建文本节点用createTextNode方法
9、对象关系
parentNode、nextSibling、previousSibling、childNodes、firstChild、lastChild
10、html标签的style属性以及用js设置样式typeof element.style得到的结果不是一个string,而是object。可以用element.style.color获取对象的color属性。
注意:style="font-family:.." 获取font-family不能用element.type.font-family这样会吧-解析成减号,应写成element.type.fontFamily。
这样在js中设置样式的格式就清晰了。比如:element.style.color="red";
另一种思路:改变className属性。不通过js改变样式,样式还是由css写,但是可以通过js改变元素的className,或者增加他的class。
11、动画
动画就是随着时间改变样式的例子。
12、为了使browser不会变得很复杂,js是一个单线程模型。为了解决"等待中的任务占用线程后面的任务不能及时进行"的困境,js利用了Event Loop
13、函数也是值
所以在js的构造函数中,理解js面向对象编程,对象是一个容器,包括对象的属性和方法。方法也可以理解为一个属性,所以用一个JSON就可以理解一个对象,记得用this。JavaScript语言没有“类”,而改用构造函数(constructor)作为对象的模板。
jQuery
1、jQuery很重要的一个概念就是jQuery的对象,又称包装集。可以理解为一个DOM对象集合。所以,一个jQuery对象可以用“加一个中括号,并填入相应的下标”,将一个jQuery对象转化为一个DOM对象。而一个DOM对象则直接将其放在$()中就可以成为一个jQuery对象。$("")中放一个css的选择器也是jQuery对象。