Loongforever

Jquery操作文档标签

1.插入动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档的插入操作</title>

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript">
        $(function () {

            //内部插入
            //给目标元素插入子元素

            //在目标元素内部前插入子元素
            //两种方式:prepend和prependTo
            var fatherTag = $("#edu");
            fatherTag.prepend("<option value = '硕士'>硕士</option>");
            $("<option value='学前班'>学前班</option>").prependTo(fatherTag);

            //在目标元素内部后插入子元素
            //两种方式:append和appendTo
            fatherTag.append("<option value='硕士'>硕士</option>");
            $("<option value='学前班'>学前班</option>").appendTo(fatherTag);

            //外部插入
            //给目标元素插入兄弟元素

            //在目标元素前面插入兄弟元素
            var brotherTag01 = $("#edu option:first");

            //两种方式:before和insertBefore
            brotherTag01.before("<option value='学前班'>学前班</option>");
            $("<option value='硕士'>硕士</option>").insertBefore(brotherTag01);

            //在目标元素后插入兄弟元素
            var brotherTag02 = $("#edu option:last");

            //两种方式:after和insertAfter
            brotherTag02.after("<option value='学前班'>学前班</option>");
            $("<option value='硕士'>硕士</option>").insertAfter(brotherTag02);
        })
    </script>

</head>
<body>
<select id="edu">
    <option value="小学">小学</option>
    <option value="中学">中学</option>
    <option value="大学">大学</option>
</select>
</body>
</html>


2.删除动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除文档标签</title>

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript">
        $(function () {
            //清空子标签
            // var fatherTag = $("#d1");
            // fatherTag.empty();

            //删除标签,同时删除点击事件
            var pTag = $("p");
            document.getElementById("d1").onclick = function () {
                alert("d1");
            }

            //删除自身
            var returnP = pTag.remove();

            //删除目标标签中相关的class或ID
            $("p").remove("#p1");

            //删除标签,同时不删除点击事件
            var spanTag = $("span");
            spanTag.click(function () {
               alert("span");
            });

            //删除自身
            var returnSpan = spanTag.detach();

            //删除目标标签中相关的class或ID
            $("div").detach("#d1");
            $("#d2").append(returnSpan);
        })
    </script>

</head>
<body>
<div id="d1">
    <p id="p1" class="aa">AAA</p>
    <p id="p2" class="aa">DDD</p>

    <span>BBB</span>
</div>

<div id="d2">CCC</div>
</body>
</html>

remove()和detach()返回值都是jQuery对象


3.克隆动作和替换动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆标签和替换标签</title>

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript">
        $(function () {
            
            //获得一个克隆对象
            var pFirst = $("#d1 p:first");
            
            var pClone = pFirst.clone();
            
            //替换目标对象
            //替换单个对象
            var spanFirst = $("#d2 span:first");
            spanFirst.replaceWith(pClone);
            
            //替换多个对象,也可用来替换单个对象
            var spans = $("#d2 span");
            pClone.replaceAll(spans);
            
            var spanSecond = $("#d2 span:last");
            spanSecond.replaceWith("<p>CCC</p>");
        })
    </script>
</head>
<body>

<div id="d1">
    <p>
        <a href="#">p1</a>
    </p>
    <p>
        p2
    </p>
</div>

<div id="d2">
    <span>span1</span>
    <span>span2</span>
</div>
</body>
</html>

有的时候不需要纠结传递的参数是否为jQuery对象,只要所传递的参数能够转换成jQuery对象的话,一般就可以作为参数传递给jQuery对象的方法.

posted on 2017-12-08 20:38  Loongforever  阅读(244)  评论(0)  编辑  收藏  举报

导航