赞助
  // 节点的替换 / 标签的替换

        // 1 , $('已有标签').replaceWith(替换的新的标签)
        // 替换所有


        // 将已有的span标签,替换成 超链接a 标签
        $('span').replaceWith( $('<a href="http://www.baidu.com">百度</a>') );
        $('span').replaceWith( '<a href="http://www.baidu.com">百度</a>' );

        // 2 , 替换的新标签.replaceAll( $('已经标签') )
        // 替换所有

        $('<em>我是em标签</em>').replaceAll( $('a') );
 
 
  // 克隆节点

        // $().clone()   克隆复制标签节点
        // 参数1 : 默认值false,定义为true,克隆标签绑定的事件 
        //         子级事件默认也会克隆
        // 参数2 : 如果参数1,是true,参数2,默认开启,也是true
        //         参数1设定为true,参数2,设定为false 只克隆标签本身的事件,不克隆子级标签的事件
        //         参数1设定为false,参数2,没有任意作用,都是false效果
        // 不定义参数1,参数2,会克隆标签的所有属性和内容,但是不克隆标签绑定的事件
        // 定义参数1,true,克隆标签本身和标签子级事件
        // 定义参数1,false,参数2没有作用
        // 定义参数1,true,餐数2false,本身事件克隆,子级事件不克隆

        // 如果需要 克隆父级标签,但是不克隆父级事件
        //         子级事件要克隆

        $('div').click(()=>{
            console.log('我是div的事件');
        })

        $('span').click( ()=>{
            console.log('我是span的事件');
        } )

        // const cloneDiv = $('div').clone(false,true);

        // console.log(cloneDiv);

        // $('h1').append(cloneDiv)


        // 克隆div,没有事件,克隆span有事件

        // 只克隆内容,不克隆事件
        const cloneDiv = $('div').clone();

        // 内容,事件都克隆
        const cloneSpan = $('span').clone(true);

        // 节点操作是新增操作,不会覆盖原有内容
        cloneDiv.empty().appendTo('h1').append(cloneSpan);

        // html() 是 替换操作,会覆盖之前的原始内容
        cloneDiv.empty().appendTo('h1').html(cloneSpan);
posted on 2020-12-10 11:26  Tsunami黄嵩粟  阅读(92)  评论(0编辑  收藏  举报