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 ...
随机推荐
- VisualStudio2008+水晶报表的使用
1:打开VisualStudio2008,新建一个Windows窗体应用程序项目,名称可以自定义,选择项目的保存路径,然后确定 刚新建好的窗体应用程序: 2. 把准备好的水晶报表插件复制到项目中的bi ...
- [Spark][Hive]外部文件导入到Hive的例子
外部文件导入到Hive的例子: [training@localhost ~]$ cd ~[training@localhost ~]$ pwd/home/training[training@local ...
- [JSOI2016]轻重路径[树链剖分]
题意 题目链接 分析 先对原树树剖,在一次删点操作后从根节点开始二分,如果一条边从重边变成轻边,必然有 \(size_u\le \frac{1}{2}size_{rt}\) (取等号是特判对应儿子消失 ...
- CSharp 案例：用 Dynamic 来解决 DataTable 数值累加问题
需求说明 给定一个 DataTable,如果从中取出数值类型列的值并对其累加? 限制:不知该列是何种数值类型. 解决方案 1.将表转换为 IEnumerable<dynamic>,而后获取 ...
- tomcat相关配置技巧梳理 (修改站点目录、多项目部署、限制ip访问、大文件上传超时等)
tomcat常用架构:1)nginx+tomcat:即前端放一台nginx,然后通过nginx反向代理到tomcat端口(可参考:分享一例测试环境下nginx+tomcat的视频业务部署记录)2)to ...
- box-flex 弹性合布局+WebApp布局自适应
问:随着屏幕改变,中间自适应 两边固定宽度? 参考: nec 布局 四种方法--博客园 问:左侧导航栏隐藏后,右侧内容宽度自动(响应式)变大? <!DOCTYPE html> <ht ...
- 《Linux课本》读书笔记 第四章
- Linux实践：ELF文件格式分析
标签(空格分隔): 20135321余佳源 一.基础知识 ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文件(目 ...
- win10装MySQL5.7
越来越发现装MySQL很费劲啊,装了N次,都很懵逼,找对的解决方案很重要. Mysql5.7下载地址:http://xiazai.zol.com.cn/detail/4/33431.shtml 安装步 ...
- Maximal GCD CodeForces - 803C （数论+思维优化）
C. Maximal GCD time limit per test 1 second memory limit per test 256 megabytes input standard input ...