jQuery 操作文档的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                /*操作文档、html结构
                 */
            //1.内部插入方法
                //1.append() 在被选元素的结尾插入内容
                $("#t01").click(function(){
                    $("#box").append(",饭");
                });
                //2.appendTo() 把选择的 HTML元素插入到被选元素后门
                $("#t02").click(function(){
                    $("u").appendTo("#box");
                });
                //3.prepend() 在被选元素的前面插入内容
                $("#t03").click(function(){
                    $("#box").prepend("今天,"); 
                });
                //4.prependTo() 把选择的 HTML元素插入到被选元素前面
            //2.外部插入方法  
                //1.after()
                $("#t04").click(function(){
                    $("#box").after("好好学习,天天向上"); 
                });
                //2.before()
                //3.insertAfter()
                //4.insertBefore()
            //3.包裹
                //1.wrap()  把前面元素的放到后面的元素中包起来
//                $("p").before("div"); //<div><p></p></div>        
            //4.替换
                //1.replaceWith() 吧前面元素用后门元素替换
                //2.replaceAll()  用前面元素吧后面元素替换
            //5.删除
                //1.empty() 吧前面元素里的html清空  ,通常和append()连用,添加一个新的之前先清空
                $("#t05").click(function(){
                    $("#box").empty(); 
                });
            //6.复制
                //1.clone() //里面写个true表示规定处理事件,如添加了动画 默认为false
                $("#t06").click(function(){
                    $("u").clone().appendTo("#box"); 
                });
            });
        </script>
    </head>
    <body>
        <button    id="t01">测试append</button>
        <button    id="t02">测试appendTo</button>
        <button    id="t03">测试prepend</button>
        <hr />
        <button    id="t04">测试after</button>
        <button    id="t05">测试empty</button>
        <button    id="t06">测试clone</button>
        <hr />
        <u>,你呢?</u>
        <div id="box" style="width: 200px;height: 200px;border: 2px solid black;">
            <b>我晚饭吃了</b>
        </div>
    </body>
</html>

 

posted @ 2019-08-12 17:51  WideWang  阅读(224)  评论(0编辑  收藏  举报