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如何包裹元素和去除元素外的包裹的更多相关文章

  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. 1.17 Python基础知识 - 迭代器和生成器初识

    可循环迭代的对象称为可迭代对象,迭代器和生成器函数是可迭代对象. 列表解析表达式:可以简单高效处理一个可迭代对象,并生成结果列表 示例代码: [ i ** 2 for i in range(10) ] ...

  2. Android 打造属于自己的RxBus

    RxBus 通过RxJava实现Rxbus. 相信大家已经非常熟悉EventBus了.最近正在学习Rxjava,如果在项目中已经使用了Rxjava,使用RxBus来代替EventBus应该是不错的选择 ...

  3. cookie和session笔记

    1.http协议是无连接的,即每一次http请求都是新的,和上一次没有联系,这不利于和用户的交互.针对这一缺点产生了cookie. 2.cookie是一段保存在客户端上的验证信息,同一个域使用同一个c ...

  4. element-UI 表单校验失效处理

    1.el-form-item 的 prop属性绑定的要是字符串: eg: :prop="'answer[' + 0 + ']' "       //而不是    :prop=&qu ...

  5. Spring MVC modelandview

    一开始${Name} 不能显示 原来是: import org.springframework.web.portlet.ModelAndView; --错误的引入 import org.springf ...

  6. listctrl调整表头高度

    CListCtrl派生类下CMyListCtrl.h class CMyListCtrl :public CListCtrl { public: // 设置表头高度 void SetHeadHeigh ...

  7. 洛谷 P1054 等价表达式

    洛谷 P1054 等价表达式 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式, ...

  8. imageView-scaleType 图片压缩属性

    今天用到了图片压缩的属性,自己参照网上的说明,验证了一下,截图如下 (1)当图片背景是方形的时候 代码如下 <LinearLayout android:id="@+id/l31&quo ...

  9. node中间层

    node中间层 一.总结 1.node中间层作用:前端也是mvc,NodeJS之后,前端可以更加专注于视图层,而让更多的数据逻辑放在Node层处理 2.node中间层作用:当发现所有请求量太多应付不过 ...

  10. Solr 写数据流程

    Solr 写数据流程: 1.源字符串首先经过分词器处理,包括:拆分词以及去除stopword. 2.然后经过语言处理,包括大小写转换以及单词转换. 3.将源数据中需要的信息加入到Document中的各 ...