代码改变世界

jQuery文档处理

2020-04-14 18:22  默默不语  阅读(166)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="d1">
            <div id="dd1" class="c">
                <p id="p1">哈哈</p>
            </div>
        </div>
        
        <div id="d2" class="c">
            <p>哈哈1</p>
        </div>
        <input id="input1" type="text" value="嘎嘎" />
        <input id="inner_insert" type="button" value="内部插入" />
        <input id="outer_insert" type="button" value="外部插入" />
        <input id="baoguo" type="button" value="包裹" />
        <input id="tihuan" type="button" value="替换" />
        <input id="shanchu" type="button" value="删除指定元素" />
        <input id="detach" type="button" value="删除detach" />
        <input id="copy" type="button" value="复制" />
        <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            var inner_insert = document.getElementById("inner_insert");
            var outer_insert = document.getElementById("outer_insert");
            var baoguo = document.getElementById("baoguo");
            var tihuan = document.getElementById("tihuan");
            var shanchu = document.getElementById("shanchu");
            var detach = document.getElementById("detach");
            var copy = document.getElementById("copy");
            
            
            inner_insert.onclick = function(){
                /* 内部插入 */
                /* append：在指定元素后面添加自定义标签字符串 */
                /* $("#d1").append("<span>我是新添加的span--append<span>"); */
                /* prepend：在指定元素前面添加自定义标签字符串 */
                /* $("#d1").prepend("<span>我是新添加的span--prepend<span>"); */
                /* 与上面效果完全一样，只是写法不一样（把字句和被字句的区别） */
                $("<span>我是新添加的span--append<span>").appendTo("#d1");
                $("<span>我是新添加的span--prepend<span>").prependTo("#d1")
            }
            outer_insert.onclick = function(){
                /* 外部插入 */
                /* after：在指定元素后面添加自定义标签字符串 */
                /* $("#d1").after("<span>我是新添加的span--after<span>"); */
                /* before：在指定元素前面添加自定义标签字符串 */
                /* $("#d1").before("<span>我是新添加的span--before<span>"); */
                /* 与上面效果完全一样，只是写法不一样（把字句和被字句的区别） */
                /* insertAfter:在指定元素外后面添加自定义标签字符串 */
                $("<span>我是新添加的span--insertAfter<span>").insertAfter("#d1");
                /* insertBefore:在指定元素外后面添加自定义标签字符串 */
                $("<span>我是新添加的span--insertBefore<span>").insertBefore("#d1");
            }
            baoguo.onclick = function(){
                /* 包裹wrap:指定元素被自定义标签字符串包裹（字符串必须为标签） */
                /* 如果被包裹元素有多个，则分开包裹 */
                /* 如果有内容，则内容在被包裹标签前；如果有多层标签，则包裹在内层 */
                /* $(".c").wrap("<li><p></p></li>"); */
                /* 如果被包裹元素有多个，则整体包裹 */
                $(".c").wrapAll("<li><p></p></li>");
            }
            tihuan.onclick = function(){
                /* 替换 */
                /* replaceWith：使用自定义标签字符串替换指定元素 */
                /* $("#d1").replaceWith("<p><span>我是替换来的</span></p>"); */
                $(".c").replaceWith("<p><span>我是替换来的</span></p>");
            }
            shanchu.onclick = function(){
                $("#d1").empty();
            }
            $("#dd1").click(function(){
                alert("我是d1");
            });
            detach.onclick = function(){
                /* 删除指定元素 */
                /* remove：删除指定元素 */
                /* $("#d1").remove(); */
                /* empty:清楚指定元素的内容 */
                var $dd1 = $("#dd1").detach();
                $("#d1").append($dd1);
                
            }
            copy.onclick = function(){
                /* 复制指定元素 */
                /* clone:复制元素到另一个指定位置，如果不加clone(),即不复制则会进行移动操作*/
                $("#d1").append($("#p1").clone());
            }
            
            
        </script>
    </body>
</html>