jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍


Posted in Javascript onSeptember 01, 2016

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()区别介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
JavaScript表单验证实现代码
May 22 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
js实现碰撞检测
Jan 29 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 #Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 #Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
AngularJs bootstrap详解及示例代码
Sep 01 #Javascript
JavaScript数据类型学习笔记分享
Sep 01 #Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 #Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 #Javascript
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python中的rjust()方法使用详解
2015/05/19 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python生成词云的实现代码
2020/01/14 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
Python之Sklearn使用入门教程
2021/02/19 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL