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分割字符串并放入数组的函数
Jul 04 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
javascript实现简易的计算器
Jan 17 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
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
前台接待的工作职责
2013/11/21 职场文书
银行实习鉴定
2013/12/13 职场文书
银行先进个人总结
2015/02/15 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python