jQuery的节点操作删除节点替换节点克隆节点

最新推荐文章于 2023-02-01 23:02:22 发布

Allen·赵

最新推荐文章于 2023-02-01 23:02:22 发布

阅读量389

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108932886

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery的节点操作

<body>

<h1>我是h1标签</h1>

<script src="./jquery.min.js"></script>
<script>
    // jQuery的节点操作
    
    // 1,创建节点
    //   给一个变量,赋值,赋值形式是 $('你要创建的标签')

    // 创建了一个div标签节点
    const oDiv1 = $('<div>我是div标签1</div>');

    // 创建标签的同时,可以定义标签的属性和属性值
    const oDiv2 = $('<div class="div1" name="div">我是div标签2</div>');

    // 2,写入节点
    //   为了方便链式编程,jQuery中提供了多种写入节点的方法

    // (1), $(父级标签).append(要写入的子级标签)
    // 在最后 --- 父子关系
    // $('h1').append(oDiv1);
    // $('h1').append( $('<a href="https://www.baidu.com">百度</a>') );

    // (2), 要写入的子级标签.appendTo( $(父级标签) )
    // 在最后 --- 父子关系
    // oDiv2.appendTo( $('h1') );
    // $('<span>我是span</span>').appendTo( $('h1') );


    // (3), $(父级元素).prepend(子级标签)
    // 在起始 --- 父子关系
    // $('h1').prepend(oDiv1);

    // (4) 自己标签.prependTo( $(父级标签) )
    // 在起始 --- 父子关系
    // oDiv2.prependTo( $('h1') );


    // (5) 已有标签.after(新增标签)  
    // 在之后 --- 兄弟关系
    // $('h1').after(oDiv1);


    // (6) 新增标签.insertAfter(已有的标签)  
    // 在之后 --- 兄弟关系
    // oDiv2.insertAfter( $('h1') );


    // (7) 已有标签.before(新增标签)  
    // 在之后 --- 兄弟关系
    $('h1').before(oDiv1);


    // (8) 新增标签.insertBefore(已有的标签)  
    // 在之后 --- 兄弟关系
    oDiv2.insertBefore( $('h1') );



    // 总结:
    // 1,创建标签,是使用 js 的语法定义变量,来存储
    //   jQuery中,定义的都是js的操作方法,没有定义变量的语法
    //   要想定义变量,必须是 js 语法

    // 2,写入时,可以直接写入 js语法变量 中存储的标签对象
    //          也可以直接写入 $(创建的标签)

    // 3,写入语法,为了方便链式编程 
    // 具体使用那种语法,完全看,你当前的标签对象是哪个
    //    父子
    //       在最后
    //           $(父级).append(子级)
    //           子级.appendTo($(父级))
    //       在之前
    //           $(父级).prepend(子级)
    //           子级.prependTo($(父级))
    //    兄弟
    //       在之后
    //           $(已有标签).after(新增标签)
    //           新增标签.insertAfter($(已有标签))
    //       在之前
    //           $(已有标签).before(新增标签)
    //           新增标签.insertBefore($(已有标签))
</script>

删除节点

<body>
<div>
    我是div
    <span>我是span</span>
    <h1>我是h1</h1>
    <p>我是p标签</p>
</div>
<script src="jquery.min.js"></script>
<script>
    // 删除节点

    // 1, empty()
    // 将 标签对象,定义为一个空标签
    // 所谓的空标签,就是没有任何的内容
    // $('div').empty();

    // 2, remove()
    // 将 标签对象本身,从页面中移除
    // 移除,也是就是这个标签本身都不存在了
    // $('div').remove();

    // 删除子节点,或者清空子节点
    // 通过强大的选择器,选择到子节点就可以了

    // $('div').remove();    删除div

    $('div>span').remove();  // 删除div中的span标签


</script>
</body>

替换节点

<div>
    我是div
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>

    <a href="JavaScript" name="a">我是要被替换的</a>
    
    <h1>我是h1</h1>
    <p>我是p标签</p>
</div>

<script src="jquery.min.js"></script>
<script>
    // 替换节点
    // 1, $(已有标签).replaceWith(替换成的标签)
    //    使用 替换成的标签 来替换 已有的标签
    //    替换所有

    // 2, 替换成的标签.replaceAll( $(已有标签) )
    //    使用 替换成的标签 来替换 已有的标签
    //    替换所有


    // 创建一个节点
    const oA = $('<a href="https://www.baidu.com">百度</a>');

    // 使用这个超链接节点,替换 span标签
    // $('div>span').replaceWith(oA);


    // replaceWith 和 replaceAll  只是标签顺序写法不同
    oA.replaceAll( $('div>span') );

    $('<h5>我是替换的</h5>').replaceAll( $('[name="a"]') );
</script

克隆节点

<div>
    我是div
    <span>我是span</span>
    <h1>我是h1</h1>
    <p>我是p标签</p>
</div>

<nav>
    我是nav
</nav>

<script src="jquery.min.js"></script>
<script>
    // 克隆节点
    // $().clone()   克隆赋值标签节点
    // 参数1: 布尔值 默认值是false,表示不克隆标签上绑定的事件
    //              设定为true,是克隆事件,克隆标签本身和子级标签的事件都克隆
    // 参数2: 布尔值 
    //              只有当参数1为true时,才起作用
    //              设定是否要克隆子级标签的事件,false是不克隆
    //              默认值是 true , 因此,当前标签,自己标签,事件都克隆,写一个true就可以了

    // 给div标签绑定事件
    $('div').click(function(){
        console.log('我是div');
    })

    // 给div标签的子级绑定事件
    $('div>h1').click(function(){
        console.log('我是h1');
    })

    // const oDiv = $('div').clone();
    // oDiv.appendTo( $('nav') );


    // 没有克隆事件
    // $('div').clone().appendTo( $('nav') ) ;

    // 克隆事件 , 写一个true,父级子级,事件都克隆
    // $('div').clone(true).appendTo( $('nav') ) ;

    // 克隆事件 , 第一个true,是克隆标签本身事件
    //           第二个false,是不克隆子级标签事件
    $('div').clone(true,false).appendTo( $('nav') ) ;
</script>