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

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


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



$( “.inner” ).before( “<p>Test</p>” );
$( “.container” ).before( $( “h2” ) );
$( “p” ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( “p” ).before( “<b>Hello</b>” );
$( “p” ).before( document.createTextNode( “Hello” ) );


.insertBefore(target) 把对象插入到target之前(同样不是头部,是同级)


Insert every element in the set of matched elements before the target.


$( “h2” ).insertBefore( $( “.container” ) );


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


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



$( “.inner” ).after( “<p>Test</p>” );
$( “p” ).after( document.createTextNode( “Hello” ) );


.insertAfter(target) 和insertBefore相反,把对象插入到target之后(同样不是尾部,是同级)


Insert every element in the set of matched elements after the target.



$( “<p>Test</p>” ).insertAfter( “.inner” );
$( “p” ).insertAfter( “#foo” );


包裹元素


.wrap(wrappingElement) / .wrap(function(index)) 为每个对象包裹一层HTML结构,可以是selector, element, HTML string, jQuery object


Wrap an HTML structure around each element in the set of matched elements.



<div class=”container”>
  <div class=”inner”>Hello</div>
  <div class=”inner”>Goodbye</div>
</div>$( “.inner” ).wrap( “<div class=’new’></div>” );
<div class=”container”>
  <div class=”new”>
    <div class=”inner”>Hello</div>
  </div>
  <div class=”new”>
    <div class=”inner”>Goodbye</div>
  </div>
</div>


.wrapAll(wrappingElement) 把所有匹配对象包裹在同一个HTML结构中


Wrap an HTML structure around all elements in the set of matched elements.



<div class=”container”>
  <div class=”inner”>Hello</div>
  <div class=”inner”>Goodbye</div>
</div>$( “.inner” ).wrapAll( “<div class=’new’ />”);<div class=”container”>