js进阶 11-13 jquery如何包裹元素和去除元素外的包裹
js进阶 11-13 jquery如何包裹元素和去除元素外的包裹
一、总结
一句话总结：wrap()、wrapAll()、unwrap()、innerWrap()四个方法
1、jquery中unwrap()方法是干嘛的？
去除元素外的包裹元素
54 $('#btn3').click(function(){
55 $('li').unwrap()
56 $('li').unwrap()
57 })
2、wrap()、wrapAll()、innerWrap()的区别是什么？
外层包，外层用一个包，在里面包
- wrap():把每个被选元素放置在指定的 HTML 内容或元素中。
- wrapAll():将所有匹配的元素用单个元素包裹起来
- wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
二、jquery如何包裹元素和去除元素外的包裹
1、相关知识
包裹节点:
- wrap():把每个被选元素放置在指定的 HTML 内容或元素中。
- wrapAll():将所有匹配的元素用单个元素包裹起来
- unwrap():移出元素的父元素。
- wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{
background: #ccc;margin-top: 25px;width: 150px;
}
.orange{background: orange}
.red{background: red}
.green{background: green}
.ccc{background: #ccc;}
#div1{width: 200px;height: 25px;}
</style>
</style>
</head>
<body>
<div id="div1" class="ccc"></div>
<ol>
<li class="orange">列表项1</li>
<li class="red"><i>列表项2</i></li>
<li class="green">列表项3</li>
</ol>
<input id="btn1" type="button" value='wrap'>
<input id="btn2" type="button" value='wrapAll'>
<input id="btn3" type="button" value='unwrap'>
<input id="btn4" type="button" value='wrapInner'> <script type="text/javascript">
$(function(){
$('#btn1').click(function(){
// $('li').wrap('<div class="ccc"></div>')
$('li').wrap($('#div1'))
//已存在的元素不会被移动，只会被复制，并包裹被选元素。
// $('li').wrap(function(){
// return '<div class="ccc"></div>'
// }) })
$('#btn2').click(function(){
// $('li').wrapAll('<div class="ccc"></div>')
//$('li').wrapAll($('#div1'))
$('li').wrapAll(function(){
return '<div class="ccc"></div>'
})
})
// $('li').wrap('<div class="ccc"></div>')
// $('li').wrap('<div class="ccc"></div>')
$('#btn3').click(function(){
$('li').unwrap()
$('li').unwrap()
})
$('#btn4').click(function(){
// $('li').wrapInner($('#div1'))
$('li').wrapInner(function(){
return '<div class="ccc"></div>'
})
})
})
</script>
</body>
</html>
js进阶 11-13 jquery如何包裹元素和去除元素外的包裹的更多相关文章
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- 解决火狐中用JQUERY .removeAttr（）无法去除元素属性的方法
//为元素添加只读属性 $("#test").attr("readonly","readonly") //去除元素的只读属性 $(" ...
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
随机推荐
- Vue自定义函数挂到全局方法
方法一:使用Vue.prototype //在mian.js中写入函数 Vue.prototype.getToken = function (){ ... } //在所有组件里可调用函数 this.g ...
- codevs 5960 信使
codevs 5960 信使 题目描述 Description 战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单 ...
- 03002_MySQL数据库的安装和配置
1.MySQL的安装 (1)下载mysql-5.5.49-win32.msi, 链接:MySQL安装包下载 密码:geqh : (2)打开下载的MySQL安装文件mysql-5.5.27-win32. ...
- 【Codeforces Round #447 (Div. 2) B】Ralph And His Magic Field
| [链接] 我是链接,点我呀:) [题意] 给你一个n*m矩阵,让你在里面填数字. 使得每一行的数字的乘积都为k; 且每一列的数字的乘积都为k; k只能为1或-1 [题解] 显然每个位置只能填1或- ...
- SQl 事务增加数据
连SQl简单地事务处理多表的情况 begin transaction declare @error int declare @QID int set @error = 0 insert into HW ...
- jquery 获取上一个兄弟元素和下一个兄弟元素
jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQu ...
- 格式化时间的一个好方法(补充moment)
/** * * 格式化时间 * @param {*} time * @param {*} fmt * @returns * time(new Date(), 'yyyy/MM/dd') ==> ...
- Spring Boot Shiro 权限管理
Spring Boot Shiro 权限管理 标签: springshiro 2016-01-14 23:44 94587人阅读 评论(60) 收藏 举报 .embody{ padding:10px ...
- Linux下的lds链接脚本简介（三）
八. 内存区域命令 在默认情形下,连接器可以为section在程序地址空间内分配任意位置的存储区域.并通过输出section描述的> REGION属性显示地将该输出section限定于在程序地址 ...
- RTC时钟和BKP的配置stm32
摘自:https://blog.csdn.net/gtkknd/article/details/52233605 RTC和后备寄存器通过一个开关供电,在VDD有效的时候选择VDD供电,否则选择VBAT ...