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 相关文章推荐
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
简单实现js轮播图效果
Jul 14 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
javascript实现拼图游戏
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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python框架django基础指南
2016/09/08 Python
python实现手机通讯录搜索功能
2018/02/22 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
农村婚礼证婚词
2014/01/10 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
2014年计生标语
2014/06/23 职场文书
出纳试用期自我评价
2015/03/10 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android