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 分支管理：多人协作
当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin. 要查看远程库的信息,用git remote: $ git r ...
Tensorflow[LSTM]
0.背景通过对<tensorflow machine learning cookbook>第9章第3节"implementing_lstm"进行阅读,发现如下形式可以 ...
LiveCharts文档-3开始-6轴Axes
原文:LiveCharts文档-3开始-6轴Axes LiveCharts文档-3开始-6轴Axes 通常来说,你可以自定义LiveChart里的任何东西,Axes也不例外.下面这幅图展示了Axes. ...
在VS2017上使用C#调用非托管C++生成的DLL文件（图文讲解）
原文:在VS2010上使用C#调用非托管C++生成的DLL文件(图文讲解) 背景在项目过程中,有时候你需要调用非C#编写的DLL文件,尤其在使用一些第三方通讯组件的时候,通过C#来开发应用软件时,就 ...
微信小程序案例：获取微信访问用户的openid
在微信开发项目中,获取openid是项目常遇的问题,本文通过主要讲解实现在微信小程序中如何获取用户的openid,案例实现非常简单具体实现方法是通过登录接口获取登录凭证,然后通过request请求微 ...
bitcoin 源码解析 - 交易 Transaction(二) - 原理篇
这篇文章我断断续续写了呃···· 应该快三个星期了? 所以前后的风格可能差别相当大.真是十分的怠惰啊··· 最近实在是不够努力.用python重写bitcoin的项目也卡在网络编程部分(这方面真是我的 ...
Scala学习(五)练习
Scala中的类&练习 1. 改进Counter类,让它不要在Int.MaxValue时变成负数程序代码: class Counter { private var value=100 def ...
Jlink使用技巧之合并烧写文件
前言 IAP(In-application-programming),即在应用中编程.当产品发布之后,可以通过网络方便的升级固件程序,而不需要拆机下载程序.IAP系统的固件一般由两部分组成,即Boot ...
Scrum与看板区别
看板:在制品(work-in-progress, WIP)必须被限制 WIP上限和拉动式生产 1. Scrum与看板简述 Scrum:组织拆分,工作拆分,开发时间拆分,优化发布计划,过程优化看板 ...
PHP 设置调试工具XDebug PHPStorm IDE
先下载PHP扩展Xdebug https://xdebug.org, 可以复制自己的phpinfo粘贴到https://xdebug.org/wizard.php中, 会生成需要下载的版本, php. ...

jQuery文档处理总结

jQuery文档处理总结的更多相关文章

随机推荐

热门专题