从零玩转jQuery-文档处理-阿里云开发者社区

开发者社区> 开发与运维> 正文

从零玩转jQuery-文档处理

简介: 添加节点 内部插入 append(content|fn) appendTo(content) 将元素添加到指定元素内部的最后 // 1.创建一个节点 var $li = $("新增的li"); // 2.

添加节点

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").append($li);
$li.appendTo("ul");
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").prepend($li);
$li.prependTo("ul");
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").after($li);
$li.insertAfter("ul");
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").before($li);
$li.insertBefore("ul");

删除节点

  • empty()
    • 删除指定元素的内容和子元素, 指定元素自身不会被删除
$("div").empty();
// 删除所有div
$("div").remove();
// 删除div中id是box1的那个div
$("div").remove("#box1");
// 删除所有div
$("div").detach();
// 删除div中id是box1的那个div
$("div").detach("#box1");
  • remove和detach区别
    • remove删除元素后,元素上的事件会被移出
    • detach删除元素后,元素上的事件会被保留
$("button").click(function () {
    // $("div").remove();
    // $("div").empty();
    // $("li").remove(".item");

    // 利用remove删除之后再重新添加,原有的事件无法响应
    // var $div = $("div").remove();
    // 利用detach删除之后再重新添加,原有事件可以响应
    var $div = $("div").detach();
    // console.log($div);
    // 将删除的返回值重新添加到body上
    $("body").append($div);
});
$("div").click(function () {
    alert("div被点击了");
});

替换节点

  • replaceWith(content|fn)
    • 将所有匹配的元素替换成指定的HTML或DOM元素
    • replaceWith参数可以是一个DOM元素
    • replaceWith参数也可以是一个代码片段
  • replaceAll(selector)
    • 用匹配的元素替换掉所有 selector匹配到的元素
// 编写jQuery相关代码
$("button").click(function () {
    // 创建一个新的节点
    var $item = $("<h6>我是标题6</h6>");
    // 利用新的节点替换旧的节点
    // $("h1").replaceWith($item);
    $item.replaceAll("h1");
});

复制节点

  • 复制一个节点
  • 浅复制不会复制节点的事件
  • 深复制会复制节点的事件
$(function () {
    // clone([Even[,deepEven]])
    $("button").eq(0).click(function () {
        // 1.浅复制一个元素
        var $li = $("li:first").clone(false);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li无法响应事件
    });
    $("button").eq(1).click(function () {
        // 1.深复制一个元素
        var $li = $("li:first").clone(true);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li可以响应事件
    });

    $("li").click(function () {
        alert($(this).html());
    });
});

包裹节点

  • 都讲了这么多了, 骚年动动手, 查阅下文档, 尝试下自学这几个方法
  • 编程不是死记硬背, 是学会找到解决问题的思路和自学新知识的方法

节点操作练习

img_16bbadca6fc05b5404997cf99eaebd84.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章