zoukankan      html  css  js  c++  java
  • jquery的节点的替换 节点的克隆

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

            // 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);
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    PDO扩展
    阿里云ECS VSFTP上传本地文件
    Nginx+lua_Nginx+GraphicsMagick来实现实时缩略图
    Mysql 5.6主从同步配置与解决方案
    windows安装配置mongodb及图形工具MongoVUE
    安装phpredis扩展以及phpRedisAdmin工具
    Redis安装配置以及开机启动
    CentOS安装Git服务器 Centos 6.5 + Git 1.7.1.0 + gitosis
    OpenStack 入门3
    Openstack 入门2
  • 原文地址:https://www.cnblogs.com/ht955/p/14113275.html
Copyright © 2011-2022 走看看