zoukankan      html  css  js  c++  java
  • 前端jQuery之文档操作

    1.文档操作
    内部插入
    A.append(B) 吧B添加到A的后面
    A.appendTo(B) 吧A添加到B的后面
    A.prepend(B) 吧B添加到A的前面
    A.prependTo(B) 吧A添加到B的前面
    外部插入
    A.after(B) 吧B添加到A的后面
    A.insertAfter(B) 吧A添加到B的后面
    A.before(B) 吧B添加到A的前面
    A.insertBefore(B) 吧A添加到B的前面
    2.克隆操作
    $(选择器).clone();

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>克隆</title>
    </head>
    <body>
    <button class="c1">点我</button>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(".c1").on("click",function () {
            $(this).clone(true).insertAfter($(this))
        })
    </script>
    </body>
    </html>

    3.替换操作

    replaceWith(content|fn)
    A.replaceWith(B) --> B替换A

    replaceAll(selector)
    A.replaceAll(B) --> A替换B
    //将所有的h5标题替换为a标签
    $('h5').replaceWith('<a href="#">hello world</a>')
    //将所有h5标题标签替换成id为app的dom元素
    $('h5').replaceWith($('#app'));

    4.删除操作

    删除节点后,整个标签都会被删除

    $('ul').remove();

    删除节点后,事件保留

    $(selector).detach(); 

    清空选中元素中的所有后代子节点

    //清空掉ul中的子元素,保留ul
    $('ul').empty()
     
  • 相关阅读:
    什么是Flex 布局
    wx.navigateTo、wx.redirectTo和wx.switchTab三种导航方式的区别
    Ajax 工作原理 及 实例
    NodeJS之 Express框架 app.use(express.static)
    Parcel 入门 (一)
    打包工具的介绍
    CSS网页布局
    《拖延心理学》阅读要点
    PHP实现页面静态化
    PHP中的魔术方法
  • 原文地址:https://www.cnblogs.com/LearningOnline/p/9128707.html
Copyright © 2011-2022 走看看