Jquery6_控制Dom元素_动态创建节点及删除节点

最新推荐文章于 2022-06-08 15:19:10 发布

「已注销」

最新推荐文章于 2022-06-08 15:19:10 发布

阅读量668

点赞数 1

分类专栏： JQuery 文章标签： JQuery控制Dom

本文链接：https://blog.csdn.net/wo_shi_chuan_qi_007/article/details/9270977

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

=====动态创建节点=====

            $("input[value=click]").click(function () {
                // 追加到div的结束之前
                $("#d1").append($link); // 等价于$link.appendTo($("#d1"));

// 追加到div的开始标签之后
$("#d1").prepend($link); // 等价于$link.prependTo("#d1");

// 追加到div之前
$("#d1").before($link);

// 追加到div之后
$("#d1").after($link);

});

                // $link是Jquery对象，可以直接操作
                $link.click(function () {
                    return false;
                });

                // 这样是错误的，只存在于内存中
                $("#a1").click(function(){
                    return false;
                });
        });
    </script>
</head>
<body>
   <div id="d1">aaaa
     <input type="text" />
   </div>

=======动态删除节点========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/ecmascript">
        $(function () {
            $(":button[value=delete]").click(function () {
                // 删除最后一个节点(对象) 删除的对象还在内存中
                var $li = $("#ul li:last").remove();

// 还能对已经删除的对象进行操作
$("#ul").prepend($li);

                // 把最后一个节点的内容清空相当于清除innerHtml
                $("#ul li:last").empty();
            });
        });
    </script>
</head>
<body>
   <div>
     <ul id="ul">
        <li>西施</li>
        <li>杨贵妃</li>
        <li>貂蝉</li>
        <li>王昭君</li>
        <li><a href="http://www.fengjie.com">凤姐</a></li>
     </ul>

======实例========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 根据左边选中的项向右边添加
            $(":button[value=>]").click(function () {
                                var selectItem = $("#left option:selected").remove().removeAttr("selected"); // removeAttr("selected")：清除选中状态
                                $("#right").append(selectItem);

                // 或者用
                $("#left option:selected").removeAttr("selected").appendTo($("#right"));
            });

            // 将左边的项全部移到右边
            $(":button[value=>>]").click(function () {
                                var selectAll = $("#left option").remove().removeAttr("selected");
                                $("#right").append(selectAll);

                // 或者用
                $("#left option").removeAttr("selected").appendTo("#right");
            });

            // 根据右边选中的项向左边添加
            $(":button[value=<]").click(function () {
                var selectItem = $("#right option:selected").remove().removeAttr("selected");
                $("#left").append(selectItem);

                // 或者用
                $("#right option:selected").removeAttr("selected").appendTo("#left");
            });

            // 将右边的项全部移到左边
            $(":button[value=<<]").click(function () {
                var selectAll = $("#right option").remove().removeAttr("selected");
                $("#left").append(selectAll);

                // 或者用
                $("#right option").removeAttr("selected").appendTo("#left");
            });

        });
    </script>
</head>
<body>
    <select id="left" size="5" multiple="multiple" style="width:50px;">
       <option>查找</option>
       <option>编辑</option>
       <option>删除</option>
       <option>添加</option>
    </select>

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery6_控制Dom元素_动态创建节点及删除节点

=====动态创建节点=====http://www.w3.org/1999/xhtml"> $(function () { // 创建一个JQuery对象 var $link = $("baidu"); $("input[value=click]").cli
复制链接

扫一扫