zoukankan      html  css  js  c++  java
  • jquery的API查看 / prepend、prependTo、append、appendTo的用法

    理解jquery设计思想
    记住大部分jquery API的使用
     
     
    prepend、append、appendTo、prependTo的用法
     
     
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div.div{border: 1px solid red;}
                p{color:green;}
                h1{color:darkgoldenrod;}
                input{
                    display: block;
                    margin-bottom: 4px;
                }
            </style>
        </head>
        <body>
            <div class="main">
                <div class="div"><span>div</span></div>
                <p>p标签</p>
            </div>
            <input type="button" value="重置 " id="reset"/>
            <input type="button" value="append--把p标签移动到div标签里  ---实则为移动元素" id="btn1"/>
            <input type="button" value="append--复制p标签到div标签里,原来的标签还保留着(克隆)" id="btn2"/>
            <input type="button" value="appendTo--将p标签追加到div元素   ---实则为移动元素" id="btn3"/>
            <input type="button" value="appendTo--新建元素p追加到div中的元素集合内部的最后面" id="btn4"/>
            <input type="button" value="prependTo--将新建的p元素插入到div中的元素集合内部的最前面" id="btn5"/>
            <input type="button" value="prepend--将新建的h1插入到div中的元素集合内部的最前面" id="btn6"/>
            <input type="button" value="prepend--将已有的p标签插入到div中的元素集合内部的最前面 -- 实则为移动元素" id="btn7"/>
    
        </body>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script>
            $(function(){
                var str = $('.main').html();
                $("#reset").click(function(){
                    $('.main').html(str);
                })
                $("#btn1").click(function(){
                    //把p标签移动到div标签里
                    $('.div').append( $('p'));
                })
                $("#btn2").click(function(){
                    //只是复制一份到div标签里,原来的标签还保留着(克隆)
                    $('.div').append( $('p').clone(true))
                })
                
                $("#btn3").click(function(){
                    //将p追加到div元素   ---实则为移动元素
                    $('p').appendTo($('.div'));
                })
                
                $("#btn4").click(function(){
                    //新建元素p追加到div元素中
                    $('<p>新建元素p追加到div中的元素集合内部的最后面</p>').appendTo($('.div'));
                })
                
                $("#btn5").click(function(){
                    //将新建的p元素插入到div中的元素集合内部的最前面
                    $('<p>将新建的p元素插入到div中的元素集合内部的最前面</p>').prependTo($('.div'));
                })
                
                $("#btn6").click(function(){
                    //将新建的h1插入到div中的元素集合内部的最前面
                    $('.div').prepend('<h1>将新建的h1插入到div中的元素集合内部的最前面</h1>');     //值得注意的是prepend函数后面的参数是内容,不是对象。而prependTo函数前后都是对象。
                })
                
                $("#btn7").click(function(){
                    //将已有的p元素插入到div中的元素集合内部的最前面 -- 实则为移动元素
                    $('.div').prepend($('p'));
                })
                
            })
        </script>
    </html>
  • 相关阅读:
    WHERE col1=val1 AND col2=val2;index exists on col1 and col2, the appropriate rows can be fetched directly
    MySQL 交集 实现方法
    MBProgressHUD的使用
    Xcode4 使用 Organizer 分析 Crash logs(转)
    SimpleXML 使用详细例子
    PHP的XML Parser(转)
    iPhone,iPhone4,iPad程序启动画面的总结 (转)
    Pop3得到的Email 信件格式介绍
    yii总结
    隐藏Tabbar的一些方法
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/4303503.html
Copyright © 2011-2022 走看看