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

原創 &XYZ& 2020-04-02 15:34

文章目录

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>

在这里插入图片描述

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

Web前端开发常用到的和升职加薪的技能点分别是哪些？

隨着互聯網的高速發展以及技術的不斷革新，Web前端工程師需要掌握的技術也有所變更。很多人想知道當前常用的Web前端技術有哪些?如何快速掌握這些技術?接 常用的Web前端技術有哪些? Web前端是爲了協調前端設計與後端開發之間工作的崗位，是

原創 2023-10-10 09:55:05

现在入行web前端开发晚了？数据代表一切

前端程序員是大家都公認的高薪崗位，那他們的工資到底有沒有傳說中那麼高呢？我們來看看職友集的數據。 數據來源：職友集 就北上廣深杭的前端薪資來看，平均薪資均達到一萬以上。 通常來講： 工作1~2年後會成爲前端高級軟件工程師，年薪可以

原創 2023-10-10 09:54:58

layui使用serializeJson报Uncaught TypeError: $(...).serializeJson is not a function错

layui使用serializeJson報Uncaught TypeError: $(...).serializeJson is not a function錯 報錯原因是沒有layui自帶的jquery中沒有對應這個方法。 二種解決辦法：

原創 2023-02-08 23:50:08

个人Scrum敏捷开发转型中的技术实践

Scrum無處不在，說起Scrum敏捷開發框架，也許大家並不陌生，表面理解它其實並不複雜，但是真正用得好的公司並不多，我自己曾經的工作環境也依然沒有體驗過敏捷開發非常成熟的實踐過程，但是我依然推薦這種開發方式，不論是對於企業發展還是生活中

原創 2022-04-30 12:48:30

springboot集成socketio实现一对一实时聊天

看到別人的系統或者app都有聊天功能，大家有沒有想過自己的系統也集成進去呢？現在來揭曉！ 第一步：pom.xml添加socketio依賴 <dependency> <groupId>com.corundumstudio.so

原創 2022-04-30 11:11:09

js组合图片（在图上画二维码）

總的有兩個依賴， jquery和jquery.qrcode 。實現原理其實就是圖層的堆疊。做二維碼推廣的時候要用到此方法 <body> <div class="" id="qrcode" style="display: none;

原創 2022-04-30 10:42:12

Iframe不同层级方法调用和元素获取

jquery 獲取元素 父取子 $("#iframeId").contents().find("#elementId") 子取父 $("#elementId",window.parent.document) 方法、變量調用 父調

原創 2022-04-30 06:30:08

六年来技术变迁的心得体会

1 技術發展的一些體會 從2016年開始, 筆者走上了"程序猿"這條路, 至今已經有6年了. 這6年來, 從項目開發所使用的前後端技術不斷變遷, 我深切體會到這一行技術發展的日新月異, 何其迅速. 本文不談具體的技術細節, 只談一談入行這6

原創 2022-04-30 06:03:09

在没有jQuery的情况下查找最近的元素 - Finding closest element without jQuery

問題： I am trying to find the closest element with a specific tag name without jquery.我試圖在沒有 jquery 的情況下找到具有特定標籤名稱的最近元素。

fyin1314 2021-12-29 09:18:03

How to post an array of complex objects with JSON, jQuery to ASP.NET MVC Controller?

問題： My current code looks like the following. 我當前的代碼如下所示。 How can I pass my array to the controller and what kind of p

javail 2021-12-29 09:15:00

如何从 JavaScript 读取脚本标签中的 JSON？ - How can I read a JSON in the script-tag from JavaScript?

問題： I have a dynamically generated page where I want to use a static JavaScript and pass it a JSON string as a paramete

javail 2021-12-29 09:15:00

event.preventDefault() vs. return false (no jQuery)

問題： I wondered if event.preventDefault() and return false were the same.我想知道event.preventDefault()和return false是否相同。 I

javail 2021-12-28 21:15:02

如何使用JQuery获取GET和POST变量？ - how to get GET and POST variables with JQuery?

問題： How do I simply get GET and POST values with JQuery? 如何使用JQuery簡單地獲取GET和POST值？ What I want to do is something li

技術盛宴 2021-12-28 09:22:52

如何在 Vue 组件中格式化货币？ - How do I format currencies in a Vue component?

問題： My Vue component is like this :我的 Vue 組件是這樣的： <template> <div> <div class="panel-group"v-for="item in l

javail 2021-12-27 21:14:59

When should I use jQuery deferred's “then” method and when should I use the “pipe” method?

問題： jQuery's Deferred has two functions which can be used to implement asynchronous chaining of functions: jQuery的Defe

技術盛宴 2021-12-27 09:22:48