05-jQuery文档操作

添加节点方法

  • 内部插入
append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后

prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面
  • 外部插入
外部插入
after(content|fn)
会将元素添加到指定元素外部的相邻后面

before(content|fn)
会将元素添加到指定元素外部的相邻前面

insertAfter(content)
insertBefore(content)

删除节点方法

    删除自身节点
    remove([expr])
    detach([expr])
    删除指定元素, 删除指定元素的内容和子元素, 指定元素自身不会被删除
    empty()
    注意点: detach删除之后再重新添加,原有事件可以响应
           利用remove删除之后再重新添加,原有的事件无法响应

替换节点的方法

替换
replaceWith(content|fn)
replaceAll(selector)
替换所有匹配的元素为指定的元素

复制节点方法

  • clone()方法传入false参数就是浅复制, 如果传入true参数就是深复制
    浅复制只会复制元素, 不会复制元素的事件,默认
    深复制会复制元素, 而且还会复制元素的事件
    //浅复制(默认)false
    $("button").eq(0).click(function () {
        var $li = $("li:first").clone(false);
        $("ul").append($li);
    });

    //深复制true
    $("button").eq(1).click(function () {
        var $li = $("li:first").clone(true);
        $("ul").append($li);
    });


    //li注册事件
    $("li").click(function () {
        alert($(this).html());
    });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,286评论 0 21
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,422评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,217评论 0 1
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,743评论 0 7
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 870评论 0 8