js之jQuery的DOM操作

jQuery的元素操作

//创建：
        document.createElement("div")
        console.log($("<div>"));
        var s = $("<span>");

// 插入
        // 要插入的父元素.appendChild(ele);
        append:插入指定父元素的最后一个子元素
        // $("#box")被s插入了
        $("#box").append(s);

        // 把s插入到$("#box")中
        s.appendTo($("#box"));
        
        // prepend:插入指定父元素的第一个子元素
        $("#box").prepend(s);
        s.prependTo($("#box"));

        // before:给指定元素，添加上一个兄弟
        $("#box").before(s);

        // after:给指定元素，添加下一个兄弟
        $("#box").after(s);

// 删除
        // 删除指定元素
        $(".box").remove();
        // 删除所有子元素
        $("#box").empty();
 // 修改
        // 获取标签自身同时删除自己
        console.log($("#box").replaceWith());

        // 传字符的参数，会修改标签
        $("#box").replaceWith("<span id='"+ $("#box").attr("id") +"'>"+ $("#box").html() +"</span>");

 // 克隆
        $("#box").click(function(){
            console.log(1);
        })

        var b = $("#box").clone();
        $("body").append(b);

        // 除了克隆结构，还会克隆事件
        var b = $("#box").clone(true);
        $("body").append(b);

jQuery的元素尺寸
01 操作元素的宽和高

02 获取元素的内置宽和高

03 获取元素的外置宽和高

jQuery的元素位置
01 元素相对页面的位置

02 元素相对父级元素的偏移量

03 获取页面卷去的宽度高度