zoukankan      html  css  js  c++  java
  • 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=" 200px;height: 200px;border: 2px solid black;">
                <b>我晚饭吃了</b>
            </div>
        </body>
    </html>
  • 相关阅读:
    Jeecg代码搬砖圣地第五篇(页面布局)
    Jeecg代码搬砖圣地第四篇(页面标签规则)
    Jeecg代码搬砖圣地第三篇(Excel导入导出)
    小程序前端
    javascript 新版本的语法(ECS6)
    nginx下用getallheaders
    wampser 配置debug需要的参数
    Suhosin(php的保护工具)
    php中empty使用的情况
    写出健壮的代码
  • 原文地址:https://www.cnblogs.com/wangdongwei/p/11341610.html
Copyright © 2011-2022 走看看