JavaScript -- DHTML

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

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

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

//IE浏览器:
<img src="x.gif" οnmοuseοver= "image_eventHandler()">
function image_eventHandler()
{
	var eventType = window.event.type;
	if (evnetType == "mouseover")
	{ alert("hello");}
}
//非IE浏览器:
<img src="x.gif" οnmοuseοver= "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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值