jquery 学习(四) - 标签 添加/删除/修改

HTML代码

<div class="a1">
    <div>
        <span id="a2">aaa</span>
        <button onclick="a3(this)">+</button>
    </div>
</div>

事件代码

复制代码
 $(':button').click(function () {

        //定义一个新的标签 $s1
        var $s1 = $("<p>");
        $s1.html("hello OK!");
        $s1.css({'color': 'red'});

        //下面的代码都写入这里

    }
复制代码

 

内部插入标签

复制代码
        //内部 插入标签
            //添加到父类的子类之后
            //(父类+子类)
            $('.a1').append($s1);
            //(子类+父类)
            $s1.appendTo(".a1");

            //添加到父类,子类之前
           //(父类+子类)
            $(".a1").prepend($s1);
            //(子类+父类)
            $s1.appendTo(".a1");
复制代码

外部插入标签

复制代码
    //外部插入标签
        //添加此标签 前一个兄弟标签
        $('.a1').after($s1);
        //添加此标签 后一个兄弟标签
        $('.a1').before($s1);

        //新创建标签 添加到.a1前一个兄弟标签
        $s1.insertAfter('.a1');
        //新创建标签 添加到.a1后一个兄弟标签
        $s1.insertBefore('.a1');
复制代码

替换

        //替换
        $('span').replaceWith($s1)    

 

删除/清除

    //删除/清除

        //移除当前标签
         $('.a1').remove();

        //清除标签下的标签
        $('.a1').empty();

 

复制操作 实例

复制代码
  //clone(复制)
    // clone()
    function a3(self) {

        //复制当前标签的父标签
        var $xx_obj = $(self).parent().clone();
        //将此标签的子标签 html值修改为'-',并修改属性绑定新函数a4(this)
        $xx_obj.children('button').html('-').attr('onclick','a4(this)');
        //.a1 标签下 加入新标签
        $('.a1').append($xx_obj);
    }
    //删除当前标签
    function a4(self) {
        $(self).parent().remove()
    }
复制代码

效果:

图一:

图二:

图三:

 

posted @   Anec  阅读(508)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示