第三讲 JQuery 的dom模型操作

因为种种、我没有听老师讲的这堂课，不过我还是掌握了jQuery的dom模型操作，现在就来给大家聊聊在JQuery中怎么操作dom模型吧！

首先一定要记住几个常用的属性，这是非常重要的：

1. text（） —— 获取或设置标签中间的内容。（只能是纯文本）

2. html（）—— 获取或设置标签中间的内容。（可以设置html标签）

3. attr（）—— 获取或设置属性。

4. css（）—— 获取或设置样式（即：style）。

5. addClass（）、removeClass（）、toggleClass（）—— 用来添加、移除、（添加、移除）Class样式。

6. removeAttr() —— 移除指定的属性。

7. height（）、width（）—— 获取或设置高、宽。

8. val（）——获取表单元素的值。

9. hasClass（）——判断是否存在指定的样式。

接着就是常用的方法了：

创建元素：

$(“标签元素”) —— 创建一个元素。

添加元素：

append（） —— 添加元素到指定的父元素中。例如：父元素.append(子元素);

appendTo（）—— 将子元素添加到父元素中。例如：子元素.appendTo(父元素);

after（）—— 当前元素最后追加。

before（） —— 当前元素最前追加。

删除元素：

remove（） —— 删除元素。

包裹节点：

wrap（）—— 包裹元素。（添加父元素）—— 例如：$(“<input />”).wrap(“<div />”);用div将input标签包裹起来。

看到这里，其实jQuery操作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>无标题文档</title>
</head>
<style type="text/css">
input {
border:none;
border-bottom:1px #000000 solid;
}
* {
font-size:12px;
}
table {
border:1px #000000 solid;
border-collapse:collapse;
}
td {
border:1px #000000 solid;
padding:5px;
}
</style>
<script src="jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("table tr:gt(0)").find("a").click(function(){
$(this).parent().prevAll().each(function(){
var oldval=$(this).text();
$(this).empty().append($("<input value='"+oldval+"' oldvalue='"+oldval+"'/>"));
});
var ok=$("<a href='#'>确定&nbsp;&nbsp;</a>");
var cal=$("<a href='#'>取消&nbsp;&nbsp;</a>");
$(this).parent().append(ok).append(cal);
$(this).hide();
ok.click(function(){
$(this).parent().prevAll().each(function(){
var newval=$(this).children().val();
$(this).empty().text(newval);
});
$(this).parent().find(":first-child").show();
$(this).parent().find(":gt(0)").remove();
});
cal.click(function(){
$(this).parent().prevAll().each(function(){
var newval=$(this).children().attr("oldvalue");
$(this).empty().text(newval);
});
$(this).parent().find(":first-child").show();
$(this).parent().find(":gt(0)").remove();
});
});
});
</script>
</head>
<body>
可编辑的表格
<table width="852" height="269" border="0" cellpadding="0" cellspacing="0">
<tr style="background:#CCCCCC">
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
<td>操作</td>
</tr>
<tr>
<td>10001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>重庆</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>重庆</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>重庆</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>重庆</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>重庆</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>重庆</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>重庆</td>
<td><a href="#">修改</a></td>
</tr>
</table>
</body>
</html>

最后，多多练习，一定会有所收获的