元素 内外插入 替换 删除 remove detach 克隆 页面加载

创建元素

 //jq
        var pDom = $("<p>人性本恶</p>")[0];
            console.log(pDom);

内部插入

<div class="box">
        <h2>骚年，向前冲</h2>
    </div>
    <script>
        var pDom = $( "<p>加油，加油，加油！！！</p>" );
            console.log(pDom);

        $(".box").append(pDom);  //在目标元素 内部末尾 添加新元素

外部插入

// 创建元素  插入文本
            var pDom = $("<p>2.就单纯的认为你发生了什么事情</p>");
            var hDom = $( "<h3>3.后来才发现  原来是除了和我在一起  你和谁在一起都很开心</h3>" );
        // 在外部前面插入
            $(".box").before( pDom );//把元素插在目标元素外部前面
        // 将元素插入在外部前面
            hDom.insertBefore( $( ".box" ) );// 元素在外部前面插入
        // 在外部后面插入
            $(".box").after( pDom );// 把元素插入目标元素后面
        // 将元素插入在外部后面
            hDom.insertAfter( $( ".box" ) );// 元素在外部后面插入

包裹元素

<span>打扰到你，我很抱歉</span>
    <span>以后不会了</span>
    <div>
        <span>在下退了</span>
    </div>
    <p>
        <span>这一退，可能就是一辈子</span>
    </p>
    <script>
        // 使用 p 标签 包裹每一个 span 标签
            // $("sapn").wrap("<p></p>");//创建 p 标签  一个 p 标签 单独包裹一个span

        // 一个 p 标签包裹所有的 span
            // $("span").wrapAll("<p></p>");  // 所有span标签  包裹在一块

        // 移除 元素 外部 包裹 的元素
            $("span").unwrap("p");  // 移除 外部 原来就 包裹的 元素

替换元素

<div class="box">二十四桥明月夜，玉人何处教派吹箫</div>
    <script>
        // $(".box").replaceWith("<p>青山隐隐水迢迢，秋尽江南草未凋</p>");//将目标元素替换为新元素
        $("<p>青山隐隐水迢迢，秋尽江南草未凋</p>").replaceAll(".box");//用 新元素  替换  目标元素
    </script>

删除元素

<div class="box">
        <p>桃花影落飞神剑，</p>
        <h2>碧海潮生按玉箫。</h2>
    </div>

    <script>
        /* 
            remove()    删除目标元素所有信息  包括子元素
            empty()     删除目标元素所有文本信息
            detach()    删除目标元素所有信息  包括子元素
        */
        

        // $(".box").remove();
        // $(".box").empty();
        $(".box").detach();

remove 与 detach

<div>
        <h2>remove</h2>
        <button class="rdel">删除节点</button>
        <button class="radd">添加节点</button>
    </div>
    <div>
        <h2>detach</h2>
        <button class="ddel">删除节点</button>
        <button class="dadd">添加节点</button>
    </div>
    <div class="box">

    </div>


    <script>
        $(".box").click(function(){
            alert("哈喽  你好啊");
        });

       

        var removeDom = '';
        $(".rdel").click(function(){
            removeDom = $(".box").remove();//删除
        });

        $(".radd").click(function(){
            $("body").append(removeDom);// 显示 / 添加
        });

        

        var detachDom = '';
        $(".ddel").click(function(){
            detachDom = $(".box").remove();  
            // remove 有返回值  设置变量为空的那意思是  让remove的返回值 赋值给变量 在下边调用变量
        });

        $(".dadd").click(function(){
            $("body").append(detachDom); //这里是调用返回值 赋值过后的 变量
        });

克隆元素

 <button class="btn" id="btn">克隆</button>
    <div class="box" id="box">
        <p>瀚海堆白骨</p>
        <p>风携刀下魂</p>
    </div>


    <script>
        $("#box").click(function(){
            alert("烟霞散彩，日月摇光。千株老柏，万节修篁")
        })



        $(".btn").click(function(){
            //克隆选择器用id  不可以用class以为用class会出现反复克隆的现象1 2 4 8等叠加
            var cloneDom = $("#box").clone(true);
            $("body").append( cloneDom );

页面加载

   //  onload  页面载入  --  原生态  (dom 、css 、图片 、等资源 加载完成) 执行命令
        window.onload = function(){
            console.log("落魄迂疏自可怜，");
        }
        window.onload = function(){
            console.log("落魄迂疏自可怜");
        }


        //  ready  页面加载  --  jQuery  (dom加载完成) 执行命令
        $(document).ready(function(){
            console.log("棋为日月酒为年。");
        });
        $(document).ready(function(){
            console.log("人生不向花前醉，");
        });

        // jQuery  --  简化版      ready
        $(function($){    //听发到的另一个名字  (入口函数)  不知对错
            console.log("弹指流年到从前。");
        });

/* 
    onload  是原生态js的方法  等页面全部加载完成  执行   不可以写多个  后边的会把前边的覆盖
    ready   是jq的方法   只需要的dom加载完成  就可以执行   可以写多个
 */