jquery中append、prepend、before、after方法使用例子-jquery-网页制作-壹聚教程网jquery中append、prepend、before、after方法使用例子
在jquery中append、prepend、before、after方法是对数据元素节点的操作系列方法了，这些方法大家了解吗？如果不了解就可以和一聚教程小编来看看它们用法。
一、after()和before()方法的区别
&&& after()&&其方法是将方法里面的参数添加到jquery对象后面去；
&&& 如：A.after(B)的意思是将B放到A后面去；
&&& before()&&其方法是将方法里面的参数添加到jquery对象前面去。
&&& 如：A.before(B)的意思是将A放到B前面去；
二、insertAfter()和insertBefore()的方法的区别
&&& 其实是将元素对调位置；
&&& 可以是页面上已有元素；也可以是动态添加进来的元素。
&&& 如：A.insertAfter(B);即将A元素调换到B元素后面；
&&& 如&span&CC&/span&&p&HELLO&/p&使用$(&span&).insertAfter($(&p&))后，就变为&p&HELLO&/p&&span&CC&/span&了。两者位置调换了
三、append()和appendTo()方法的区别
&&& append()&&其方法是将方法里面的参数添加到jquery对象中来；
&&& 如：A.append(B)的意思是将B放到A中来，后面追加,A的子元素的最后一个位置；
&&& appendTo()&&其方法是将jquery对象添加到appendTo指定的参数中去。
&&& 如：A.appendTo(B)的意思是将A放到B中去，后面追加,B的子元素的最后一个位置；
四、prepend()和prependTo()方法的区别
&&& append()&&其方法是将方法里面的参数添加到jquery对象中来；
&&& 如：A.append(B)的意思是将B放到A中来，插入到A的子元素的第一个位置；
&&& appendTo()&&其方法是将jquery对象添加到appendTo指定的参数中去。
&&& 如：A.appendTo(B)的意思是将A放到B中去，插入到B的子元素的第一个位置；
1、insert局部方法
&* 在父级元素上操作DOM
&* @param {Object} parent&& 父级元素，可以是element，也可以是Yquery对象
&* @param {String} position 位置: beforebegin/afterbegin/beforeend/afterend
&* @param {*}&&&&& any&&&&& 任何：string/text/object
&* @param {Number} index&&& 序号，如果大于0则复制节点
&* @return {Undefined}
&* @version 1.0
&* 日17:08:26
function _insert(parent, position, any, index) {
&&& if ($.isFunction(any)) {
&&&&&&& any = any.call(parent);
&&& // 字符串
&&& if ($.isString(any)) {
&&&&&&& if (regTag.test(any)) {
&&&&&&&&&&& parent.insertAdjacentHTML(position, any);
&&&&&&& } else {
&&&&&&&&&&& parent.insertAdjacentText(position, any);
&&& // 数字
&&& else if ($.isNumber(any)) {
&&&&&&& parent.insertAdjacentText(position, any);
&&& // 元素
&&& else if ($.isElement(any)) {
&&&&&&& parent.insertAdjacentElement(position, index & 0 ? any.cloneNode(!0) : any);
&&& // Yquery
&&& else if (_isYquery(any)) {
&&&&&&& any.each(function() {
&&&&&&&&&&& _insert(parent, position, this);
&&&&&&& });
2、append、prepend、before、after
&&&& * 追插
&&&& * 将元素后插到当前元素（集合）内
&&&& * @param {String/Element/Function} any
&&&& * @return this
&&&& * @version 1.0
&&&& * 日1:44:15
&&& append: function(any) {
&&&&&&& return this.each(function(index) {
&&&&&&&&&&& _insert(this, 'beforeend', any, index);
&&&&&&& });
&&&& * 补插
&&&& * 将元素前插到当前元素（集合）内
&&&& * @param {String/Element/Function} any
&&&& * @return this
&&&& * @version 1.0
&&&& * 日1:44:15
&&& prepend: function(any) {
&&&&&&& return this.each(function(index) {
&&&&&&&&&&& _insert(this, 'afterbegin', any, index);
&&&&&&& });
&&&& * 前插
&&&& * 将元素前插到当前元素（集合）前
&&&& * @param {String/Element/Function} any
&&&& * @return this
&&&& * @version 1.0
&&&& * 日1:44:15
&&& before: function(any) {
&&&&&&& return this.each(function(index) {
&&&&&&&&&&& _insert(this, 'beforebegin', any, index);
&&&&&&& });
&&&& * 后插
&&&& * 将元素后插到当前元素（集合）后
&&&& * @param {String/Element/Function} any
&&&& * @return this
&&&& * @version 1.0
&&&& * 日1:44:15
&&& after: function(any) {
&&&&&&& return this.each(function(index) {
&&&&&&&&&&& _insert(this, 'afterend', any, index);
&&&&&&& });
3、prependTo、prependTo、insertBefore、insertAfter
这些带后缀的与上面的不同的是，返回的结果不一样。如：
$('#demo').append('&a/&');
// =& 返回的是 $('#demo')
$('&a/&').appendTo($('#demo'));
// =& 返回的是$('a');
因此两者的关系只是返回结果不一样，其他的都一样，可以这么解决：
&&& appendTo: 'append',
&&& prependTo: 'prepend',
&&& insertBefore: 'before',
&&& insertAfter: 'after'
}, function(key, val) {
&&& $.fn[key] = function(or) {
&&&&&&& this.each(function() {
&&&&&&&&&&& $(selector)[val](this);
&&&&&&& });
上一页： &&&&&下一页：相关内容　　　提到伪类，在我的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等，说实在其他的我发现"然并卵"。
　　 &&百度一下:after和:before会发现有很多关于研究它们用法的文章，形形色色各式各样，说明这两个伪元素在实际工作中还是很实用的，再结合css3的动画，它们能为页面添加很多意想不到的效果！
& & & & &从学习伪类，不小心又延伸到了伪类元素（eg.我们常见的::before和:hover之间为什么缺少了一个冒号呢?），那什么又叫伪类元素？伪类和伪类元素有什么区别？下面就跟着我一起来学习一下吧O(&_&)O~有说的不对的地方欢迎批评指正！~
伪类和伪元素
　　 w3c上对伪类和为元素的定义分别为,　　
伪类：伪类用于向某些选择器添加特殊的效果。
伪元素：伪元素用于将特殊的效果添加到某些选择器
& & &css3为了明确伪类和伪元素的区别，已经明确了单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
span:hover
span::before
& & &但是，为了保证兼容性，现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍~
& & &常见的伪类（pseudo-classes）和伪元素（pseudo-elements）
　　伪元素的兼容性
&Chrome 2+,
&Firefox 3.5+ (3.0 had partial support),
&Safari 1.3+,
&Opera 9.2+,
&IE8+ (with some minor bugs),
&几乎所有的移动浏览器。
&伪元素:before和:after的定义和基本用法
& & & & :before & 选择器在被选元素的内容前面插入内容。&&
& & & & :after & & 选择器在被选元素的内容后面插入内容。
&&　　&使用 content 属性来指定要插入的内容。　　
　　　content有几个比较有用的值：
&[String]&& 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
a:after { content: "↗"; }
&attr()&& 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：
a:after { content:"(" attr(href) ")"; }
url() /&uri()&& 用于引用媒体文件。示例：
h1::before { content: url(logo.png); }
counter()&& &调用计数器，可以不使用列表元素实现序号功能。具体请参见&counter-increment 和 counter-reset 属性的用法。示例：
h2:before { counter-increment: content: "Chapter " counter(chapter) ". " }
& & ----------------------------------- 一个粗糙的栗子 ---------------------------------------
& & 为了写出让自己看得懂也能让别人看的懂的博客，下面我们来举一个（粗糙的）栗子~
& & 详细代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&
blockquote{
background-color: #
height: 100
width: 400
text-align:
line-height: 100
blockquote:hover:before{
content: '啊啊啊啊哦';
blockquote:hover:after{
content: '啊啊啊啊哦诶';
&blockquote&我是一个blockquote&/blockquote&
鼠标没有移动到blockqoute上的时候是酱紫的，
鼠标移动到blockqoute上的时候是酱紫的， & & & &
这样就实现了 &&伪元素:before和:after将特殊的效果添加到blockqoute上的效果 &&，当然这个很糙的栗子只是体现了它的基本用法而已，下面我们来了解一下它的一些有意思的用法吧~
&有意思的用法
& & & &好吧，第一个用法确实没什么意思╮(╯_╰)╭，但是很实用有木有~(～￣▽￣)～
& & & &网上在介绍清浮动中最狂拽炫酷吊炸天的清浮动方法 : ) &，只要把.clearfix加在浮动父级就可以了
.clearfix{zoom:1;}
.clearfix:after {clear:content:'.';display:width: 0;height: 0;visibility:}
给浮动父级添加clearfix后
模拟float:center（当然并没有center这个值，只是模拟）& &&
& & & & & & 这样利用伪元素:before和浮动，就能创造出两个没有内容的占位块，实现文字环绕图片的效果了~~效果蛮不错的有木有
& & & & & &
.box .left{
//左边的文字块
.box .left:before{
content: '';
height: 245
width: 153
.box .right{
//右边的文字块
.box .right:before{
content: '';
height: 245
width: 153
&一些实用的小图标、小图形
　　这些图标都是可以利用伪元素做出来的哟！~不用再引用麻烦的bootstrap图标了，还得引入他们的一堆文件惹，真麻烦~&(￣～￣) ~真矫情
& & &&（实用小图标的源css代码都在这里面哟！）
& & & & 还有3D的ribbons，不用图片也可以呢！只要只兼容IE8+就可以用啦，Everybody loves ribbons,so do I. 时常觉得CSS真心是艺术~
& & & &&（ribbon源码）
&作为列表序号
& & 怎样作为列表序号呢？我先举个栗子~
& &像这样的1,2,3的序号一般大家是怎样做的呢？用span？用图片？是不是用了span后还要进行定位？是不是很麻烦呢？
& &现在我们可以用伪元素来做列表序号，而且列表的一项删除了以后，其他的列表序号会自动改变，成为一个有顺序的列表~484很方便！
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&
margin: 0;
padding: 0;
width:1000
counter-reset:
list-style:
background-color: #
margin-top: 10
ul&li:before{
content: counter(li);
counter-increment:
background-color: #333;
padding: 0 5
margin-right: 10
&li&List item one&/li&
&li&The second item on the list&/li&
&li&Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&/li&
&li&And here is number four.&/li&
&li&The fifth item on the list&/li&
&li&The sixth item on the list&/li&
&不过这里需要一个用到content的一个属性，那就是counter()。对于couter又是一个知识点，后期可以进行深入了解，这里找到了一个相关的有用博文，~
& & & 作为文字提示~在这里我就不赘述啦
&炫酷导航效果
& & & 这些导航真的很炫酷，除了很多css3的效果外，很多效果都用到了:before和:after伪元素~有空的时候一定要一个个做做试试看！
　　　　对于伪元素的应用上还有很多值得人去探寻的东西，我提到的估计也不过是冰山一角，小小的伪元素竟然能实现那么多的功能~看来需要学的还有很多
参考资料：/a/4493
& & & & & & &&/css3/pseudo-element-roundup.html
阅读(...) 评论()您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
jQuery使用before()和after()在元素前后添加内容的方法教程
本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法。分享给大家供大家参考。具体如下：
&!DOCTYPE html&
&script src="js/jquery.min.js"&
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("&b&Before&/b&");
$("#btn2").click(function(){
$("img").after("&i&After&/i&");
&img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"&
&button id="btn1"&Insert before&/button&
&button id="btn2"&Insert after&/button&
希望本文所述对大家的jQuery程序设计有所帮助。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]}