Jquery中的append跟prepend，after和before的区别

一、after()和before()方法的区别

after()——其方法是将方法里面的参数添加到jquery对象后面去；

如：Aafter(B)的意思是将B放到A后面去；

before()——其方法是将方法里面的参数添加到jquery对象前面去。

如：Abefore(B)的意思是将A放到B前面去；

二、insertAfter()和insertBefore()的方法的区别

其实是将元素对调位置；

可以是页面上已有元素；也可以是动态添加进来的元素。

如：AinsertAfter(B);即将A元素调换到B元素后面；

如<span>CC</span><p>HELLO</p>使用$("span")insertAfter($("p"))后，就变为<p>HELLO</p><span>CC</span>了。两者位置调换了

三、append()和appendTo()方法的区别

append()——其方法是将方法里面的参数添加到jquery对象中来；

如：Aappend(B)的意思是将B放到A中来，后面追加,A的子元素的最后一个位置；

appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

如：AappendTo(B)的意思是将A放到B中去，后面追加,B的子元素的最后一个位置；

四、prepend()和prependTo()方法的区别

append()——其方法是将方法里面的参数添加到jquery对象中来；

如：Aappend(B)的意思是将B放到A中来，插入到A的子元素的第一个位置；

appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

如：AappendTo(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 10

2013年12月2日17:08:26

/

function _insert(parent, position, any, index) {

if ($isFunction(any)) {

any = anycall(parent);

}

// 字符串

if ($isString(any)) {

if (regTagtest(any)) {

parentinsertAdjacentHTML(position, any);

} else {

parentinsertAdjacentText(position, any);

}

}

// 数字

else if ($isNumber(any)) {

parentinsertAdjacentText(position, any);

}

// 元素

else if ($isElement(any)) {

parentinsertAdjacentElement(position, index > 0 anycloneNode(!0) : any);

}

// Yquery

else if (_isYquery(any)) {

anyeach(function() {

_insert(parent, position, this);

});

}

}

2、append、prepend、before、after

$fn = {

/

追插

将元素后插到当前元素（集合）内

@param {String/Element/Function} any

@return this

@version 10

2013年12月29日1:44:15

/

append: function(any) {

return thiseach(function(index) {

_insert(this, 'beforeend', any, index);

});

},

/

补插

将元素前插到当前元素（集合）内

@param {String/Element/Function} any

@return this

@version 10

2013年12月29日1:44:15

/

prepend: function(any) {

return thiseach(function(index) {

_insert(this, 'afterbegin', any, index);

});

},

/

前插

将元素前插到当前元素（集合）前

@param {String/Element/Function} any

@return this

@version 10

2013年12月29日1:44:15

/

before: function(any) {

return thiseach(function(index) {

_insert(this, 'beforebegin', any, index);

});

},

/

后插

将元素后插到当前元素（集合）后

@param {String/Element/Function} any

@return this

@version 10

2013年12月29日1:44:15

/

after: function(any) {

return thiseach(function(index) {

_insert(this, 'afterend', any, index);

});

}

};

3、prependTo、prependTo、insertBefore、insertAfter

这些带后缀的与上面的不同的是，返回的结果不一样。如：

$('#demo')append('<a/>');

// => 返回的是 $('#demo')

$('<a/>')appendTo($('#demo'));

// => 返回的是$('a');

因此两者的关系只是返回结果不一样，其他的都一样，可以这么解决：

_each({

appendTo: 'append',

prependTo: 'prepend',

insertBefore: 'before',

insertAfter: 'after'

}, function(key, val) {

$fn[key] = function(selector) {

thiseach(function() {

$(selector)[val](this);

});

return this;

};

});

貌似么有啊……javascript修改css其实就是写到元素的style属性上，:before,:after伪类是虚拟元素……怎么改啊……要是非得要修改的话，建议切换info的class试试，设计两个有:before的class，需要修改是切换有class的那个元素 ，比如

info:before{

content:"infomation";

border:1px solid #ccc;

}

info_other:before{

content:"infomation";

border:2px solid #000;

}，

然后需要修改的时候把info改成info_other

jquery获取元素索引值index()方法：

jquery的index()方法

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给

index()

方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

复制代码代码如下:

foo

bar

baz

$('li')index(documentgetElementById('bar'));

//1，传递一个DOM对象，返回这个对象在原先集合中的索引位置

$('li')index($('#bar'));

//1，传递一个jQuery对象

$('li')index($('li:gt(0)'));

//1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置

$('#bar')index('li');

//1，传递一个选择器，返回#bar在所有li中的做引位置

$('#bar')index();

//1，不传递参数，返回这个元素在同辈中的索引位置。

jquery获取元素索引值index()示例

复制代码代码如下:

//用于二级或者三级联动

建站素材

jquery特效

懒人主机

前端路上

$("#nav

a")click(function(){

//四个经典的用法

var

index1

=

$("#nav

a")index(this);

var

index2

=

$("#nav

a")index($(this));

var

index3

=

$(this)index()

var

index3

=

$(this)index("a")

alert(index3);

return

false;

});

以上就是关于Jquery中的append跟prepend，after和before的区别全部的内容，包括:Jquery中的append跟prepend，after和before的区别、javascript或者jquery对应的方法中有没有可以修改css伪元素:before,:after样式的、jquery中怎么获得特定元素的索引值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！