<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery包装节点</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function (){
//包裹节点
//测试使用 jQuery 的wrap(), wrapAll(), wrapInner(),包裹节点
//使用<font>标签把每个li包装起来，
$("#city li").wrap("<font color='red'></font>");
//使用<font>标签把所有的li都包装起来
$("#major li").wrapAll("<font color='green'></font>");
//使用<font>标签把所有的li里面的文字包装起来
$("#language li").wrapInner("<font color='blue'></font>");
});
</script>
</head>
<body>
<p>选择你所喜欢的城市？</p>
<ul id="city">
<li>哈尔滨</li>
<li id="beijing">北京</li>
<li>上海</li>
<li id="guangzhou">广州</li>
</ul>
<p>选择你所喜欢的专业？</p>
<ul id="major">
<li id="computer">计算机</li>
<li>会计</li>
<li>管理学</li>
<li id="print">印刷工程</li>
</ul>
<p>选择你所喜欢的编程语言？</p>
<ul id="language">
<li>Java</li>
<li>C</li>
<li>.NET</li>
<li>PHP</li>
</ul>
</body>
</html>