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>