<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq文档操作</title>
<style>
.ppp {
50px;
height: 50px;
background-color: #fe452c;
border-radius: 50%;
}
</style>
</head>
<body>
</body>
<script src="js/jq.js"></script>
<script>
//通过jq来创建标签
var $div = $('<div></div>'); //这个就是创建了div标签
var $p = $('<p></p>'); //这个就是创建了p标签
//设置样式 /文本 /类名 /属性 (单一属性和事件)
$div.css({ //设置css样式
'200px',
height:'200px',
backgroundColor:"red"
});
$p.addClass('ppp'); //赋值一个类名给p标签
$p.click(function () {
console.log('p点击了')
});
//添加到页面指定位置
$('body').append($div); //添加到页面指定位置,append就是添加到末尾
$('body').prepend($div); //prepend就是添加到首位
//如果把一个标签先添加到末尾，然后又添加到首位，则会被添加到首位
$div.append($p); //把p标签添放到div内部末尾
//在标签后添加目标标签
var $h2 = $('<h2 class="h2">我是h2</h2>');
$div.after($h2);
//在标签前添加目标标签
$div.before($h2);
//这样写也可以把标签添加到目标标签下
$h2.append('<b></b>');
//删除标签,删除操作一定会有返回值，且一定是被删除的对象
res = $p.remove(); //将自身删除，这个删除操作是把所有的附加数据，包括事件等
//将删除的值放到指定标签的最后
$('body').append(res);
//这个删除会保留附加的数据和事件
res = $p.detach();
$('body').append(res);
</script>
</html>