昨日回顾

HTML DOM

获取一个HTML对象的方法：

第一种：通过标签的ID值来获取HTML对象

document.getElementById(“id值”) //返回的是一个对象

第二种：通过标签名来获取一组对象

父对象.getElementsByTagName(“标签名”); //返回的是一组标签(集合，可使用类似操作数组方法对对象进行遍历操作)

第三种：通过form表单元素的name值进行获取

document.getElementsByName(“表单元素的name值”);

IE只能获取具有name值的表单元素

FireFox可以获取任意元素

HTML对象常用的属性

width:

obj.width=”200”

heigth:

obj.height=”300”

style：

obj.style.background=”red”;

obj.style=”background:red”;

value:

获取或设置具有value属性的标签对象的值

innerHTML：

用于获取或设置双边标签的内容

obj.innerHTML=”内容”

scrollWidth: 获取对象内容的宽度

scrollHeight: 获取对象内容的高度

scrollTop: 垂直滚动条的高度

scrollLeft: 水平滚动条的长度

offsetLeft: 获取对象边框与父元素左边的距离返回值不具有px

offsetTop: 获取对象边框与父元素上边的距离返回值不具有px

将一个对象的offsetLeft(offsetTop)赋值给对象的style.left(style.top)

事件：

一类：需要用户参与

通用事件

onblur: 当文本框失去焦点时触发

onfocus: 当文本框获取焦点时触发

onchange: 当内容改变时触发(select input type=”file”)

onsubmit: 当form表单被提交时触发

onreset：当form表单被重置时触发

onresize: 当HTML元素大小被改变时触发

onselect：当内容被选中触发

阻止默认行为：

为了在客户端完成对数据验证

鼠标事件

onclick

onmouseover

onmouseout

onmousemove

ondbclick

键盘事件

onkeydown

onkeypress

onkeyup

event对象：

记录了事件发时时与鼠标和键盘相关的一些信息

oEvent.clientX 记录鼠标与浏览器窗口左边距离

oEvent.clientY 记录鼠标与浏览器窗口上边距离

oEvent.keycode 记录了被按下的键的unicode编码

objDiv.onclick=function(){

event.clientX;

}

objDiv.onclick=function(e){

e.clientX;

}

兼容性代码

objDiv.onclick=function(){

var oEvent=e||event;

oEvent.clientY;

oEvent.keycode;

}

二类：不需用户参与

onload:在页面加载完毕后自动触发。

window.onload=init;

function init(){

//初始化代码

}

window.onload=function(){

//初始化代码

}

window.onload=function(){

init();

}

事件绑定：

静态绑定：

在HTML标签内容使用事件属性进行绑定

如:<div onclick=”func1()”></div>

动态绑定：

1、首先获取到此对象

var objDiv=document.getElementById(“div1”);

2、为对象绑定事件处理程序

objDiv.onclick=function(){

//your code

}

var objLis=document.getElementsByTagName(“li”);

for(var i=0;i<objLis.length;i++){

//为对象自定一个属性

objLis.tag=i+1;

objLis[i].onclick=function(){

//this代表触发当前onclick事件的对象

alert(this.tag);

}

课堂案例：

table隔行变色.html

动态删除.html

排序.html

tab

二级联动

</select>

select对象的常用属性：

length: 设置或获取select对象下的子对象(option)的个数

value: 返回被选中的列表项的value值

selectedIndex: 返回被选中的列表项的序号(从0开始)

name:

options: option列表组成的一个数组

option对象的常用属性：

text：设置option对象的显示信息

value: 设置option对象的value值

selected: 设置默认显示的列表项

图片无缝滚动

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。