本文详细介绍了jQuery中DOM操作的使用方法，包括查找节点、创建节点等核心内容，并通过实例代码展示了具体实现过程。
**jQuery的DOM操作（二）**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的DOM操作（二）</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
body{margin: 0;padding: 0;}
.content{width: 1000px;overflow: hidden;margin: 30px auto;position: relative;}
.content table{width: 100%;border: 1px solid #ccc;border-collapse: collapse;}
.content table thead{background: #ccc;}
.content table tr td{width:25%;text-align: center;border-bottom: 1px solid #ccc;line-height: 30px}
.bg{background: #ccc;}
h1{text-align: center;}
.part2{margin-left: 30px;}
</style>
</head>
<body>
<div class="content">
<h1>jQuery中的DOM操作（二）</h1>
<div class="part1">
<ul>
<li title="香蕉">香蕉</li>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
</ul>
</div>
<h2>1.查找节点</h2>
<div class="part2">
<h3>a.查找元素节点</h3>
<p>
<script type="text/javascript">
var $li = $("ul li:eq(0)"); //获取<ul>里第1个<li>节点
var li_txt = $li.text(); //获取第1个<li>节点的文本内容
document.write("显示的内容是："+li_txt); //打印出获取节点的文本
</script>
</p>
<h3>b.查找属性节点</h3>
<p>
<script type="text/javascript">
var $li = $("ul li:eq(1)"); //获取<ul>里第2个<li>节点
var li_title = $li.attr("title"); //获取第2个<li>节点的title属性
document.write("显示的内容是："+li_title); //打印出获取节点的title内容
</script>
</p>
</div>
<h2>2.创建节点</h2>
<div class="part2">
<h3>a.创建元素节点</h3>
<p>
<script type="text/javascript">
var $li_1 = $("<li></li>"); //创建第1个<li>节点
var $li_2 = $("<li></li>"); //创建第2个<li>节点
//通过append（）方法将创建的两个添加到网页当中
$("ul").append($li_1);
$("ul").append($li_2);
//上面两行代码可以合并成为下面的代码：
//$("ul").append($li_1).append($li_2);
</script>
</p>
<h3>b.创建属性节点</h3>
<p>
<script type="text/javascript">
var $li_1 = $("<li>橙子</li>"); //创建第1个<li>节点，包含元素节点和文本节点
var $li_2 = $("<li>柚子</li>"); //创建第2个<li>节点，包含元素节点和文本节点
//通过append（）方法将创建的两个添加到网页当中
$("ul").append($li_1);
$("ul").append($li_2);
//上面两行代码可以合并成为下面的代码：
//$("ul").append($li_1).append($li_2);
</script>
</p>
</div>
</div>
</body>
</html>运行如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
