<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#car {
width: 300px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.0.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
// 删除节点:remove():方法返回值是被删除的节点，如果在未来需要把删除的节点添加回来，则需要保存这个返回值
var $p = $('p').remove();
// 把节点添加回来
$($p).appendTo('body');
var $p = $('p');
// 点击按钮，如果页面中有p标签则移除，如果没有，则添加
$('#button1').click(function(){
if ($('p').length != 0) {
// 有则删
$('p').remove();
} else {
// alert('添加标签');
$($p).prependTo('body');
}
});
// clone：方法用来复制标签，如果没有参数，则只是复制标签的样式和文本；如果有一个布尔值的参数true，则会连同事件一起复制
var $button = $('#button1').clone(true);
console.log($button);
把复制后的标签加载进body标签
$($button).appendTo('body');
点击清空按钮来清空商品
$('#clear').click(function(){
.empty()清空选择标签下的所有子标签
$('#car1').empty();
});
// 标签替换：A.replaceWith(B)使用B标签来替换A标签
// A.replaceAll(B)使用A标签来替换B标签
// 创建出用于替换的新img标签
var $img = '<img src="img/2.gif">';
// 点击change按钮，切换图片
$('#change').click(function(){
$('img').replaceWith($img);
//$($img).replaceAll('img');
});
})
</script>
</head>
<body>
<p>我是一个粉刷匠，啦啦啦，啦啦啦， 我是卖报的小行家</p>
<button id="button1">添加、删除p标签</button>
<div id="car">
<button>全选</button>
<button>结账</button>
<button id="clear">清空购物车</button>
<div id='car1'>
<div>商品一</div>
<div>商品二</div>
<div>商品三</div>
</div>
</div>
<img src="img/1.gif" alt="" />
<button id="change">切换</button>
</body>
</html>
