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() ...
随机推荐
- POJ Fence Repair(优先队列）
Fence Repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 51346 Accepted: 16857 De ...
- Linux启动过程总结
当我们按开机键后,主机就会执行: 1.POST(Power-On Self Test 加电自检). 2.读取BIOS中定义的开机设备启动程序,并加载MBR(主引导记录(Master Boot Reco ...
- 一、Docker安装
原文:一.Docker安装 如果没有特殊要求关闭selinux!关闭selinux!关闭selinux!重要事情说三遍.这个坑活活让我重装了3.4遍系统才发现问题 本系列基于Centos系统安装,包括 ...
- GraphX 图数据建模和存储
背景 简单分析一下GraphX是怎么为图数据建模和存储的. 入口 能够看GraphLoader的函数. def edgeListFile( sc: SparkContext, path: String ...
- Linux下vi替换字符命令操作实例
在Linux下的开发中,经常涉及到对文件里的字符进行处理,当中,对字符的替换操作也是非常的频繁. 本文以一个实际的文件为例,具体介绍了Linux下经常使用的vi替换字符命令,为相关的开发工作提供给了參 ...
- php图像处理（thinkphp框架有相对强大的图像处理功能）
php图像处理(thinkphp框架有相对强大的图像处理功能) 一.总结 1.php处理图像:php处理图像需要安装外库(gd库) 2.gd库函数可以非常完美的操作图像:安装好库之后,这个库里面的函数 ...
- amazeui学习笔记一（开始使用5）--藏品collections
amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...
- Flask项目之手机端租房网站的实战开发（三）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- 【习题 6-1 UVA-673】Parentheses Balance
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 括号匹配. 栈模拟就好. 多种括号也是一样可以做的. [代码] #include <bits/stdc++.h> usi ...
- [D3] Adding Arrows to Links
svg.append('defs').selectAll('marker') .data(['end']).enter() .append('marker') .attr('id', String) ...