了解了这些才能开始发挥jQuery的威力

2020-05-23 06:15:57易采站长站整理


.clone([withDataAndEvents][,deepWithDataAndEvents]) 创建jQuery集合的一份deep copy(子元素也会被复制),默认不copy对象的shuju和绑定事件


Create a deep copy of the set of matched elements.


$( “.hello” ).clone().appendTo( “.goodbye” );


.parent([selector]) 获取jQuery对象符合selector的父元素


Get the parent of each element in the current set of matched elements, optionally filtered by a selector.


$( “li.item-a” ).parent(‘ul’).css( “background-color”, “red” );


.parents([selector]) 获取jQuery对象符合选择器的祖先元素


Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.


$( “span.selected” ) .parents( “div” ) .css( “border”, “2px red solid” )


插入元素


.append(content[,content]) / .append(function(index,html)) 向对象尾部追加内容


Insert content, specified by the parameter, to the end of each element in the set of matched elements.


1. 可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象


2. 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的html值



$( “.inner” ).append( “<p>Test</p>” );
$( “body” ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( “p” ).append( “<strong>Hello</strong>” );
$( “p” ).append( $( “strong” ) );
$( “p” ).append( document.createTextNode( “Hello” ) );


.appendTo(target) 把对象插入到目标元素尾部,目标元素可以是selector, DOM对象, HTML string, 元素集合,jQuery对象;


Insert every element in the set of matched elements to the end of the target.



$( “h2” ).appendTo( $( “.container” ) );
$( “<p>Test</p>” ).appendTo( “.inner” );


.prepend(content[,content]) / .prepend(function(index,html)) 向对象头部追加内容,用法和append类似


Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.


$( “.inner” ).prepend( “<p>Test</p>” );


.prependTo(target) 把对象插入到目标元素头部,用法和prepend类似


Insert every element in the set of matched elements to the beginning of the target.


$( “<p>Test</p>” ).prependTo( “.inner” );


.before([content][,content]) / .before(function) 在对象前面(不是头部,而是外面,和对象并列同级)插入内容,参数和append类似