<!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文档处理总结
原文地址：https://www.cnblogs.com/wangyang0210/p/9631717.html