HTML对象简介
一、HTML常用对象
Form Frame Input select checkBox div table button
二、HTML对象常用属性
Neme id width height value style tabindex readOnly type disabled innerHTML outerHTML
三、HTML的常用方法
Focus blur click
四、HTML常用的事件
Onload oncativate onblur onchange onclick onfocus
onkeydown onkeypress onkeyup onresiz e
常用HTML对象
FORM
<form name="form1"method="post"action=""></form>
TABLE(表格对象主要用于数据/元素的布局显示)
<table width="599"height="89"border="1"cellpadding="2"cellspacing="3">
<tr><td> </td><td> </td></tr>
</table>
INPUT
<input name=""type="text"onBlur=""onSelect=""onChange=""onClick="">
SELECT
<select name="select">
<option value="01">增值税</option>
</select>
DIV(常用于动态显示页面元素)
<div name=""></div>
BUTTON
<button name=""onClick="">test</button>
常用window事件
事件对象：window.event//window可省略，即event
事件键盘码：event.keyCode
事件源（对象，相当于对id的引用）：event.srcElement
常用事件：
onload（页面被下载并解析完毕后触发）
onchange（对象的值被改变且失去焦点时触发）；
onfocus（对象得到焦点时触发）
onblur（对象失去焦点时触发）
事件的取消：
有时需要取消已经触发的事件，比如：取消onblur事件，即使焦点不离开
CSS（Cascading Stytle Sheets）介绍
级联式样式表(CSS)包含应用于HTML文档中元素的样式定义。
html frame
CSS样式规则都有两个主要部分：选择器（如H1）和声明（如color:red）。
H1{text-align:center;color:red;}
CSS引入方式
以内联方式应用样式
<SPAN >and green</SPAN>
在Web页HEAD部分的<STYLE>块内加以分组
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>HTML4.0CSS Element Style Example</TITLE>
<STYLE TYPE="text/css">
H1{text-align:center;color:red;}
</STYLE>
</HEAD>
<BODY><H1>This text is centered and red</H1></BODY>
</HTML>
从单独的CSS样式表文件中导入
<LINK REL=stylesheet Type="text/css"HREF="mystyles.css">
CSS样式CLASS
CLASS样式规则的选择器以一个句点开始。文件扩展名为.css
.head2{font-siz e:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;}
样式表例
<HTML>
<HEAD>
<TITLE>HTML4.0CSS Style Class Example</TITLE>
<STYLE TYPE="text/css">
.head2{font-siz e:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;} </STYLE>
<LINK REL=stylesheet Type="text/css"HREF="test.css">
</HEAD>
<BODY>
<DIV CLASS="head2">This text is centered,large,red<SPAN >and green</SPAN>,bold,and italic</DIV> </BODY>
</HTML>
JavaScript编程
基本语法
变量、函数声明
内置对象String、Array……
浏览器对象
window
document
location
……
变量、函数声明
语法基本与java相同，如for、while、if语句等；大小写敏感，每行以“;”结尾，但也可不写
function myFunction(){
var rtn=true;
….
return rtn;
}
内置对象String、Array……
charAt(idx)
indexOf(subStr[,idx])/lastIndexOf(subStr)
substring(fromIdx,toIdx)//不包括toIdx索引的字符
toLowerCase()/toUpperCase()
Array为关联数组，索引可为数字或字符串（即相当于JAVA里的Properties等类）var myArray=new Array(5);//指定数组大小，为动态数组，实际可不指定
myArray[“数据1”]=“数据11”;
myArray[1]=“数据22”;
var myArray=new Array(11,22,33);//初始化数组的数据
//日期函数
var dTempDate=new Date();
dTempDate.setDate(1);
window
window对象表示对当前htm页面的引用，可通过该对象引用页面内的函数、对象等，引用时可省略
alert(str)、close()、open()、showModalDialog()、myFunction()
document
从属于window对象，表示页面文档
write(str)、document.all(“myId”)、
location
与URL相关的对象
reload()、href
XML介绍
什么是XML
非常简单，XML（Extensible Markup Language，可扩展标记语言）就是一种文本。一个XML文件就是以特定格式安排的文本文件。文件可以在任何计算机系统上使用文本编辑程序来建立。
XML使用标记（包含在尖括号中的字，例如“<root>”）来识别信息元素。
<ROOT>
<ITEM>
<YSSPHM></YSSPHM>
<YHZL_DM></YHZL_DM>
</ITEM>
</ROOT>
XML转换
由于XML文件只包含数据，它能用作文件、图表、Web页、文档或HMI的源。在IT 行业中，这常常称为为XML文档重定目标（re-purposing）。以你所需的特定格式为XML 文件重定目标通常要使用XSL“变换”。
1）XML只是结构化的文本；
2）XML并不是HTML的一种形式；
3）XML描述数据，但并不描述最终数据怎样表示；
a.相反，HTML描述数据怎样表示，但并不描述数据本身。
4）把XML转变成任何其他格式；
5）因为XML“只是文本”，它：
•不能由任何单一的公司占有或控制；
•可和任何计算机协同工作；
•是肉眼可读的，所以易于调试；
•经过优化便于万维网上传输；
•可应用于任何数据类型。
XML数据的绑定
数据岛与HTML
XML数据与HTM对象的映射
XML数据解析
对XML数据的相关操作
节点的遍历、增删
数据岛与HTML
IE提供了一个特殊的标签：<XML>
<XML id=“xmlId”>
<name no=“500922”>
……
</name>
</XML>
或
<XML id=“xmlId”src=“l”></XML>
叫作数据岛。对标签<XML>不区分大小写，标签内的数据即为XML格式的字符串，页面下载时，IE会自动将XML的内容以ID值(xmlId)为句柄解析成DOM，所以该DOM可直接引用：
var root=xmlId.documentElement;
或
xmlDoc=xmlId;
数据岛与HTML
<XML id=“xmlId”>
<name no=“500922”>
<age>22</age>
<sex>male</sex>
<others>
<height>175</height>
<weight>63</weight>
</others>
</name>
</XML>
可在HTML页面中按如下方法绑定XML数据：
绑定数据源：DATASRC=“#xmlId”
绑定数据项：DATAFLD=“age”
<!--对于节点的属性，在绑定中也视作该节点的子节点来绑定-->
<input DATASRC=“#xmlId”DATAFLD=“age”>
<!--绑定name/others/weight-->
<table datasrc="#xmlId"datafld="others">
<tr>
<td><input datafld="weight"></td>
</tr>
</table>
对XML数据的相关操作
/
/创建DOM对象
var xmlDoc=new ActiveXObject("MSXML.DOMDocument");
var file Url=“l”;
xmlDoc.load(fileUrl);
//var strXml=“<root><node1>qqq</node1><node2>www</node2></root>”;
//xmlDoc.loadXML(strXml);
//得到根节点
var root=xmlDoc.documentElement;
//得到第一个子节点的孩子的个数
var iChildNum=root.childNodes.length;
//得到第一个子节点的第二个子节点的内容
var str=root.childNodes(0).childNodes(1).childNodes.item(1).text;
//克隆clonedNode节点及其所有子节点true
var newNode=clonedNode.cloneNode(true);
//为root根节点增加子节点newNode
root.appendChild(newNode);
//取得others/height节点值
root.selectSingleNode(“others/height”).text;
XSL应用
XSL（eXtensible Style sheet Language），即可扩展样式表语言，是XML的亲密伙伴。可以先将XSL理解成：
一种将XML转换成HTML的语言，
一种可以过滤和分类XML数据的语言，
一种可以对一个XML文档的部分进行寻址的语言，
一种可以基于数据值格式化XML数据的语言（如用红显示负数），
一种向不同设备输出XML数据的语言（如屏幕、纸或声音）。
XSL与XML转换
将样式表连接到XML文档
<?xml-stylesheet type="text/xsl"href="cd_catalog.xsl"?>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。