jquery元素节点操作

最新推荐文章于 2024-08-15 19:25:35 发布

scralet-moon

最新推荐文章于 2024-08-15 19:25:35 发布

阅读量166

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43682329/article/details/84837179

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点 差异在于语法：内容和选择器的位置 1、append()和appendTo() append():方法在被选元素的结尾（仍然在内部）插入指定内容。 appendTo():方法在被选元素的结尾（仍然在内部）插入指定内容。

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()

prepend() :方法在被选元素的开头（仍位于内部）插入指定内容。
prependTo() :方法在被选元素的开头（仍位于内部）插入指定内容。

3、after()和insertAfter()

after() :方法在被选元素后插入指定的内容。
insertAfter() :方法在被选元素之后插入 HTML 标记或已有的元素。注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$(element).remove() 方法移除被选元素，包括所有文本和子节点。
$(element).empty()清空

克隆节点

$(element).clone(true) //复制一个元素及其所有的事件
$(element).clone() //复制一个元素不包含所有事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <script src="./jquery-1.8.3.min.js"></script>
    <style>
        *{margin:0;padding:0;}
        .box{
            width: 800px;
            height: 600px;
            border:1px solid red;
        }
        .item{
            width:150px;
            height:150px;
            background:pink;
            border-radius:50%;
            float:left;
        }
    </style>
</head>
<body>
    <button>在元素内部的尾部插入元素(append)</button>
    <button>在元素内部的头部插入元素(prepend)</button>
    <button>在元素外部的后面插入元素(after)</button>
    <button>在元素外部的前面出入元素(before)</button>
    <button>删除节点(remove)</button>
    <button>清空(empty)</button>
    <button>克隆元素(clone)</button>
    <div class="box"></div>
    <script>
        // 绑定单击事件 在元素内部的尾部插入元素
        $('button').eq(0).click(function(){
            // 调用穿件元素的函数
            var oDiv=createDiv();
            // 插入新的元素 append() appendTo()
            // $('.box').append(oDiv); // 在指定元素里面的尾部插入新元素
            // oDiv.appendTo($('.box')); // 将新的元素插入到指定元素内部的尾部

            // 直接添加团苏会把原来元素拿走
            // $('button').eq(6).appendTo($('.box'));

            // 先克隆
            var Ne=$('button').eq(6).clone(true);
            $('.box').append(Ne);

        })
        // 在元素内部的头部插入新的元素
        $('button').eq(1).click(function(){
            // 调用创建新元素的函数
            var oDiv=createDiv();
            // 插入元素 prepend() prependTo()
            //$('.box').prepend(oDiv);// 在指定元素内部的前面插入
            oDiv.prependTo($('.box'));// 将新元素插入到指定元素内部的前面
        })

        // 在元素外面的后面插入节点(元素)
        $('button').eq(2).click(function(){
            // 调用创建元素的函数
            var oDiv=createDiv();
            // 开始插入 after() insertAfter()
            // $('.box').after(oDiv); //在元素外面的后面插入新元素
            oDiv.insertAfter($('.box')); // 将新元素插入到指定元素外面的后面
        })

        // 在元素外面的前面出入节点(元素)
        $('button').eq(3).click(function(){
            // 先调用创建元素的函数
            var oDiv=createDiv();
            // 开插入 before() insertBefore
            // $('.box').before(oDiv); // 在指定元素外面的前面插入新的元素
            oDiv.insertBefore($('.box')); // 将新元素插入到指定元素外面的前面
        })

        // 删除节点
        $('button').eq(4).click(function(){
            // 删除元素
            $('body').remove(); //. 会删除自己
        })
        // 清空元素
        $('button').eq(5).click(function(){
            // 清空
            $('.box').empty();// 只删除指定元素内部的元素
        })
        // 克隆元素 
        // 不加参数  只是单纯的克隆元素  如果添加true参数,会把元素的事件一起克隆
        $('button').eq(6).click(function(){
            var Ne=$(this).clone(true);
            console.log(Ne);
            // 将克隆的额元素添加到box
            $('.box').append(Ne);
        })

        // 封装创建新元素的函数
        function createDiv(){
            // 创建元素
            var Ndiv=$('<div class="item"></div>');
            Ndiv.css('background','rgb('+rund(0,255)+','+rund(0,255)+','+rund(0,255)+')');

            return Ndiv;
        }


        // 封装随机函数
        function rund(m,n){
            return Math.floor(Math.random()*(n-m+1))+m;
        }
    </script>
</body>
</html>