JavaScript -- DHTML

DHTML在页面加载到浏览器后动态的改变页面。
event.type属性将返回一个事件名称字符串，并且时间名称不带on前缀。
event.srcElement返回接受当前事件的html元素，也可理解为触发该事件的控件引用。如下面srcElement就是一个控件<a>的引用。
<a href="s.htm" onclick="alert("hello");"> Click me</a>

target 使用在非IE浏览器中，等价于srcElement

浏览器中event对比：
Ie有一个全局对象event来跟踪当前所触发的事件，而非IE浏览器需要将事件对象作为参数，传递给事件处理器。

//IE浏览器：
<img src="x.gif" onmouseover= "image_eventHandler()">
function image_eventHandler()
{
	var eventType = window.event.type;
	if (evnetType == "mouseover")
	{ alert("hello");}
}
//非IE浏览器：
<img src="x.gif" onmouseover= "image_eventHandler(event)">
function image_eventHandler(evt)
{
	var eventType = evt.type;
	if (evnetType == "mouseover")
	{ alert("hello");}
}

如何将事件与处理函数关联起来?
1：首先是在html标记中我们都已经了解了 
<img src="x.gif" onmouseover = "image_eventHandler()">
2：当我们在js中如何设置关联呢？首先是定义好函数image_eventHandler(),然后我们让
document.image[0].onmouseover = image_eventHandler; //假设image控件是第一个。
document.image[0].onmouseover = image_eventHandler(event) // wrong,在js中设置关联时，不能传参数给相应的事件处理函数。

CSS

用于定义样式，然后再将样式应用于整个web页面。
它主要有3中方式：
1：为html元素定义一个样式，如<p>元素，<form>元素等等
2：创建一个样式类，只需在定义元素的标记中将class属性设置为样式类的名称即可。
3：为某一个元素单独定义样式
4：id 匹配，HTML中元素的id必须等于#号后面的字符串名

例子1，为标签p元素设置样式，只需在元素名加一个大括号，里面是组式声明，内部以分号分隔。
<style>
	p{
	  font-family: arial;
	  font-size:   10pt;
	  color:       blue;
	 }
</style>
例子2,定义CSS的类，用于各种html元素。类由一个点号后跟一个类名组成；如果是在js里面设置某元素的话，只需让owndiv.className = "heading1";
<style>
	.heading1 {
		font-size: 24pt;
		color    : orange;
	}
</style> 
例子3，使用html元素的style属性，因为绝大部分html元素都有该属性。
<p style = " font-style: italic; color:green"> hello </p>
例子4，只要id匹配#号后的字符串名就行
<style>
	#divAdvert{
	  background-color: gray;
	}
</style>

为了方便设置字体，CSS提供了font属性，对应如下：
font: font-style font-weight font-size font-family;

显示和隐藏
比如当鼠标移动到某链接上，或者在某个表单元素下时，弹出一个相关信息框。
visibility:hidden。缺点是它不显示了，但是仍占着空间，是一块空白。
display:none;能够把它从文档流中去除，不留痕迹。
display:block;告诉浏览器该元素按“块级元素”显示
display:inline;按照“行布局”格式显示

定位
关键属性left和top属性
绝对定位(absolute positioning)
相对定位(relative positioning)
<p style="left: 50%; top:50%">my paragraph </p> p的左上角位于浏览器窗口中心。

DOM(Document Object Model)文档对象模型将HTML文档解析为一个具有层次结构的树，我们可以在文档树中导航，查看每一个分支或树叶。

使用DHTML可以创建各种动画效果，可以使本元素或图片实现淡入和淡出(fade)效果。或者实现具有擦除(swipe)效果的动画，或创建在页面上移动元素的动画效果。
1：起始状态
2：向目标位置的移动
3：结束状态，停止动画
首先定位起始位置，这个非常关键，然后改变位置，让他移动起来。直到终点，终点位置表示动画的结束。
offsetTop/offsetLeft属性返回相对与父元素的位置偏移量。他们返回的都是数值类型。

计时器

setTimeout(logic,time) 第一个为要执行的逻辑，time是以毫秒为单位，整个函数返回一个整数，标识这个计时器。
clearTimeout(i) 清除一个计时器，i为setTimeout返回的计时器整数标识。
setTimeout(logic,interval)第二个这个为时间间隔，定时触发，而不再是时间，就触发那么一次。
clearInterval(TimerId)