jQuery Api 学习（六、jQuery 文档 - 操作文档）

最新推荐文章于 2024-10-09 12:15:53 发布

「已注销」

最新推荐文章于 2024-10-09 12:15:53 发布

阅读量405

点赞数 3

分类专栏： # jQuery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/Ares5kong/article/details/121038010

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

1. 内部插入
2. 外部插入
3. 清空元素内容
4. 克隆元素

1. 内部插入

将新建元素插入到目标元素的内部

函数名	参数	调用方	描述
append	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素最后
prepend	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素最前
appendTo	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素最后
prependTo	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素最前

append 和 appendTo 功能是一样的，只不过调用对象和参数换了个位置，prepend，prependTo 同理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div>
      <p>原来的内容</p>
    </div>
    <div>
      <p>原来的内容</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // append 和 prepend 使用时语法是目标元素在前，新建元素在后
      let firstDiv = $('div:first-of-type')
      firstDiv.append('<p>append 添加的元素</p>') // 插入到目标元素内部末尾
      firstDiv.prepend('<p>prepend 添加的元素</p>') // 插入到目标元素内部头部

      // appendTo 和 prependTo 使用时语法是新建元素在前，目标元素在后
      let lastDiv = $('div:last-of-type')
      $('<p>appendTo 添加的元素</p>').appendTo(lastDiv) // 插入到目标元素内部末尾
      $('<p>prependTo 添加的元素</p>').prependTo(lastDiv) // 插入到目标元素内部头部
    </script>
  </body>
</html>

2. 外部插入

将新建元素插入到目标元素的外部

函数名	参数	调用方	描述
before	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素前面
after	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素后面
insertBefore	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素前面
insertAfter	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素后面

before 和 insertBefore 功能是一样的，只不过调用对象和参数换了个位置，after，insertAfter 同理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div>
      原来的内容
    </div>
    <br /><br /><br />
    <div>
      原来的内容
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // before 和 after 使用时语法是目标元素在前，新建元素在后
      let firstDiv = $('div:first-of-type')
      firstDiv.before('<p>before 添加的元素</p>') // 插入到目标元素前面
      firstDiv.after('<p>after 添加的元素</p>') // 插入到目标元素后面

      // insertBefore 和 insertAfter 使用时语法是新建元素在前，目标元素在后
      let lastDiv = $('div:last-of-type')
      $('<p>insertBefore 添加的元素</p>').insertBefore(lastDiv) // 插入到目标元素前面
      $('<p>insertAfter 添加的元素</p>').insertAfter(lastDiv) // 插入到目标元素后面
    </script>
  </body>
</html>

3. 清空元素内容

清空目标元素内部的所有文本及子元素

函数名	参数	所属
empty	无	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>这个会被删除</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').empty()
    </script>
  </body>
</html>

4. 克隆元素

克隆目标元素及子元素

函数名	参数	所属
clone	布尔值（是否克隆元素事件）	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // 原DIV
      let source = $('div:first-of-type')
      source.click(() => {
        alert('点击事件')
      })
      // 复制的DIV，clone(true) 会复制元素事件
      $('div:first-of-type').after(source.clone(true))
    </script>
  </body>
</html>