jQuery必會的增刪改查Dom操作3(wrap、wrapInner、wrapAll、unwrap)

wrap

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="demo"></div>

  <div class="demo1"></div>
  <div class="box"></div>

  <div class="demo2"></div>
  <div class="demo2"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //wrap

  //給類爲demo的div添加一個div父級,並且還要給父級添加一個類名:wrapper
  //方式一:
  // $('.demo').wrap('<div class="wrapper"></div>')
  //方式二:
  $('.demo').wrap($('<div class="wrapper"></div>'))


  //選中已有的標籤類名.box來包裹標籤類名.demo1,.box會被複制
  //方式一
  // $('.demo1').wrap( '.box' )
  //方式二
  $('.demo1').wrap($('.box'))
  

  //用函數來操控多個類名.demo2的div
  //方式一
  $('.demo2').wrap(function (index) {
    return '<div class="wrapper' + index + '"></div>'
  })
  //方式二
  // $('.demo2').wrap('<div></div>')
</script>
</html>

在這裏插入圖片描述


wrapInner

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="demo">
    <span></span>
    <span></span>
    <strong></strong>
  </div>

  <div class="demo2">
    <p></p>
    <p></p>
  </div>
  <div class="demo2">
    <p></p>
    <p></p>
  </div>

  <div class="demo3">
    <p></p>
    <p></p>
  </div>
  <div class="demo3">
    <p></p>
    <p></p>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  /*
    wrapInner:給元素裏面的子級添加一個父標籤
  */

  //給類名.demo的div裏面的子級添加一個父標籤div
  //寫法一
  // $('.demo').wrapInner('<div></div>')
  //寫法二
  $('.demo').wrapInner('<div/>')


  //給類名.demo2的div裏面的子級添加一個父標籤div,注意jq會自動遍歷html結構裏面的.demo2
  $('.demo2').wrapInner('<div/>')


  //給類名.demo3的div裏面的子級添加一個父標籤div並且還要添加類名,類名還不能相同,用function來完成
  $('.demo3').wrapInner(function (index) {
    return "<div class='wrapper" + index + "'></div>"
  })
</script>

</html>

在這裏插入圖片描述


wrapAll

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="demo">
    <span></span>
    <span></span>
  </div>
  <strong></strong>
  <div class="demo">
    <p></p>
    <p></p>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  /*
    wrapAll:
      給同等級的元素標籤加上一個共同的父級標籤
  */
  //給類名爲demo的div加上一個共同的父級div,如果中間還有其它的標籤元素,下面的demo會被剪切到上面來
  $('.demo').wrapAll('<div/>')

</script>

</html>

在這裏插入圖片描述


unwrap

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="wrapper">
    <div class="box">
      <div class="content">
        <div class="demo"></div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //unwrap:刪除元素的上一級的父級
  $('.demo').unwrap()

  //unwrap是刪除不了body標籤的
  $('.wrapper').unwrap()
</script>

</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章