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

時間 2020-05-22

原文原文鏈接

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

1、總結

一句話總結：wrap()、wrapAll()、unwrap()、innerWrap()四個方法

一、jquery中unwrap()方法是幹嗎的？

去除元素外的包裹元素javascript

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

二、wrap()、wrapAll()、innerWrap()的區別是什麼？

外層包，外層用一個包，在裏面包html

wrap():把每一個被選元素放置在指定的 HTML 內容或元素中。
wrapAll():將全部匹配的元素用單個元素包裹起來
wrapInner():將每個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來

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

一、相關知識

包裹節點:java

wrap():把每一個被選元素放置在指定的 HTML 內容或元素中。
wrapAll():將全部匹配的元素用單個元素包裹起來
unwrap():移出元素的父元素。
wrapInner():將每個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來

二、代碼

 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     
34     <script type="text/javascript">
35  $(function(){ 36  $('#btn1').click(function(){ 37                 // $('li').wrap('<div class="ccc"></div>')
38  $('li').wrap($('#div1')) 39                 //已存在的元素不會被移動，只會被複制，幷包裹被選元素。
40                 // $('li').wrap(function(){
41                 // return '<div class="ccc"></div>'
42                 // })
43 
44  }) 45  $('#btn2').click(function(){ 46                  // $('li').wrapAll('<div class="ccc"></div>')
47                      //$('li').wrapAll($('#div1'))
48  $('li').wrapAll(function(){ 49                     return '<div class="ccc"></div>'
50  }) 51  }) 52             // $('li').wrap('<div class="ccc"></div>')
53             // $('li').wrap('<div class="ccc"></div>')
54  $('#btn3').click(function(){ 55  $('li').unwrap() 56  $('li').unwrap() 57  }) 58  $('#btn4').click(function(){ 59                 // $('li').wrapInner($('#div1'))
60  $('li').wrapInner(function(){ 61                     return '<div class="ccc"></div>'
62  }) 63  }) 64  }) 65     </script>
66 </body>
67 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。