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 ...
随机推荐
- MySQL（九）插入、更新和删除
常用的SQL语句,除了select用于查询,还有insert.update.delete等. 一.insert insert:用来插入(或添加)行到数据库中,常见方式有以下几种: ①插入完整的行: ② ...
- 源代码管理工具(下)-SVN目录结构
内容中包含 base64string 图片造成字符过多,拒绝显示
- 图像YUV格式介绍
图像YUV格式介绍 1 YUV格式简介 YUV格式,与我们熟知的RGB类似,YUV也是一种颜色编码方法,主要用于电视系统以及模拟视频领域,它将亮度信息(Y)与色彩信息(UV)分离,没有UV信息一样 ...
- 重装系统之win10不能进入bios界面
原因 自Win10发布以来,新出厂的预装Win10的电脑都默认在UEFI模式下启动操作系统.UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提 ...
- Java 中单引号和双引号的区别
引自:https://blog.csdn.net/hubianyu/article/details/39700367 单引号引的数据 是char类型的 双引号引的数据 是String类型的char定义 ...
- [Oracle]Master表字段扩张时的对应方法
Master表字段扩张时的对应方法 如果Master表的数据量很大,Master表中的列,宽度扩张了,MVIEW表如何对应处理? 此时,重建MVIEW可能会耗费很长的时间. 可以采用 alter ma ...
- CQOI2018简要题解
CQOI2018简要题解 D1T1 破解 D-H 协议 题意 Diffie-Hellman 密钥交换协议是一种简单有效的密钥交换方法.它可以让通讯双方在没有事先约定密钥(密码)的情况下,通过不安全的信 ...
- SNMP基础知识
注:本篇博客并非原创,仅是学习笔记 1. 概述1.1 诞生背景1.2 SNMP简介1.3 版本1.4 术语1.5 网络结构1.6 MIB简介2. Linux的SNMP安装 1. 概述 1.1 诞生背景 ...
- Error【0006】：could not create or update nagios.configtest
1. 错误背景 在本系列博客<Nagios监控系统部署(源码).md>中(笔记内链:Nagios监控系统部署(源码).md,博客园地址:https://www.cnblogs.com/li ...
- Oracle_安装问题
[INS-07003] 访问 BeanStore 时出现意外错误 oracle安装时出现以下问题: 原因:未配置环境变量CLASSPASH 解决方法:新增系统变量,在我的电脑上右击-属性-高级系统 ...