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. Java语言的个人理解

    Java语言的个人理解(比价深层次吧) 大四的生活确实十分的奢靡,不锻炼,不读书,几乎就是当一天和尚撞一天钟的生活,太颓废了,还好自己不是这个样子,不过身体确实差了很多,昨天跑了一圈内环(4KM),今 ...

  2. 学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...

  3. AngularJs单元测试

    这篇文章主要介绍了angularJS中的单元测试实例,本文主要介绍利用Karma和Jasmine来进行ng模块的单元测试,并用Istanbul  来生成代码覆盖率测试报告,需要的朋友们可以参考下,以下 ...

  4. 功能齐全并且比较时髦的Jquery通用开源框架之【ejq.js】

    简介 ejq是一款非常小巧的JS工具库,未压缩才50K,在jquery的基础上对jquery缺失部分作了很好的弥补作用. 优点: 1.具有内置的模板解析引擎语法和angularjs相近减少学习成本 2 ...

  5. HT for Web的HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  6. WCF实现方法重载

    一.服务契约(包括回调契约)通过指定不同的OperationContract.Name来实现重载方法,当然代码部份还是必需符合C#的重载要求,即相同方法名称,不同的参数个数或参数类型 namespac ...

  7. 【Swift学习】Swift编程之旅---集合类型之数组（六）

    swift提供了3种主要的集合类型,array,set,dictionary.本节介绍array. 数组是存储有序的相同类型的集合,相同的值可以多次出现在不同的位置. 注意: swift的Array类 ...

  8. SQL--工作中遇到的

    --递归查询产品分类 WITH cte AS ( SELECT * FROM syn_Categories WHERE id = $CategoryID$ UNION ALL SELECT syn_C ...

  9. Nancy 学习-视图引擎 继续跨平台

    前面一篇,讲解Nancy的基础,以及Nancy自宿主,现在开始学习视图引擎. Nancy 目前支持两种 一个是SSVE 一个是Razor.下面我们一起学习. The Super Simple View ...

  10. windows自定义命令的创建

    首先在任意位置创建一个文件夹,我使用的目录是D:\Program Files\Quick Start\command\,桌面我的电脑/计算机图标右键属性 高级系统设置 -> 高级 -> 环 ...