jQuery文档处理总结

<!DOCTYPE html>
<html lang="cn">

<head>
<meta charset="UTF-8">
<title>文档操作</title>
<style type="text/css">
#imglist,
#imglist2 {
width: 98%;
padding: 10px;
border: 10px solid #0a0;
}

#imglist img,
#imglist2 img {
width: 200px;
height: 100px;
background: url('./imgs/loading.gif') no-repeat 50% 50%;
}

#imglist img.selected,
#imglist2 img.selected {
border: 5px solid #f00;
width: 190px;
height: 90px;
}
</style>
<script src="../jquery-1.8.3.min.js"></script>
</head>

<body>
<div id="imglist">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
</div>
<hr>
<div>
<!-- 内部插入 -->
<span>内部插入</span>
<br>
<button>append</button>
<button>appendTo</button>
<button>prepend</button>
<button>prependTo</button>
</div>
<div>
<!-- 外部插入 -->
<span>外部插入</span>
<br>
<button>after</button>
<button>insertAfter</button>
<button>before</button>
<button>insertBefore</button>
</div>
<div>
<!-- 包裹 -->
<span>包裹</span>
<br>
<button>wrap</button>
<button>wrapAll</button>
<button>unwrap</button>
<button>wrapInner</button>
</div>
<div>
<!-- 替换 -->
<span>替换</span>
<br>
<button>replaceWith</button>
<button>replaceAll</button>
</div>
<div>
<!-- 删除 -->
<span>删除</span>
<br>
<button>remove</button>
<button>empty</button>
<button>detach</button>
</div>
<div>
<!-- 复制 -->
<span>复制</span>
<br>
<button>clone</button>
</div>
<hr>
<div id="imglist2">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<img src="../imgs/Meinv009.jpg" alt="">
<span>测试</span>
</div>
<script>
$('button').click(function() {
// 创建元素对象
var img = $('<img src="../imgs/1.jpg">');

switch ($(this).html()) {

// 内部插入
// 向匹配的元素内部最后追加内容。
case 'append':
$('#imglist').append(img);
break;
// 把匹配的元素追加到另一个指定的元素集合内部的后面。
case 'appendTo':
$(img).appendTo('#imglist');
break;
// 向匹配的元素内部最前插入内容。
case 'prepend':
$('#imglist').prepend(img);
break;
// 把匹配的元素插入到另一个指定的元素集合内部的前面。
case 'prependTo':
$(img).prependTo('#imglist2');
break;

// 外部插入
// 向所有匹配元素之后追加内容
case 'after':
$('#imglist2 img').after(img);
break;
//把所有匹配的元素插入到另一个指定的元素/元素集合的后面。
case 'insertAfter':
$(img).insertAfter('#imglist');
break;
// 向所有匹配元素之前追加内容
case 'before':
$('#imglist img').before(img);
break;
//把所有匹配的元素插入到另一个指定的元素/元素集合的前面。
case 'insertBefore':
$(img).insertBefore('#imglist img');
break;

// 包裹
// 把所有匹配的元素用其他元素的结构化标记包裹起来。
case 'wrap':
$('#imglist img').wrap('<li>');
break;
//将所有匹配的元素用单个元素包裹起来
case 'wrapAll':
$('#imglist img').wrapAll('<li>');
break;
//移出元素的父元素。这能快速取消wrap()方法的效果
case 'unwrap':
$('#imglist img').unwrap('<li>');
break;
//将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
case 'wrapInner':
$('#imglist').wrapInner('<li>');
break;
// 替换
//将所有匹配的元素替换成指定的HTML或DOM元素。
case 'replaceWith':
$('#imglist img').replaceWith(img);
break;
//用匹配的元素替换掉所有被匹配到的元素。
case 'replaceAll':
$(img).replaceAll('#imglist img');
break;
// 删除
// 从DOM中删除所有匹配的元素。
case 'remove':
$('#imglist img.selected').remove();
break;
//删除匹配的元素集合中所有的子节点。
case 'empty':
$('#imglist').empty();
break;
//从DOM中删除所有匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
case 'detach':
$('#imglist img.selected').detach();
break;
//复制
//克隆匹配的DOM元素并且选中这些克隆的副本。
case 'clone':
$('#imglist img').clone().appendTo('#imglist2 span');
break;
}
});

// 选中效果,只允许选一张
$('#imglist img').click(function() {
$(this).addClass('selected').siblings('img').removeClass('selected');
});
</script>
</body>

</html>
jQuery文档处理总结

猜你喜欢
