jQuery 文档处理
- 内部插入
append()
appendTo()
prepend();
prependTo()
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
font-size: 微软雅黑;
}
div{
width: 100%;
height: 300px;
background: aqua;
}
</style>
<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="dv1">
<h1>1111111111111</h1>
<h1>222222222222222</h1>
<h1>333333333333</h1>
<h1>4444444444444</h1>
<h1>55555555555555</h1>
</div>
<br>
<div class="dv2"></div>
<script type="text/javascript">
$('.dv1 h1').click(function(){
//外部插入
// $('.dv2').append($(this));
// $(this).appendTo('.dv2');
// $('.dv2').prepend($(this));div2前面插入这个this
// $(this).prependTo('.dv2');插入到div2前面
//内部插入
//$(this).insertBefore('.dv2');
//$('.dv2').before($(this));
});
</script>
</body>
</html>
- 外部插入
after（）
before（）
insertAfter()
insertBefore()
外部插入类似，效果是插入的位置不同，在内部插入已给出代码
- 包围
wrap()
wrapInner()
wrapAll()
//其它代码一样，能看的出效果
<script type="text/javascript">
$('h1').click(function(){
// $('h1').wrap('<i></i>');//单个的进行包围
// $('h1').wrapInner('<i></i>');
// $('h1').wrapAll('<i></i>');外部全包围
});
</script>
- 替换
replaceWith()
remove()
<body>
<h1>1111111111111</h1>
<h1>222222222222222</h1>
<h1>333333333333</h1>
<h1>4444444444444</h1>
<h1>55555555555555</h1>
<script type="text/javascript">
$('h1').click(function(){
val=$(this).html;
$(this).replaceWith('<p>'+val+'</p>');
// $('<h1>Linux</h1>').replaceAll('h1');
});
</script>
</body>
- 删除
empty()
remove()
detach()
<body>
<h1>1111111111111</h1>
<h1>222222222222222</h1>
<h1>333333333333</h1>
<h1>4444444444444</h1>
<h1>55555555555555</h1>
<script type="text/javascript">
$('h1').click(function(){
// $('this').remove();
// $('this').empty();
//开发中不常用，一般将不用的标签隐藏较为保险
});
</script>
detach 移除用于事件，比如将要移除的内容添加到最后。相比于其他的移除，执行后是直接删除内容，这种更为常用。
- 复制
clone()
clone(true)
对象克隆方法。
两个方法的区别在于，clone()克隆出来的事务不能继续执行克隆，clone(true)除了自身，它所克隆的事物也能继续克隆。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
font-size: 微软雅黑;
}
div{
width: 100%;
height: 300px;
background: aqua;
}
</style>
<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
</head>
<body>
<div>
<img src="1.jpg">
</div>
<script type="text/javascript">
$('img').click(function(){
//$(this).after($(this).clone());
//$(this).after($(this).clone());
});
</script>
</body>
</html>
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
