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() ...
随机推荐
- 洛谷P1316 丢瓶盖
题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出 ...
- java 三次样条插值 画光滑曲线 例子
java 三次样条插值 画光滑曲线 例子 主要是做数值拟合,根据sin函数采点,取得数据后在java中插值并在swing中画出曲线,下面为截图 不光滑和光滑曲线前后对比: 代码: 执行类: p ...
- Codefroces 831B Keyboard Layouts
B. Keyboard Layouts time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Vue的全选功能实现思路
全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...
- Xcode7 的两个小坑
Xcode7 还在 beta.时不时崩一下什么的倒也是预料之中的事.没料到的是之前用着好好的,今天升完 El Capitan 之后,模拟器竟然不见了,设备倒是在 schema 栏右边里能看到.只是注明 ...
- WebForm使用JQuery实现DropDownList无刷新联动
目录(?)[-] 1 JS代码 2 页面相关控件用的是平台封装的控件普通DropDownList也可以 3 后台C代码 注意事项 原来用的微软封装的Ajax控件UpdatePannel和Scri ...
- python 序列排序 排序后返回相应的索引
https://blog.csdn.net/longwei92/article/details/83098289 https://blog.csdn.net/u013731339/article/de ...
- Java Web学习总结（8）——使用Cookie进行会话管理
一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...
- Project Euler 363 Bézier Curves（几何+二分）
题目链接: https://projecteuler.net/problem=363 题目: A cubic Bézier curve is defined by four points: \(P_0 ...
- JQ实现选项卡(jQuery原型插件扩展)
下边分为两个版本,一种是点击切换选项(index.js),一种是滑过切换选项(index1.js) HTML文件: jq使用jquery-1.11.3.js版本 <!DOCTYPE html&g ...