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()的更多相关文章
- jquery之insertBefore(),insertAfter(),prependTo(),appendTo()用法详解
导航: 1,insertBefore(),insertAfter(),prependTo(),appendTo()这四个函数用法几乎一样 2, 与之相对的有四个函数:Before(),After(), ...
- jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别
jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...
- 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 ...
- jquery基本操作笔记
来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...
- jQuery Mockjax插件使用心得
最近指导前端攻城狮在后台代码没有完成前测试自己写的后台代码,第一个版本是让他直接创建一个data.json静态数据,然后再ajax调用,缺点非常明显,首先需要localhost的支持,其次是能测的功能 ...
- You Don't Need jQuery
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
- jQuery语法介绍
来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1 ...
- jquery 源码解析 节点遍历
jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...
- jQuery的一些笔记
1.区别jQuery对象和DOM对象. var text1=document.getElementByTagName("div") var $text2=$("div&q ...
随机推荐
- 信息加密之信息摘要加密MD2、MD4、MD5
对于用户数据的保密一直是各个互联网企业头疼的事,那如何防止用户的个人信息泄露呢?今天为大家介绍一种最简单的加密方式--信息摘要算法MD.它如何来保护用户的个人信息呢?其实很简单,当获得到用户的信息后, ...
- 修改NLS_DATE_FORMAT的四种方式
一. 在用户环境变量中指定(LINUX) 在用户的.bash_profile中增加两句: export NLS_LANG=AMERICAN ---这一句必须指定,否则下一句不生效.export NLS ...
- Windows 8（虚拟机环境）安装.NET Framework3.5(includes .NET 2.0 and 3.0)
按照这篇文章:http://blogs.technet.com/b/aviraj/archive/2012/08/04/windows-8-enable-net-framework-3-5-inclu ...
- Docker - 在CentOS 7中安装Docker
1-确认系统信息 # cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) # uname -a Linux CentOS-7 3. ...
- [logstash-input-log4j]插件使用详解
Log4j插件可以通过log4j.jar获取Java日志,搭配Log4j的SocketAppender和SocketHubAppender使用,常用于简单的集群日志汇总. 最小化的配置 input { ...
- 使用laravel一分钟搭建CURD后台页面
配置即一切 一切皆于需求,后台从0开始搭建,但是写了一两个页面后发现太多的是对单表的增删改查操作,于是就想到了,能不能做一个快速搭建的后台.想到一句话,配置即一切.如果一个CURD后台能只进行配置就自 ...
- CSS魔法堂：你真的理解z-index吗？
一.前言 假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了.但要将多个弹窗间层叠关系给处理好,那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了.本文作 ...
- H5新特性websocket
websocket也是html5的新增加内容之一,号称是下一代客户端/服务器异步通信办法,私以为虽然有点吹牛的成分,但是以后说不定能成为异步通信的半壁江山,至于取代ajax,我觉的应该不会. webs ...
- Python语言特性之3：@staticmethod和@classmethod
问题:Python中@staticmethod和@classmethod两种装饰器装饰的函数有什么不同? 原地址:http://stackoverflow.com/questions/136097/w ...
- 解决 DotNetCore.1.0.1-VS2015Tools.Preview2.0.3.exe 在VS2015 Update3 安装失败的问题
今天抽空升级VS2015 Update3. 在安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.3.exe 时报错了,看了错误日志 显示: 看到我标红的两个地方,那么 ...