js进阶 11-13  jquery如何包裹元素和去除元素外的包裹

一、总结

一句话总结：wrap()、wrapAll()、unwrap()、innerWrap()四个方法

1、jquery中unwrap()方法是干嘛的？

去除元素外的包裹元素

  1. 54             $('#btn3').click(function(){
  2. 55                 $('li').unwrap()
  3. 56                 $('li').unwrap()
  4. 57             })

2、wrap()、wrapAll()、innerWrap()的区别是什么？

外层包，外层用一个包，在里面包

  • wrap():把每个被选元素放置在指定的 HTML 内容或元素中。
  • wrapAll():将所有匹配的元素用单个元素包裹起来
  • wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

二、jquery如何包裹元素和去除元素外的包裹

1、相关知识

包裹节点:

  • wrap():把每个被选元素放置在指定的 HTML 内容或元素中。
  • wrapAll():将所有匹配的元素用单个元素包裹起来
  • unwrap():移出元素的父元素。
  • wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

2、代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <style>
  4.  </style>
  5.  <head>
  6.      <meta charset="UTF-8">
  7.      <title>演示文档</title>
  8.      <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  9.      <style>
  10.          li{
  11.              background: #ccc;margin-top: 25px;width: 150px;
  12.          }
  13.          .orange{background: orange}
  14.          .red{background: red}
  15.          .green{background: green}
  16.          .ccc{background: #ccc;}
  17.          #div1{width: 200px;height: 25px;}
  18.      </style>
  19.  </style>
  20.  </head>
  21.  <body>
  22.      <div id="div1" class="ccc"></div>
  23.      <ol>
  24.          <li class="orange">列表项1</li>
  25.          <li class="red"><i>列表项2</i></li>
  26.          <li class="green">列表项3</li>
  27.      </ol>
  28.      <input id="btn1" type="button" value='wrap'>
  29.      <input id="btn2" type="button" value='wrapAll'>
  30.      <input id="btn3" type="button" value='unwrap'>
  31.      <input id="btn4" type="button" value='wrapInner'>
  32.  
  33.      <script type="text/javascript">
  34.          $(function(){
  35.              $('#btn1').click(function(){
  36.                  // $('li').wrap('<div class="ccc"></div>')
  37.                  $('li').wrap($('#div1'))
  38.                  //已存在的元素不会被移动，只会被复制，并包裹被选元素。
  39.                  // $('li').wrap(function(){
  40.                  //     return '<div class="ccc"></div>'
  41.                  // })
  42.  
  43.              })
  44.              $('#btn2').click(function(){
  45.                   // $('li').wrapAll('<div class="ccc"></div>')
  46.                       //$('li').wrapAll($('#div1'))
  47.                   $('li').wrapAll(function(){
  48.                      return '<div class="ccc"></div>'
  49.                  })
  50.              })
  51.              // $('li').wrap('<div class="ccc"></div>')
  52.              // $('li').wrap('<div class="ccc"></div>')
  53.              $('#btn3').click(function(){
  54.                  $('li').unwrap()
  55.                  $('li').unwrap()
  56.              })
  57.              $('#btn4').click(function(){
  58.                  // $('li').wrapInner($('#div1'))
  59.                  $('li').wrapInner(function(){
  60.                      return '<div class="ccc"></div>'
  61.                  })
  62.              })
  63.          })
  64.      </script>
  65.  </body>
  66.  </html>
 

js进阶 11-13 jquery如何包裹元素和去除元素外的包裹的更多相关文章

  1. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  2. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  3. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  8. 解决火狐中用JQUERY .removeAttr（）无法去除元素属性的方法

    //为元素添加只读属性 $("#test").attr("readonly","readonly") //去除元素的只读属性 $(" ...

  9. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

随机推荐

  1. BZOJ2119: 股市的预测（后缀数组）

    Description 墨墨的妈妈热爱炒股,她要求墨墨为她编写一个软件,预测某只股票未来的走势.股票折线图是研究股票的必备工 具,它通过一张时间与股票的价位的函数图像清晰地展示了股票的走势情况.经过长 ...

  2. 【Codeforces Round #452 (Div. 2) D】Shovel Sale

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让N乘2->a 然后看一下位数是多少. 假设有x位(x>=2) 则(0..(a%10-1) ) + (99..9)[x- ...

  3. android通用JSON解析

    ackage cn.com.pcgroup.<a href="http://lib.csdn.net/base/15" class="replace_word&qu ...

  4. 如何使用maven 打包源代码呢？

    如何使用maven 打包源代码呢? http://hw1287789687.iteye.com/blog/1943157

  5. ORA-01078错误举例：SID的大写和小写错误

    案例重演: dbca建库.SID:metro    --手工建库时实例名小写的metro ...... [oracle@org54 ~]$ export ORACLE_SID=METRO        ...

  6. libiconv 支持的编码

    libiconv 支持的编码 php 中的 iconv() 函数常用来作编码转换用.作一些不同编码的动态数据的转换时常遇到一些未知编码的数据,这时 iconv() 支持那些编码转换就很重要. 刚开始, ...

  7. 2. ZooKeeper的ZAB协议。

    转自:https://blog.csdn.net/en_joker/article/details/78662880 ZooKeeper并没有完全采用Paxos算法,而是使用了一种称为ZooKeepe ...

  8. event事件对象 兼容写法：var oEvent=ev||event;和取消事件冒泡

    要在整个页面添加事件要使用document,例如要捕抓鼠标位置 document.onclink=function(ev)  //FireFox Chrome默认都是有一个值传进来的 { var oE ...

  9. openGLES（三）

    着色器语言 ​ 着色器语言基于c/c++语言,但是还是有区别的,它不是面向对象 数据类型概述 ​ 内建的数据类型:浮点型(float).布尔型(bool).整形(int),矩阵(matrix)以及向量 ...

  10. MyBatis学习总结（14）——Mybatis使用技巧总结

    1. 区分 #{} 和 ${}的不同应用场景 1)#{} 会生成预编译SQL,会正确的处理数据的类型,而${}仅仅是文本替换. 对于SQL: select * from student where x ...