收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.元素包裹</title>
</head>
<body>
<a href="https://www.tmall.com">天猫</a>
<a href="https://www.taobao.com">淘宝</a>
<a href="https://www.jd.com">京东</a>
<a href="https://www.suning.com">苏宁</a>
<p>网上购物：</p>
<button>wrap()</button>
<button>wrapInner()</button>
<button>wrapAll()</button>
<button>unwrap()</button>
</body>
</html>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
//warp()包裹每一个节点
//1.用一个新标签来进行包装（包裹）
// $('a').wrap($('<li>'))
// 简写：
$('a').wrap('<li>')
// var node = $('a').wrap('<li>')
//2.是用一个已经存在的标签进行包装
// var node = $('a').wrap($('p')) //注意：如果p添加<>，就是添加p标签！
//简写：
// var node = $('a').wrap($('p')) //控制台输出默认元素为a标签
// var node = $('a').wrap($('p')).parent() //控制台输出默认元素为p标签
var node = $('a').wrap($('p')).parent().parent() //控制台输出默认元素为li标签
console.log(node)
})
$('button:eq(1)').on('click',function(){
//wrapInner()包裹每一个节点的内容
$('li').wrapInner('<strong>') //a标签是li的内容，所以用wrapInner包裹
})
$('button:eq(2)').on('click',function(){
//wrapAll()包裹每一个节点的内容
$('li').wrapAll('<ul style="background-color:brown">') //给所有li标签裹上一个ul标签
$('li').wrapAll('<div style="background-color:coral">') //给所有li标签裹上一个div标签
$('div').wrapAll('<div style="background-color:cyan">') //给所有div标签裹上一个div标签
})
$('button:eq(3)').on('click',function(){
//unwrap() 删除节点上的父元素，无参数
$('li').unwrap() //删除li标签的父元素(ul标签)
// $('li').unwrap().unwrap() //删除ul标签的父元素(div)
$('li').unwrap().unwrap().unwrap() //删除所有li的父元素
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
