博客

jQuery wrap()的例子

  • Post category:jquery

下面是关于jQuery wrap()方法的攻略。

标题一：jQuery wrap()方法是什么？

wrap()可以在指定的元素周围插入一个包装元素。该方法返回原始元素本身，包装元素是在页面上添加的。

标题二：jQuery wrap()方法的语法

$(selector).wrap(wrappingElement)
  • selector：必需，选择器，选择要被包装的元素
  • wrappingElement：必需，用来包装选择器所选择的元素的元素

标题三：jQuery wrap()方法的例子

示例一

HTML代码：

<div class="wrapper">
  <p>这是一个段落。</p>
  <p>这是另一个段落。</p>
</div>

JavaScript代码：

$( "p" ).wrap( "<div class='new'></div>" );

效果：通过上面的代码段，每个p元素外围会自动加上一个div，div的样式类名为”new”。

<div class="wrapper">
  <div class="new">
    <p>这是一个段落。</p>
  </div>
  <div class="new">
    <p>这是另一个段落。</p>
  </div>
</div>

示例二

HTML代码：

<div id="container">
  <p>这是一个段落。</p>
</div>

JavaScript代码：

$( "#container" ).wrapInner( "<div class='new'></div>" );

效果：通过上面的代码段，div元素里的内容（即p元素）会被自动包在一个新的div元素中，这个div的样式类名为”new”。

<div id="container">
  <div class="new">
    <p>这是一个段落。</p>
  </div>
</div>

标题四：总结

通过本文的讲解，我们知道了jQuery中的wrap()方法是什么，它的语法是怎样的，并且通过两个例子，详细说明了wrap()方法的应用。我们应该对该方法有了更深刻的理解，可以在实际开发中灵活运用。

Tags: