正文
（20）jQuery的文档操作（创建，添加、设置样式和删除等）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq文档操作</title>
<style>
.ppp {
width: 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样式
width:'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>
