jquery文档

最新推荐文章于 2024-07-24 02:22:19 发布

噢啦噢啦噢啦

最新推荐文章于 2024-07-24 02:22:19 发布

阅读量419

点赞数

分类专栏： HTML.

本文链接：https://blog.csdn.net/qq_35860368/article/details/53679274

版权

HTML. 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: #007bc5;
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: #ffa24a;
        }
    </style>

</head>
<body>
    <div id="div1">
        <span>span</span>
    </div>

    <div id="div2">

    </div>

    <input type="button" value="btn1" id="btn1"/>
    <script src="js/jQuery-2.2.2-min.js"></script>
    <script>
        /*创建一个元素*/
        var op = $("<p>this is p</p>");
        var olabel = $("<label>label</label>");
        /*将op加入div里面，append,默认将内容放在最后*/
        $("#div1").append(op);
        $("#div1").append(olabel);
        /*js和jquery混合，不符合语法规则*/
        //$("#div1").appendChild(op);

        /*prepend()将元素追加到所有子元素的最前面*/
        $("#div1").prepend(op);

        /*prependTo():将选中的元素，加入到目标位置里面*/
        //$("label").prependTo("#div2");


        /*在制定元素前后追加某一个元素*/
        $("label").before("<b>this is b</b>");
        $("label").after("<b>this is b2</b>");



        /*替换*/
        $("<em>em</em>").replaceAll("b");

        /*删除节点，empty():将选中的元素内容清空,remove():删除节点*/
        //$("#div1").empty();
        //$("div").remove("#div2");


        /*clone();克隆*/
        $("#div2").clone().prependTo("body");

        

        /*true：克隆当前这个元素，将事件也一起克隆，false：只克隆元素*/
        var num = 1;
        $("#btn1").click(function(){
            ++num;
            $(this).clone(true).val("btn"+num).insertBefore($(this));
        });
    </script>
</body>
</html>