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. Javascript快速入门(上篇)

    Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript ...

  2. 使用SQL Server Audit记录数据库变更

        最近工作中有一个需求,就是某一个比较重要的业务表经常被莫名其妙的变更.在SQL Server中这类工作如果不事前捕获记录的话,无法做到.对于捕获变更来说,可以考虑的选择包括Trace,CDC. ...

  3. 【转载】经典SQL语句大全

    [原文地址]http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html 一.基础 1.说明:创建数据库CREATE DATABAS ...

  4. Java多线程系列--“JUC集合”05之 ConcurrentSkipListMap

    概要 本章对Java.util.concurrent包中的ConcurrentSkipListMap类进行详细的介绍.内容包括:ConcurrentSkipListMap介绍ConcurrentSki ...

  5. Bjarne Stroustrup对C++程序员的忠告

    转自:http://blog.csdn.net/adm_qxx/archive/2007/05/20/1617488.aspx  第1章 致读者  [1] 在编写程序时,你是在为你针对某个问题的解决方 ...

  6. 如何给wordpress首页自动显示文章内容的第一个图片

    敏捷个人手机应用中使用到的数据来源于wordpress中,因为自己写的页面,所以可以自己写代码获取文章内容的第一个图片作为文章缩略图来显示,这样用户看到首页时图文并茂,感觉会好一些. 现在后台简单的使 ...

  7. Pentaho Kettle 6.1连接CDH5.4.0集群

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 欢迎转载 最近把之前写的Hadoop MapReduce程序又总结了下,发现很多逻辑基本都是大致相同的,于是想到 ...

  8. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  9. Entity Framework 实体框架的形成之旅--几种数据库操作的代码介绍（9）

    本篇主要对常规数据操作的处理和实体框架的处理代码进行对比,以便更容易学习理解实体框架里面,对各种数据库处理技巧,本篇介绍几种数据库操作的代码,包括写入中间表操作.联合中间表获取对象集合.递归操作.设置 ...

  10. 判断JS对象是否拥有某属性

    两种方式,但稍有区别 1.in 运算符