javascript 学习笔记 基础篇(2) HTML DOM

=================================================

2011-07-31 周日 18:27 javascript 文档对象(常用)

=================================================

------------------第三部分----------------------

3.javascript DOM实例

***3.1Document 对象

(1)document.write("xxx")

(2)document.getElementById("xxid") 获取某指定id的元素

(3)document.getElementByName("xxname") 获取某指定name 的元素

(4)document.forms.length 返回文档中表单的数目

(5)document.image.length 文档中图像的数目

***3.2 Event对象

(1)event.button == 2(1) 判断点击了鼠标哪个键

(2)event.clientX(X坐标) event.clientY(Y坐标) 获取鼠标位置

(3)event.keyCode 获取按了键盘的哪个键

(4)event.screenX / event.screenY 相对于屏幕光标的位置

(5)alert(event.type) 显示哪个类型的事件发生了

***3.3 Form 和 Input 对象

(1)获取向服务器发送数据的方法类型

var x = docoment.getElementById("myForm");

alert(x.method); -->post

(2)防止表单重复提交

document.getElementById("myButton").disabled = true;

(3)控制复选框

document.getElementById("checkBox").checked = true;

(4)获取复选框中的值

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

if(coffee[i].checked) {

txt = txt+coffee[i].value;

}

}

(5)重置表单

document.getElementById("myButton").reset();

(6)提交表单

document.getElementById("myButton").submit();

(7)验证表单 获取表单的值 ById("").value

(8)设置焦点

document.getElementById("text1").focus()

(9)失去焦点

document.getElementById("text2").focus();

(10)选取文本的内容

document.getElementById("text1").select();

(11)下拉列表

(12)达到文本框最大长度跳到另外一个文本框

(13)为元素添加快捷键

document.getElementById("myName").accessKey = "n"

快捷键 alt+n

***3.4 Image 对象

(1)更改图像的高度和宽度

document.getElementById("myImage").height = "200"

(2)更改图像的源文件

documetn.getElementById("myImage").src = "../image/2.jpg"

***3.5 Location 对象

(1)把用户带到一个新的地址

window.location = "../index.html"

alert(window.location); //显示用户当前的url

(2)重写加载页面

window.location.reload();

(3)跳出框架

if(window.top != window.self) {

window.top.location = "../index.html"

}

***3.6 Navigator 对象

(1)检查用户的浏览器和版本号

navigator.appName navigator.appVersion

(2)获取用户浏览器的更多信息

navigator.appName 浏览器

navigator.appVersion 浏览器版本

navigator.platform 平台

navigator.userAgent 用户报头

***3.7 Option 和 select 对象

(1)禁用列表 启用列表

document.getElementById("mySelect").disabled = true;

document.getElementById("mySelect").disabled = false;

(2)取得列表中的可选数目

document.getElementById("mySelect").length;

(3)改变下来列表中的可见行数 默认为1

document.getElementById("mySelect").size = 4;

(4)设置列表的多选属性

document.getElementById("mySelect").mutiple = true;

(5)获取列表中的所有值

var x = document.getElementById("mySelect");

for(i = 1; i<x.length; i++) {

document.write(x.option[i].text);

}

(6)改变选择项

document.getElementById("banana").selected = true;

(7)移除列表中选中的数据

var x = document.getElementById("mySelect");

x.remove(x.selectedIndex);

***3.8 Screen 对象

(1)获取屏幕的细节

screen.xxx(属性)

***3.9 Table , TableHeader ,TableRow TableData 对象

(1)更改表格边框的宽度

document.getElementById("myTable").border = "10";

(2)更改cellPadding(自身大小) cellSpacing(单元格与单元格之间的间距)

document.getElementById("myTable").cellPading = "15";

document.getElementById("myTable").cellSpacing = "15";

(3)只显示表格的上边距

document.getElementById("myTable").frame = "above";

(4)只显示表格的下边距

document.getElementById("myTable").frame = "below";

(5)规定表格内部边框

//仅显示行

document.getElementById("myTable").rule = "rows";

//仅显示列

document.getElementById("myTable").rule = "cols";

(6)显示第一行内部的数据

alert(document.getElementById("myTable").row[0].innerHTML)

(7)显示第一行的第一个单元格内的内容

var myCells = document.getElementById("myTable").row[0].cells;

alert(x[0].innerHTML)

(8)手动为表格创建标题

var myCaption = document.getElementById("myTable").createCaption();

x.innerHTML = "我的表格标题";

(9)从表格中删除行

document.getElementById("myTable").deleteRow(i);

(10)向表格中插入新行并添加内容

var x = document.getElementById("myTable").insertRow(0);

var y = x.insertCell(0);

var z = x.insertCell(1);

y.innerHTML = "NEW CELL1"

z.innerHTML = "NEW CELL2"

(11)向已有行中插入单元格

var x = document.getElementById("tr2").insertCell(0);

x.innerHTML = "John";

(12)控制单元格的对齐方式

document.getElementById("r1").align = "left";

(13)垂直对齐单元格中的内容

document.getElementById("tr2").VAlign = "left";

(14)修改单元格的内容

var x = document.getElementById("myTable").row(0).cells

x[0].innerHTML = "新的内容";

***3.10 Window 对象

(1)消息框 alert("xxx")

(2)确认框 var x = confirm("press a button");

(3)提示框 var x = propmpt("请输入你的信息","orclight")

(4)打开指定窗口

window.open("../../xxx.html");

(5)打开一个窗口,并且控制其外观

window.open("../../xx/Html","height = '400',weight = '300'")

(6)显示当前url alert(window.location);

(7)到指定的地址 window.location = "xxx/index.html";

(8)重新加载文档

window.location.reload();

(9)调整窗口到指定的大小

top.resizeTo(500,300);

(10)滚动窗体

window.scroolTo(100,50);

(11)定时器 定时调用一个函数

var t =setTimeOut("mFunc()",500);

(12)清楚定时器 clearTimeout(t)