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 ...
随机推荐
- ESP8266开发综合篇(LUA开发-视频教程总揽)
为了解决基础教程简单入门但不实用,项目方案非常实用但比较难的问题,开始推出8266开发综合篇 综合篇涉及到AT,LUA,SDK,LUA(sdk)开发,LUA和SDK开发会同步进行,后期再整理AT指令的 ...
- 【iOS】build diff: /../Podfile.lock: No such file or directory
Github 上下载的开源项目,在 Xcode 打开运行后报了错,如图所示: 解决方法: 在工程设置中的 Build Phases 下删除 Check Pods Manifest.lock 及 Cop ...
- HTML 图片轮播制作工具
下载地址:http://wowslider.com/download/wowslider-win-setup.zip?utm_source=free_downl_win&utm_medium= ...
- odoo 订餐系统之消息提醒
打算入手odoo开发新的系统,先研究下开发的过程是如何的.案例模仿自带的订餐系统,此系统模块不多,但很典型,可以达到联系的目的.先记录下订餐系统消息提醒的开发过程. 1.添加自己的addons目录my ...
- Rabbitmq-direct演示
在上一节中我们创建了一个日志系统.实现将日志消息广播给所有的cusumer. 在这片教程中,我们将为日志系统添加一个功能:仅仅订阅一部分消息.比如:我们可以直接将关键的错误类型日志消息保存到日志文件中 ...
- Luogu P3374 【模板】树状数组 1
真正的模板题. 树状数组的思想很简单(不如说背代码更简单),每个节点记录多个节点的信息(每个点存x&(-x)个). 道理可以参见很多大佬的博客,最后前缀和的思想搞一下就好了.不想说也不会说. ...
- Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- Openstack架构概念图-简单汇总
OpenStack是一个云平台管理的项目,它不是一个软件.这个项目由几个主要的组件组合起来完成一些具体的工作.想要了解openstack,第一步我们可以观察他的概念图: 针对上图的翻译+解释: 上图主 ...
- proxy_pass反向代理配置中url后面加不加/的说明
在日常的web网站部署中,经常会用到nginx的proxy_pass反向代理,有一个配置需要弄清楚:配置proxy_pass时,当在后面的url加上了/,相当于是绝对根路径,则nginx不会把loca ...
- M1/M2项目阶段总结
1.M1/M2总结 我们这学期完成了学霸项目. 在M1阶段,我们首先进行了分工,完成了一个系统的计划,然后是对学长代码的移植和优化.在优化代码的过程中,我们遇到了不少问题,比如一些代码的冗余以及指向性 ...