zoukankan      html  css  js  c++  java
  • jquery的insertBefore(),insertAfter(),after(),before()

    insertBefore():a.insertBefore(b)

           a在前,b在后,

           a:是一个选择器,b:也是一个选择器

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='UTF-8'>
        <title>jqu</title>
        <script type="text/javascript" src='jquery-2.2.0.min.js'></script>
    </head>
    <body>
    <p class='p1'>p1:hello</p>
    hello world
    <p class='p2'>p2:wenwen</p>
    hello wo
    </body>
    <script type="text/javascript">
        $(function(){
            $('.p2').insertBefore('.p1');
           
        })
    </script>
    </html>

    得到:

    p2:wenwen
    
    p1:hello
    
    hello world hello wo

    insertAfter():跟insertBefore()是一样的道理

          a.insertAfter(b)

          a在后,b在前

    现在是说before()

    before():a.before()

         a是页面上已有的选择器,b是你需要添加的内容,注意:是什么就是什么,会识别标签,b不是一个选择器

         a在后,b在前

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='UTF-8'>
        <title>jqu</title>
        <script type="text/javascript" src='jquery-2.2.0.min.js'></script>
    </head>
    <body>
    <p class='p1'>p1:hello</p>
    <p class='p2'>p2:wenwen</p>
    </body>
    <script type="text/javascript">
        $(function(){
            $('.p2').before('.p1');
        })
    </script>
    </html>

    最后得到:

    p1:hello
    
    .p1
    p2:wenwen

    看到吗?.p1并不识别选择器,直接就是字符串,在.p2选择器的前面位置

    after():跟before()是同理的,只是一个在前一个在后

    我只是想说insertBefore(),insertAfter()跟before(),after()的区别,我感觉最大一个区别就是看你要用到的场景,你要是需要两个选择器的位置调换就用insertBefore(),insertAfter()

    要是需要一个选择器跟一个文本进行调换位置就可以用before(),after();当然这个不只是调换位置啦

    调换位置是说页面上已经存在的东西,这个方法里面也可以加页面上没有的东西,比如:

    $('<p class='p3'>嘿嘿</p>').insertBefore('.p1');
  • 相关阅读:
    phonegap_android配置文档
    JQueryMobile + PhoneGap 经验总结
    nand ECC 算法记录
    u-boot 2016.05 添加自己的board 以及config.h
    git commit 多行注释方法说明
    Ubuntu 下新建用户后无法sudo
    QT4.8.5 QComboBox 增加选择菜单记录
    Linux GPIO控制方法
    Qt5 can't find -LGL
    windows 端搭建nfs 服务器
  • 原文地址:https://www.cnblogs.com/lwwen/p/5829237.html
Copyright © 2011-2022 走看看