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');

jquery的insertBefore(),insertAfter(),after(),before()的更多相关文章

  1. jquery之insertBefore(),insertAfter(),prependTo(),appendTo()用法详解

    导航: 1,insertBefore(),insertAfter(),prependTo(),appendTo()这四个函数用法几乎一样 2, 与之相对的有四个函数:Before(),After(), ...

  2. jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

    jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...

  3. jQuery—一些常见方法（2）DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】

    一.insertBefore() 如下代码:找到span标签,将span标签剪切到div的前面 <!DOCTYPE html> <html lang="en"&g ...

  4. jquery基本操作笔记

    来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...

  5. jQuery Mockjax插件使用心得

    最近指导前端攻城狮在后台代码没有完成前测试自己写的后台代码,第一个版本是让他直接创建一个data.json静态数据,然后再ajax调用,缺点非常明显,首先需要localhost的支持,其次是能测的功能 ...

  6. You Don't Need jQuery

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  7. jQuery语法介绍

    来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1 ...

  8. jquery 源码解析 节点遍历

    jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...

  9. jQuery的一些笔记

    1.区别jQuery对象和DOM对象. var text1=document.getElementByTagName("div") var $text2=$("div&q ...

随机推荐

  1. Topology and Geometry in OpenCascade-Face

    Topology and Geometry in OpenCascade-Face eryar@163.com 摘要Abstract:本文简要介绍了几何造型中的边界表示法(BRep),并结合程序说明O ...

  2. maven -- 学习笔记（一）之maven环境搭建

    首先先感谢博主的分享http://www.cnblogs.com/yjmyzz/p/3495762.html 基本概念: Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建 ...

  3. Linux的学习--使用PuTTY

    交代一下背景,在笔记本上装虚拟机,在虚拟机里装了Ubuntu系统,但用着一直感觉很卡.刚好同学有旧的不用的笔记本,就拿来装了一个Ubuntu. 想要从我的笔记本上控制Ubuntu系统,于是就找到了pu ...

  4. web接口开发与测试

    最近一直在学习和整理web开发与接口测试的相关资料.接口测试本身毫无任何难度,甚至有很多工具和类库来帮助我们进行接口测试.大多测试人员很难深入了解web接口测试的原因是对web开发不太了解,当你越了解 ...

  5. Spring Boot异常处理详解

    在Spring MVC异常处理详解中,介绍了Spring MVC的异常处理体系,本文将讲解在此基础上Spring Boot为我们做了哪些工作.下图列出了Spring Boot中跟MVC异常处理相关的类 ...

  6. PHP类和对象函数实例详解

    1. interface_exists.class_exists.method_exists和property_exists: 顾名思义,从以上几个函数的命名便可以猜出几分他们的功能.我想这也是我随着 ...

  7. Lucene查询语法详解

    Lucene查询 Lucene查询语法以可读的方式书写,然后使用JavaCC进行词法转换,转换成机器可识别的查询. 下面着重介绍下Lucene支持的查询: Terms词语查询 词语搜索,支持 单词 和 ...

  8. js简单实现div宽度匀速增加/减小

    效果类似百度首页音乐盒. 点击音乐右边的div可以变长或者变短. 代码: <!DOCTYPE html> <html lang="en"> <head ...

  9. Json字符串反序列化

    using DevComponents.DotNetBar; using MyControl; using Newtonsoft.Json; using System; using System.Co ...

  10. 观察者模式（Observer pattern）

    知识点 使对象之间达到松耦合的效果. 观察者模式定义了对象之间一对多的关系.主题用一个共同的接口来更新观察者. 观察者和被观察者之间通过松耦合的方式结合,被观察者不用理会观察者的实现细节,只需要观察者 ...