<!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文档处理总结的更多相关文章

  1. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  2. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  3. jQuery 文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  4. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  5. jQuery文档操作方法对比和src写法

    jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. jQuery文档就绪事件

    [jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...

  7. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  8. jquery文档加载几种写法，图片加载写法

    jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...

  9. jQuery 文档操作 - prependTo() ，appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  10. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

随机推荐

  1. java JDK安装教程

    JAVA_HOME G:\JDK\java7\jdk1.7.0_80    根据自己的哈     ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 然后找到CLASSPATH ...

  2. linux驱动编写之中断处理

    一.中断 1.概念 学过单片机的应该非常清楚中断的概念,也就是CPU在正常执行程序过程中,出现了突发事件(中断事件),于是CPU暂停当前程序的执行,转去处理突发事件.处理完毕后,CPU又返回被中断的程 ...

  3. CF932F Escape Through Leaf 斜率优化、启发式合并

    传送门 \(DP\) 设\(f_i\)表示第\(i\)个节点的答案,\(S_i\)表示\(i\)的子节点集合,那么转移方程为\(f_i = \min\limits_{j \in S_i} \{a_i ...

  4. CF293B Distinct Paths 搜索

    传送门 首先数据范围很假 当\(N + M - 1 > K\)的时候就无解 所以对于所有要计算的情况,\(N + M \leq 11\) 超级小是吧,考虑搜索 对于每一个格子试填一个数 对于任意 ...

  5. Scala学习(六)练习

    Scala中的对象&练习 1. 编写一个Conversions对象,加入inchesToCentimeters,gallonsToLiters和milesToKilometers方法 程序代码 ...

  6. 关于node.js的进程管理

    如果是单纯的运行一个node进程,那会比较简单,例如: node ./example.js 但是一般来说,当我们运行一个node进程之后,我们可能希望对这个进程进行更多的管理,例如,当node程序是一 ...

  7. ML.NET 示例：二元分类之信用卡欺诈检测

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  8. Docker 快速验证 HTML 导出 PDF 高效方案

    需求分析 项目中用到了 Echarts,想要把图文混排,当然包括 echarts 生成的 Canvas 图也导出 PDF. 设计和实现时,分析了 POI.iText.freemaker.world 的 ...

  9. 2018年计划小里程碑（6月）PMI-ACP 敏捷

    年初定的计划之一,考证... 7A,意料之外,也是意料之中.历时两个月多,2018.3.31号决定报名,顶着压报了ACP+ACP实战+PMP,考虑了下敏捷是未来项目管理的趋势,大部分公司正在向敏捷转型 ...

  10. mysql下批量清空某个库下的所有表(库不要删除，保留空库)

    总所周知,mysql下要想删除某个库下的某张表,只需要切换到该库下,执行语句"drop table tablename"即可删除!但若是该库下有成百上千张表,要是再这样一次次执行d ...