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

以上所述是小编给大家介绍的jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • MyBatis批量插入(insert)数据操作

    在程序中封装了一个List集合对象,然后需要把该集合中的实体插入到数据库中,由于项目使用了Spring+MyBatis的配置,所以打算使用MyBatis批量插入,由于之前没用过批量插入,在网上找了一些资料后最终实现了,把详细过程贴出来. 实体类TrainRecord结构如下: public class TrainRecord implements Serializable { private static final long serialVersionUID = -12069604621179

  • MySQL触发器 Update触发Insert失败

    今天工作需要,想要实现将仅对状态更新的表进行历史记录显示,于是考虑在原表中建立触发器,将更新的内容同时写入另一张表 于是进行测试 --建立测试表CREATE TABLE `triggletest_triggle` ( `id` INT(11) NOT NULL, `name` VARCHAR(5) NULL DEFAULT NULL, PRIMARY KEY (`id`) ) COLLATE='latin1_swedish_ci' ENGINE=InnoDB --建立目标表 CREATE TAB

  • PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID

    前言 最近在工作中又遇到了这个问题,PHP中如何获得刚插入数据的ID(或当前发布文章的ID)呢?觉得有必要整理下详细的解决方法,方便自己也给有需要的朋友们提供以帮助,那么话不多说了,来看看详细的解决介绍. 解决方法 其实用 mysql_insert_id() 函数就可以实现的. 定义和用法 mysql_insert_id() 函数返回上一步 INSERT 操作产生的 ID. 注意:如果上一查询没有产生 AUTO_INCREMENT 的 ID,则 mysql_insert_id() 返回 0. 语

  • MyBatis中insert操作返回主键的实现方法

    在使用MyBatis做持久层时,insert语句默认是不返回记录的主键值,而是返回插入的记录条数:如果业务层需要得到记录的主键时,可以通过配置的方式来完成这个功能 针对Sequence主键而言,在执行insert sql前必须指定一个主键值给要插入的记录,如Oracle.DB2,可以采用如下配置方式: <insert id="add" parameterType="vo.Category"> <selectKey resultType="

  • Oracle+Mybatis的foreach insert批量插入报错的快速解决办法

    最近做一个批量导入的需求,将多条记录批量插入数据库中. 解决思路:在程序中封装一个List集合对象,然后把该集合中的实体插入到数据库中,因为项目使用了MyBatis,所以打算使用MyBatis的foreach功能进行批量插入.期间遇到了"SQL 命令未正确结束 "的错误,最终解决,记录下来供以后查阅和学习. 首先,在网上参考了有关Mybatis的foreach insert的资料,具体如下: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach

  • MySQL中insert语句的使用与优化教程

    MySQL 表中使用 INSERT INTO SQL语句来插入数据. 你可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 语法 以下为向MySQL数据表插入数据通用的 INSERT INTO SQL语法: INSERT INTO table_name ( field1, field2,...fieldN ) VALUES ( value1, value2,...valueN ); 如果数据是字符型,必须使用单引号或者双引号,如:"value"

  • 将表里的数据批量生成INSERT语句的存储过程 增强版

    将表里的数据批量生成INSERT语句的存储过程 增强版

    有时候,我们需要将某个表里的数据全部或者根据查询条件导出来,迁移到另一个相同结构的库中 目前SQL Server里面是没有相关的工具根据查询条件来生成INSERT语句的,只有借助第三方工具(third party tools) 这种脚本网上也有很多,但是网上的脚本还是欠缺一些规范和功能,例如:我只想导出特定查询条件的数据,网上的脚本都是导出全表数据 如果表很大,对性能会有很大影响 这里有一个存储过程(适用于SQLServer2005 或以上版本) -- Author: <桦仔> -- Blog

  • 详解MySQL数据库insert和update语句

    用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的SELECT语句,另外一种就是更新语句,也叫做数据操作语句.SQL语句中的更新语句update是最常用的语句之一,言外之意,就是对数据进行修改.在标准的SQL中有3个语句,它们是INSERT.UPDATE以及DELETE. 用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的SELECT语句,另外一种就是更新语句,也叫做数据操作语句.言外之意,就 是对数据进行修改.在标准的SQL中有3个语句,它们是INSERT.

  • C++ primer基础之容器insert

    C++ primer基础之容器insert 今天学习C++ 基础知识的时候遇到这样问题,始终出现segments fault.最后才发现原来是自己对"容器insert之后迭代器会失效"的理解不够透彻. 题目如下: 假定iv是一个int的vector,下面的程序存在什么错误?你将如何修改? auto iter = iv.begin(); auto mid = iv.begin() + iv.size() / 2; while(iter != mid){ if(*iter == some_

  • 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&g

  • jQuery中text() val()和html()的区别实例详解

    jQuery中text() val()和html()的区别实例详解

    简单的说:html()和text()的区别主要在于是否包含标签.而val()针对的是表单元素. 但是有时还是不是那么太清晰. html(),val(),text()都分为有参和无参. 举例说明它们的不同之处: html()在没有参数的情况下,取得第一个匹配元素的内容.必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素. 如: <body> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用.</p> <h3>选中下

  • jquery中live()方法和bind()方法区别分析

    本文实例讲述了jquery中live()方法和bind()方法区别.分享给大家供大家参考,具体如下: live()不受加载时间顺序的影响,只要查找能够配对上就能够绑定对应的事件,而bind方法只有在第一次被加载的时候才绑定时间,如果代码之后再加载配对的元素,则不能绑定对应的事件 $("#manual_disconnect").live("click", function(){ connectionProfile("0"); }); $("

  • jquery中attr、prop、data区别与用法分析

    本文实例讲述了jquery中attr.prop.data区别与用法.分享给大家供大家参考,具体如下: 在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. .data()看作是存取data-xxx这样DOM附加信息的方法 上面的描述也许有点模糊,举几个例子就知道了. <a href="h

  • jQuery中event.target和this的区别详解

    this和event.target的区别: 1.js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远指向触发事件的DOM元素本身: 2.this和event.target都是dom对象,使用jQuey中的方法可以将他们转换为jquery对象:$(this)和$(event.target). 比如,一个很简单的例子. $(event.target)指向触发事件的元素. 当点击蓝色小方框时, 蓝色小方框会变成橙色, 但其外围的大方框不会变色, 即没有触发事件的冒

  • oracle中存储函数与存储过程的区别介绍

    在oracle中,函数和存储过程是经常使用到的,他们的语法中有很多相似的地方,可是也有它们的不同之处,这段时间刚学完函数与存储过程,来给自己做一个总结: 一:存储过程:简单来说就是有名字的pl/sql块. 语法结构: create or replace 存储过程名(参数列表) is --定义变量 begin --pl/sql end; 案例: create or replace procedure add_(a int,b int) is c int; begin c:=a+b; dbms_ou

  • MyBatis中关于resultType和resultMap的区别介绍

    MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接表示返回类型的(对应着我们的model对象中的实体),而resultMap则是对外部ResultMap的引用(提前定义了db和model之间的隐射key-->value关系),但是resultType跟resultMap不能同时存在. 在MyBatis进行查询映射时,其实查询出来的每一个属性都是放在一个对应的Map里面的,其中键是属性名,值则是其对应的值.

  • 深入理解Python中的 __new__ 和 __init__及区别介绍

    本文的目的是讨论Python中 __new__ 和 __ini___ 的用法. __new__ 和 __init__ 的区别主要表现在:1. 它自身的区别:2. 及在Python中新式类和老式类的定义. 理解 __new__ 和 __init__ 的区别 这两个方法的主要区别在于:__new__ 负责对象的创建而 __init__ 负责对象的初始化.在对象的实例化过程中,这两个方法会有些细微的差别,表现于:如何工作,何时定义. Python中两种类的定义方式 Python 2.x 中类的定义分为

  • Java中关键字final finally finalize的区别介绍

    Java中关键字final finally finalize的区别介绍

    目录 1. final 1.1 final修饰属性 1.2 final修饰方法 1.3 final修饰类 2. finally 3. finalize 这三个除了长得像以外,好像没什么联系 1. final final意为“最后的”,它是Java中的一个关键字. final可以修饰属性.方法.类. 1.1 final修饰属性 从final的含义就不难理解用final修饰内容的用意.final修饰属性,就表示这个属性是“最终的”,也就是不可更改的,换成我们熟悉的名词,也就是“常量”. privat

  • jQuery中对节点进行操作的相关介绍

    动态创建Dom节点 jQuery中使用$(html字符串)来动态创建Dom节点,并且返回一个jQuery对象,可以调用append等方法将创建的节点添加到Dom中. 例如: var link = $("<a href='http://www.baidu.com'>百度</a>"); $("div:first").append(link); 添加节点元素的方法: Append方法用来在元素的末尾追加元素(最后一个子节点) Prepend在元素的

随机推荐