|
|
jQuery中的DOM操作实现说明，学习DOM操作的朋友可以参考下。
DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM.
1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它.
JavaScript中的getElementById(),getElementsByTagName()...等方法.
例如:使用DOM Core来获取表单对象的方法:
document.getElementsByTagName("form");
2,HTML-DOM.
在使用JavaScript和DOM为HTML文件编写脚本的时候.有许多专属于HTML-DOM的属性.HTML-DOM的出现甚至比DOM Core还要早,它提供了一些更简明的记号来描述各种HTML元素的属性.
例如:使用HTML-DOM来获取表单对象的方法:
document.forms //HTML-DOM提供了一个forms对象.
3,CSS-DOM
CSS-DOM是针对CSS的操作.在JavaScript中CSS-DOM技术的主要作用是获取和设置style对象的各种属性.
例如:设置某元素style对象字体颜色的方法:element.style.color="red";
下面学习的是:jQuery中的DOM操作:
先构建出一棵DOM树:
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery中的DOM操作</title>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>
接下来的操作都是围绕这个DOM树而展开的. |
|
发表于 2010-12-3 19:09:58
