DOM+ 概念: 1)HTML DOM定义了用于HTML的一系列标准的对象,以及访问和处理HTML文档的标准方法 2)HTML标签对象化:将网页中的每个元素都看作一个对象。 3)常用HTML DOM对象:
Select对象
1)Select对象代表HTML表单中的一个下拉列表,<select>标签即表示一个Select对象。
2)常用属性:options(选项数组)、selectedIndex(索引从0开始)、size
3)常用方法:add(option)、remove(index)
4)事件:onchange
Option对象
1)Option对象代表HTML表单中下拉列表中的一个选项,<option>标签表示一个Option对象
2)创建对象:var obj=new Option(text,value);
3)常用属性:index、text、value、selected
Table对象
1)Table对象代表一个HTML表格,<table>标签表示一个Table对象。
2)常用属性:rows(返回所有行数组)、cells(返回所有单元格数组)
3)常用方法:
—> table.insertRow(index):返回TableRow对象(插入新行)。
—> table.deleteRow(index):删除TableRow对象(删除行)。
TableRow对象
1)TableCell对象代表一个HTML表格单元格,<td>标签表示一个TableCell对象。
2)常用属性:cellIndex、innerHTML、colSpan、rowSpan
window其他子对象(DHTML模型)
screen对象
1)包含有关客户端显示屏幕的信息(封装了屏幕相关的信息,供读取)。
2)常用属性:width/height、availWidth/availHeight、colorDepth(颜色位数)、pixelDepth(颜色位数)
浏览器窗口可视区域大小在各浏览器兼容的方法:
var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;
网页尺寸scrollHeight/offsetHeight在各浏览器兼容的方法:
var w=document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight || document.body.scrollHeight;
history对象
1)包含用户在浏览器窗口中访问过的URL(封装了历史访问记录)。
2)length属性:浏览器历史列表中的URL数量。
3)方法:
—> history.back():单击后退按钮。
—> history.forward():单击向前按钮。
—> history.go(n):前进到历史列表中的第几个页面,1表示前进,-1表示后退。
location对象
1)包含有关当前URL的信息(地址栏),常用于获取和改变当前浏览的网址。
2)href属性:完整的url。
host:URL端口号; hostname:主机名; hash:从#开始的URL(锚)
pathname:路径部分; protocol:url协议; search:从?开的url(查询部分)
3)方法:
—> location.href="url":在当前页面打开,保留历史访问记录。
—> location.replace(“url"):在当前页面打开url,不保留历史访问记录。
—> location.reload():重新载入当前网址,等同于按刷新。
—> location.assign():加载新的文档
【注意:location.href=“url”也等同于location["href"],但很少这么用;location="url"好像也可以。】
navigator对象
1)包含浏览器软件的相关信息,常用于获取客户端和操作系统信息。
2)属性:appCodeName:浏览器代码名的字符串表示;
appName:浏览器名称; appVersion:浏览器平台和版本信息
platform:运行浏览器的操作系统平台;
userAgent:由客户机发送服务器的user-agent头部的值
【注意:可用window.userAgent.indexOf(“Firefox”)>-1来判断是否是某种浏览器】
事件
指DHTML对象在状态改变、鼠标操作或键盘操作时触发的动作。
1)事件的类别:
①鼠标事件:onclick/ondblclick/onmouseover/onmouseout ……
②键盘事件:onkeydown/onkeyup ……
③状态改变事件:onblur/onfocus/onchange/onload(body里)/onsubmit(form里) ……
④内容事件:onselect/onchange/
⑤body里内容加载 :onload/ 窗口关闭事件: window.onunload
2)定义事件:
①<标签里 onXXX=“代码">:静态,写在html代码中
②obj.onclick = function(){}:动态,在JavaScript代码中定义
3)取消事件:onXXX = "return false;"
4)事件处理机制(冒泡机制):当处于DHTML对象模型底部的对象事件发生时,会依次激活上面对象定义的同类事件处理(即当有层次关系,且定义了相同事件时,会发生)。如:
<div style="width:100px;height:100px;border:1px solid red;" onclick="alert('3');">
<p onclick="alert('2');">p text
<input type="button" value="1" onclick="alert('1');" />
</p>
<div>
【注意:使用event对象可以禁止事件冒泡】
event对象
1)任何事件触发后将会产生一个event对象。
2)event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息(获得event对象后,可以获得相关信息)。
3)常用属性:clientX/clientY/cancelBubble=true(取消冒泡) ……
4)获取event对象:
—> IE/Chrome等浏览器:直接使用event关键字。
—> Firefox浏览器:在事件定义中,使用event关键字将事件对象作为参数传入方法。
【注意:在Firefox里直接在JavaScript中使用event,则不行!不认识!即只能在html页面获得event对象!其他浏览器既可以在JavaScript中获得,也可以在html页面中获得。】
5)获取事件源:
—> IE/Chrome等浏览器:event.srcElement
—> Firefox浏览器:event.target
【注意:两种获得事件源对象的方式最新的Chrome浏览器都支持。】
<div onclick="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(大写的) }
面向对象基础
对象是一种特殊的数据类型,由属性和方法封装而成;
1)属性:对象名.属性名
2)方法:对象名.方法名()
3)定义对象:
① 创建对象的实例:使用Object创建,可以实现简单的封装,但不方便重用。
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();
② 创建对象的模版:可重用的封装;定义构造函数,以创建自定义的对象。
—>语法:function ObjName(参数1,参数2,…){}
③ 使用JSON(相当于Java中的Map)
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();
}
JSON( JavaScript Object Notation )
是一种轻量级的数据交换格式。使用名 / 值对的方式定义。名称需要使用 “” 引起来。多对定义之间使用 “ , ” 隔开。
1)数据的传递:
① 数据在 JavaScript 范围里传递,使用 Object 创建对象或者创建对象的模版,两种都可用。
② 数据传递到服务器端,采用一种通用的格式, Xml 或者 JSON 。
2)操作:
① var name=obj["name"];// 相当于 [obj.nam],取键所对应的值
② obj[“score"]=99;// 放入一个新的键值对【注意:名称可以是属性,需要使用“”引起来;】
博客地址:Web基础之JavaScript(三)