jQuery操作节点

阿帆fan 2021-06-25

459

        jQuery 的节点操作

1. 创建节点
        + $(html结构字符串)
          => 当 $() 里面传递一个选择器的时候, 就是获取元素
          => 当 $() 里面传递一个 html 结构字符串的时候, 就是创建元素节点
          => 当 $() 里面传递一个 DOM 元素节点的时候, 就是转换成 jQuery 元素结合

   2. 插入节点
        + 内部插入(父子关系的插入)
          2-1. append()
            => 语法: 父元素.append(子元素)
            => 把子元素插入到父元素内部, 放在末尾的位置
          2-2. appendTo()
            => 语法: 子元素.appendTo(父元素)
            => 把子元素插入到父元素内部, 放在末尾的位置
          2-3. prepend()
            => 语法: 父元素.prepend(子元素)
            => 把子元素插入到父元素内容, 放在最前面的位置
          2-4. prependTo()
            => 语法: 子元素.prependTo(父元素)
            => 把子元素插入到父元素内容, 放在最前面的位置
        + 外部插入(兄弟关系的插入)
          2-5. after()
            => 语法: 存在元素.after(插入元素)
            => 把插入元素排在存在元素的后面, 以兄弟关系出现
          2-6. insertAfter()
            => 语法: 插入元素.insertAfter(存在元素)
            => 把插入元素排在存在元素的后面, 以兄弟关系出现
          2-7. before()
            => 语法: 存在元素.before(插入元素)
            => 把插入元素排在存在元素的前面, 以兄弟关系出现
          2-8. insertBefore()
            => 语法: 插入元素.insertBefore(存在元素)
            => 把插入元素排在存在元素的前面, 以兄弟关系出现

   3. 删除节点
        3-1. remove()
          => 语法: 元素集合.remove()
          => 把自己从自己的父元素里面移出
        3-2. empty()
          => 语法: 元素集合.empty()
          => 把自己变成空标签, 把所有后代节点全部移除

   4. 替换节点
        4-1. replaceWith()
          => 语法: 换下节点.replaceWith(换上节点)
        4-2. replaceAll()
          => 语法: 换上节点.replaceAll(换下节点)

   5. 克隆节点
        5-1. clone()
          => 语法: 元素集合.clone()
          => 必然携带所有节点过来
          => 第一个参数默认是 false, 表示是否克隆元素本身的事件, 选填 true
          => 第二个参数默认是跟随第一个, 表示是否克隆元素后代节点的事件, 选填
          => 注意: 当第一个参数是 false 的时候, 第二个参数没有意义

实战：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style>
    div {
      background-color: skyblue;
    }


    p {
      background-color: orange;
    }
</style>
</head>
<body>


  <div class="a">
    hello
    <p class="b">我是 div 里面的 p 标签</p>
    world
  </div>


  <hr>


  <script src="./jquery1.12.4.js"></script>
  <script>
    // 0. 准备一个节点
    const p = $('<p>我是 jQuery 创建的 p 元素节点</p>')


    // 1. 创建节点
    const div = $('<div>我是一个创建的 div</div>')
    console.log(div)


    // 2. 插入节点


    // 2-1. append()
    $('div').append(p)


    // 2-2. appendTo()
    p.appendTo($('div'))


    // 2-3. prepend()
    $('div').prepend(p)


    // 2-4. prependTo()
    p.prependTo($('div'))


    // 分析: p 是一个 jQuery 创建的元素节点, 但是是一个复杂数据类型的变量
    //      存储的是一个 地址, 只要我使用 p, 就是在使用堆里面得哪个空间
    $('div').append(p)
    $('div').prepend(p)
    // 上面一个下面一个   10
    // 上面一个下面没有   3
    // 上面没有下面一个   1




    // 2-5. after()
    $('div').after(p)


    // 2-6. insertAfter()
    p.insertAfter($('div'))


    // 2-7. before()
    $('div').before(p)


    // 2-8. insertBefore()
    p.insertBefore($('div'))




    // 3. 移除节点
    // 3-1. remove()
    $('div').remove()


    // 3-2. empty()
    $('div').empty()


    // 4. 替换节点
    // 4-1. replaceWith()
    $('div > p').replaceWith(p)


    // 4-2. replaceAll()
    p.replaceAll($('div > p'))




    // 5. 克隆节点
    $('.a').click(function () { console.log('div') })
    $('.b').click(function () { console.log('p') })


    // 5-1. clone()
    $('div').clone(false, true).insertAfter($('hr'))
</script>
</body>
</html>

点这里给我留言

@阿帆fan

数据库

文章转载自阿帆fan，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

jQuery操作节点

评论