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

时间：2023-03-09 17:32:20
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>

相关文章