一)HTML DOM
1、什么是HTML DOM?
1)HTML DOM定义了用于HTML的一系列标准的对象,以及访问和处理HTML文档的标准方法(对DOM操作进行了封装,实现代码的简化)。
2)HTML标签对象化:将网页中的每个元素都看作一个对象。
3)常用HTML DOM对象字母图
4)如何解决浏览器兼容性问题:首先代码要符合W3C标准,然后了解各浏览器特殊的地方。
5)多种对象中,重要了解Select对象和Table对象。
2、常用HTML DOM对象有哪些?Select对象与Option对象
1)Select对象
1>Select对象代表HTML表单中的一个下拉列表,<select>标签即表示一个Select对象。
2>常用属性:options(选项数组)、selectedIndex(索引从0开始)、size
3>常用方法:add(option)、remove(index)
4>事件:onchange
<span style="font-size:18px;"> <select οnchange="alert(this.selectedIndex);">
<option value="1">a</option>
<option value="2">b</option>
</select></span>
2)Option对象
1>Option对象代表HTML表单中下拉列表中的一个选项,<option>标签表示一个Option对象
2>创建对象:var obj=new Option(text,value);
3>常用属性:index、text、value、selected
<span style="font-size:18px;"><html>
<head>
<title>deleteNode1.html</title>
<script type="text/javascript">
//(结合上例修改οnchange="selFunc();" id="s1")
function selFunc() {
var selObj = document.getElementById("s1");
var value = selObj.options[selObj.selectedIndex].value;
alert(value);
var option = new Option("c", "3");
selObj.add(option);
}
</script>
</head>
<body>
这是一个下拉可选测试<br>
<select οnchange="alert(this.selectedIndex);">
<option value="1">a</option>
<option value="2">b</option>
</select>
</body>
</html></span>
经典案例:联动菜单(修改上一篇的案例)
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>deleteNode.html</title>
<script type="text/javascript">
//以下为JS代码:声明一个数组类型的全局变量用于存储所有的城市数据
var array = new Array();
array[0] = [ "请选择" ];
array[1] = [ "海淀", "朝阳", "西城", "东城" ];
array[2] = [ "石家庄", "邢台", "保定" ];
function showCities() {//根据省显示城市
//得到第一个选择框的选中的选项的索引
var i = document.getElementById("sel1").selectedIndex;
//先删除选择框中原有的元素
var sellObj = document.getElementById("sel2");
// for(var j=0;j<sellObj.childNodes.length;j++){
// sellObj.removeChild(sellObj.childNodes[j]);
// }注意事项:这样操作是删不干净的!
while (sellObj.childNodes.length > 0) {
sellObj.removeChild(sellObj.firstChild);
}
var cities = array[i];//根据索引找到城市数据
//循环城市数据,创建option元素,文本写入
for ( var index = 0; index < cities.length; index++) {
var newNode = document.createElement("option");
newNode.innerHTML = cities[index];
document.getElementById("sel2").appendChild(newNode);
}
}
</script>
</head>
<body>
联动菜单的测试<br>
<select id="sel1" οnchange="showCities();">
<option>请选择</option>
<option>北京</option>
<option>河北</option>
</select>
<select id="sel2">
<option>请选择</option>
</select>
</body>
</html></span>
3)Table对象
<span style="font-size:18px;">1>Table对象代表一个HTML表格,<table>标签表示一个Table对象。
2>常用属性:rows(返回所有行数组)、cells(返回所有单元格数组)
3>常用方法:①table.insertRow(index):返回TableRow对象(插入新行)。
<span style="font-size:18px;"> </span><span style="font-size:18px;"> </span> ②table.deleteRow(index):删除TableRow对象(删除行)。</span>
4)TableRow对象
1>TableRow对象代表一个HTML表格行,<tr>标签表示一个TableRow对象
2>常用属性:cells、innerHTML、rowIndex
3>常用方法:①row.insertCell(index):返回TableCell对象(插入单元格)。
②row.deleteCell(index):删除TableCell对象(删除单元格)。
5)TableCell对象
1>TableCell对象代表一个HTML表格单元格,<td>标签表示一个TableCell对象。
2>常用属性:cellIndex、innerHTML、colSpan、rowSpan
3>案例:产品列表
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>productTable.html</title>
<script type="text/javascript">
function modiTable() {//增加行
var table = document.getElementById("t1");//得到表格对象
var row = table.insertRow(table.rows.length);//创建新行
var cell1 = row.insertCell(0);//为行创建产品名称单元格
cell1.innerHTML = document.getElementById("txtID").value;
var cell2 = row.insertCell(1);//为行创建价格单元格
cell2.innerHTML = document.getElementById("txtName").value;
var buttonCell = row.insertCell(2);//为行创建操作按钮的单元格
var button = document.createElement("input");
button.type = "button";
button.value = "删除";
button.onclick = function() {
delFunc(this);
};
buttonCell.appendChild(button);
}
function delFunc(btnObj) {//删除按钮的单击事件
var isDel = confirm("真的要删除吗?");
if (!isDel)
return;
//找到当前行的 ID
var rowObj = btnObj.parentNode.parentNode;
var id = rowObj.getElementsByTagName("td")[0].innerHTML;
//循环行,根据id定位需要删除的行,并删除
var table = document.getElementById("t1");
for ( var i = 1; i < table.rows.length; i++) {
if (table.rows[i].cells[0].innerHTML == id) {
table.deleteRow(i);
break;
}
}
alert("删除 ID 为 " + id + " 的数据。");//提示
}
</script>
</head>
<body>
产品列表测试<br>
ID号:<input type="text" id="txtID" /><br />
名称:<input type="text" id="txtName" /><br />
<input type="button" value="增加" οnclick="modiTable();" />
<table id="t1" border="1">
<tr>
<td>产品ID</td>
<td>产品名称</td>
<td></td>
</tr>
</table>
</body>
</html></span>
二)Window其他子对象(DHTML模型)
1、screen对象
1)包含有关客户端显示屏幕的信息(封装了屏幕相关的信息,供读取)。
2)常用属性:width/height、availWidth/availHeight
例如:var n = screen.width//ok!
screen.width = 1000;//error! 只能读不能写
2、history对象
1)包含用户在浏览器窗口中访问过的URL(封装了历史访问记录)。
2)length属性:浏览器历史列表中的URL数量。
3)方法:①history.back():单击后退按钮。
②history.forward():单击向前按钮。
③history.go(n):单击n次后退按钮。
3、location对象
1)包含有关当前URL的信息(地址栏),常用于获取和改变当前浏览的网址。
2)href属性:当前窗口正在浏览的网页地址。
3)方法:①location.href="url":在当前页面打开,保留历史访问记录。
②location.replace("url"):在当前页面打开url,不保留历史访问记录。
③location.reload():重新载入当前网址,等同于按刷新。
注意事项:
location.href="url"也等同于location["href"],但很少这么用。
location="url"好像也可以。
4、navigator对象
包含浏览器软件的相关信息,常用于获取客户端和操作系统信息。
eg:遍历navigator对象的所有属性
function testNavigator(){
var s="";
for(var p in navigator){//p代表对象中的每一个属性
s +=p +":"+navigator[p]+"\n"
}
alert(s);
}
1)事件:指DHTML对象在状态改变、鼠标操作或键盘操作时触发的动作。
2)事件的类别:
①鼠标事件:onclick/ondblclick/onmouseover/onmouseout ……
②键盘事件:onkeydown/onkeyup ……
③状态改变事件:onblur/onfocus/onchange/onload(body里)/onsubmit(form里) ……
3)如何定义事件:
①<标签里 onXXX="代码">:静态,写在html代码中
②obj.onclick = function(){}:动态,在JavaScript代码中定义
4)事件可以被取消:onXXX = "return false;"
例如:ID:<input id="txtID" type="text" />
<input type="submit" value="Delete" οnclick="return deleteFunc();" />
案例:删除某ID
<html>
<head>
<title>rollEvent.html</title>
<script type="text/javascript">
function deleteFunc(){
var data=document.getElementById("txtID").value;
var spanObj=document.getElementById("info");
if(isNaN(data)){
info.innerHTML="请录入数值";
return false;
} else
return confirm("真的要删除吗?");
}
</script>
</head>
<body>
This is my HTML page.
<br> ID:
<input id="txtID" type="text" />
<input type="submit" value="Delete" οnclick="return deleteFunc();" />
<span id="info"></span>
</body>
</html>
5)事件的处理机制(冒泡机制)
事件冒泡机制:当处于DHTML对象模型底部的对象事件发生时,会依次激活上面对象定义的同类事件处理(即当有层次关系,且定义了相同事件时,会发生)。
例如:现象:单击按钮,则会弹出“1”、“2”、“3”。
单击段落,则会弹出“2”、“3”
单击div,则会弹出“3”
<div style="width:100px;height:100px;border:1px solid red;"
οnclick="alert('3');">
<p οnclick="alert('2');">
p text <input type="button" value="1" οnclick="alert('1');" />
</p>
<div>
注意事项:使用event对象可以禁止事件冒泡,也可详见jQuery笔记。
6、event对象
1)任何事件触发后将会产生一个event对象。
2)event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息(获得event对象后,可以获得相关信息)。
3)常用属性:clientX/clientY/cancelBubble=true(取消冒泡) ……
4)使用event对象
①如何获得event对象
A. IE/Chrome等浏览器:直接使用event关键字。
B. Firefox浏览器:在事件定义中,使用event关键字将事件对象作为参数传入方法。
注意事项:在Firefox里直接在JavaScript中使用event,则不行!不认识!即只能在html页面获得event对象!其他浏览器既可以在JavaScript中获得,也可以在html页面中获得。
②如何获得事件源
A. IE/Chrome等浏览器:event.srcElement
B. Firefox浏览器:event.target
注意事项:两种获得事件源对象的方式最新的Chrome浏览器都支持。
<!DOCTYPE html>
<html>
<head>
<title>rollEvent.html</title>
<script type="text/javascript">
//IE/Chrome等浏览器
function func(){ alert(event.clientX+":"+event.clientY);
alert(event.srcElement.nodeName);//DIV(大写的)
}
//Firefox浏览器
function func(e){ alert(e.clientX+":"+e.clientY);
alert(e.target.nodeName);//DIV(大写的)
}
</script>
</head>
<body>
<div οnclick="func();"> div text</div>
<div οnclick="func(event);"> div text</div>
<!--注意把event传入方法中!这样也可以在JavaScript中写复杂代码了!-->
</body>
</html>
5)考虑各浏览器的兼容性
<span style="font-size:18px;"> <div οnclick="func(event);">div text</div>
<!--注意把event传入方法中!这样也可以在JavaScript中写复杂代码了!-->
//如下操作可兼容各浏览器
function func(e){
alert(e.clientX+":"+e.clientY);
var obj=e.srcElement || e.target;
alert(obj.nodeName);//DIV(大写的)
</span><span style="font-size:18px;">}</span>
6)案例
eg:简单计算器(简化版)
<!DOCTYPE html>
<html>
<head>
<title>cal.html</title>
<script type="text/javascript">
function cal(e) {
var obj = e.target || e.srcElement;//获得被单击的对象
//判断只有单击的是button
if (obj.nodeName == "INPUT" && obj.type == "button") {
if (obj.value == "=") {//=按钮进行eval;其他按钮做拼接操作
var s = document.getElementById("txtNumber").value;
var data = eval(s);
document.getElementById("txtNumber").value = data;
} else {
document.getElementById("txtNumber").value += obj.value;
}
}
}
</script>
</head>
<body>
简易计算器测试<br>
<div style="border:1px solid red;" οnclick="cal(event);">
<input type="button" value="1" /> <input type="button" value="2" />
<input type="button" value="3" /> <input type="button" value="4" />
<input type="button" value="+" /> <input type="button" value="-" />
<input type="button" value="=" /> <input type="text" id="txtNumber" />
</div>
</body>
</html>
三)面向对象基础
1、什么是JS对象、属性、方法?
对象:对象是一种特殊的数据类型,由属性和方法封装而成;
属性:属性是指与对象有关的值:对象名.属性名;
方法:方法指的是对象可以执行的行为货可以完成的功能:对象名.方法名()
2、定义JS对象有哪几种方式?
主要有三种方式:
1)创建对象的实例;
2)创建对象的模版;
3)使用JSON(相当于Java中的Map)。
4)经典案例案例1:创建通用对象(使用Object创建对象以实现简单的封装,但不方便重用!)
<html>
<head>
<title>testObject.html</title>
<script type="text/javascript">
function TestObject() { //创建对象,封装数据和行为
var s = new Object();
s.name = "mary";
s.age = 18;
s.sing = function() {
alert("hello");
};
//匿名方法,赋进去一个function,所以sing是个方法
alert(s.name);
alert(s.age);
s.sing();
}
</script>
</head>
<body>
This is my HTML page.
<br>
<input type="button" value="使用Object创建对象" οnclick="testObject();" />
</body>
</html>
注意事项: .后写啥属性名都行,因为JavaScript是松散类型语言
案例2:创建对象模板
可重用的封装;定义构造函数,以创建自定义的对象。
语法:function ObjName(参数1,参数2,…){}
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<script type="text/javascript">
function Student(n1, a1) {//定义一个对象的模版:Student
this.name = n1;//用了this关键字,就认为Student是一个类,而不是方法
this.age = a1;
this.introduceSelf = function() {
alert("i am " + this.name + ", i am " + this.age + " year old");
}
}
function testOwnObject() {//测试自定义的Student对象
var p1 = new Student("mary", 18);
var p2 = new Student("join", 20);
alert(p1.name);
alert(p2.age);
p1.introduceSelf();
p2.introduceSelf();
}
</script>
</head>
<body>
<h3>测试创建对象模板<br></h3>
<input type="button" value="自定义对象" οnclick="testOwnObject();" />
</body>
</html>