jQuery包裹节点

最新推荐文章于 2019-10-02 18:34:57 发布

JamesZYW

最新推荐文章于 2019-10-02 18:34:57 发布

阅读量508

点赞数

分类专栏： jQuery 文章标签： jQuery包裹节点

本文链接：https://blog.csdn.net/zhanyouwen/article/details/51591297

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>jQuery包裹节点</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function(){
		// 测试jQuery wrap ,wrapAll,wrapInner
		// 给所有的li包装一个<font color='red'></font>
		$("#city li").wrap("<font color='red'></font>");
		// 给li最外层包装一个<font color='red'></font>
		$("#quyu li").wrapAll("<font color='red'></font>");
		// 给li文本包装一个<font color='red'></font>
		$("#jiedao li").wrapInner("<font color='red'></font>");
	});
</script>
</head>
<body>
	<p>你喜欢哪个城市?</p>
	<ul id="city">
    	<li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <hr />
    <ul id="quyu">
    	<li id="fr">芙蓉区</li>
        <li id="yl">岳麓区</li>
        <li id="gx">高新区</li>
    </ul>
    <hr />
    <ul id="jiedao">
    	<li >马王堆</li>
        <li >路丰路</li>
        <li >麓云路</li>
    </ul>
</body>
</html>