wrap()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<script>
$("a").wrap("<div></div>");
</script>
</body>
</html>
wrap()方法是分别给所匹配的元素添加指定的标签,如下图,执行后我们会发现两个 a 标签均被指定的 div 标签包裹;
wrapAll()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<script>
$("a").wrapAll("<div></div>");
</script>
</body>
</html>
wrapAll()方法也将匹配的元素用指定的标签包裹起来,不同于wrap()方法的分别包裹,该方法是将所有匹配的元素包裹在一个指定的标签内;如下,将两个 a 标签都包裹在了 div 标签内;
wrapInner()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<script>
$("a").wrapInner("<div></div>");
</script>
</body>
</html>
wrapInner() 方法是将所匹配的元素的内容全部使用指定的标签包裹起来,这里是将 百度 和 腾讯 两个词用div包裹起来了;
unwrap()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<a href="http://www.baidu.com"><span id="link">百度</span></a>
</div>
<script>
$("#link").unwrap();//div标签不会去掉
</script>
</body>
</html>
unwrap()方法是用来移出匹配元素的父元素,用于取消 .wrap()方法的效果。