<!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>