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文档处理总结的更多相关文章
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- jQuery文档操作方法对比和src写法
jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jQuery文档就绪事件
[jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jquery文档加载几种写法，图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
- jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
随机推荐
- 利用git向github上远程提交一个自己的开源项目
1.在电脑的系统变量中的path路径中配置git的环境变量: 找到git安装路径中bin的位置,如:X:\Git\bin 找到git安装路径中git-core的位置,如:X:\Git\libexec\ ...
- SkylineDemoForWeb JavaScript二次开发示例代码
SkylineDemoForWeb JavaScript二次开发示例代码 http://files.cnblogs.com/files/yitianhe/SkylineDemoForWeb.zip
- [03-01] JSP自定义标签
1.自定义标签的概念 目前我们在JSP中使用的标签都是HTML的标签,浏览器会自动解析运行,例如<form action=""></form>,这里的for ...
- Mac安装LNMP环境，升级php7
Mac安装nginx+mysql+php 安装nginx比较麻烦,要安装pcre ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre ...
- TCP/IP协议---ICMP协议及ping、traceroute
ICMP Internet控制报文协议通常被认为是IP层的组成部分,一般被IP层或更高层(TCP.UDP)使用.ICMP报文是在IP数据报内部被传输的.如图: ICMP报文的格式如下: 报文的前4个字 ...
- C# 16进制转 Brush 颜色对象
原文:C# 16进制转 Brush 颜色对象 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014117094/article/details/4 ...
- [转]zookeeper集群 initLimit和syncLimit
initLimit和syncLimit是针对集群的参数 1.tickTime:CS通信心跳数 Zookeeper 服务器之间或客户端与服务器之间维持心跳的时间间隔,也就是每个 tickTime 时间就 ...
- UML类图应该怎么看？
学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 我每次写博基本都是这样开头,除了激励自己,每句话也都挺有道理! 呵呵,今天是阴历2017年我工 ...
- Scala学习(四)---映射和元组
映射和元组 摘要: 一个经典的程序员名言是:＂如果只能有一种数据结构,那就用哈希表吧＂.哈希表或者更笼统地说映射,是最灵活多变的数据结构之一.映射是键/值对偶的集合.Scala有一个通用的叫法:元组, ...
- BugkuCTF web3
前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文章的形式发表,感谢大家一直以来的支持和理 ...