浅谈JQuery包装对象wrap、wrapAll、wrapInner、unwrap

浏览: 285次 日期:2018年01月12日 22:35:19 作者:青格勒

jq怎么在标签外面给父级标签怎么在div外面动态加标签怎么删除标签的父级元素怎么把多个标签抱在一个标签里面标签里面再加一个标签,请看JQuery包装对象wrapwrapAllwrapInnerunwrap

 

一、JQuery包装对象wrap

有时候我们需要动态的操作,把一些标签抱在一个div或者其他标签里面。

比如说动态在下面的span外面加个标签:

<span>CGLweb前端</span>

这时候咱们可以使用JQ包装对象wrap。

代码如下:

<span>CGLweb前端  cenggel.com</span>
<script type="text/javascript">
    $('span').wrap('<div>');
</script>

输出的代码:

<div><span>CGLweb前端  cenggel.com</span></div>

 

二、JQuery包装对象wrapAll(整体包装)

第一个例子:

代码如下:

<span>CGLweb前端  cenggel.com</span>
<span>CGLweb前端  cenggel.com</span>
<span>CGLweb前端  cenggel.com</span>
<script type="text/javascript">
    $('span').wrapAll('<div>');
</script>

结果为:

<div>
    <span>CGLweb前端  cenggel.com</span>
    <span>CGLweb前端  cenggel.com</span>
    <span>CGLweb前端  cenggel.com</span>
</div>

 

第二例子:如果代码里面有其他的标签,jq将会把这个标签移除在外面:

代码如下:

<span>CGLweb前端  cenggel.com</span>
<span>CGLweb前端  cenggel.com</span>
<p>CGLweb前端  cenggel.com</p>
<span>CGLweb前端  cenggel.com</span>
<script type="text/javascript">
    $('span').wrapAll('<div>');
</script>

结果为:

<div>
    <span>CGLweb前端  cenggel.com</span>
    <span>CGLweb前端  cenggel.com</span>
    <span>CGLweb前端  cenggel.com</span>
</div>
<p>CGLweb前端  cenggel.com</p>

所以使用的时候尽量注意一下这个。

 

三、JQuery包装对象wrapInner(内包装)

wrapInner会直接把作用标签的内容放在新加的标签里面。

代码如下:

<div>CGLweb前端  cenggel.com</div>
<div>CGLweb前端  cenggel.com</div>
<div>CGLweb前端  cenggel.com</div>
<script type="text/javascript">
    $('div').wrapInner('<em>');
</script>

结果为:

<div><em>CGLweb前端  cenggel.com</em></div>
<div><em>CGLweb前端  cenggel.com</em></div>
<div><em>CGLweb前端  cenggel.com</em></div>

 

四、JQuery包装对象unwrap(删除包装)

把指定标签的父级删除,注意一下,如果标签的父级是body的时候,这个方法将不会执行。

<div>
    <p>CGLweb前端  cenggel.com</p>
    <p>CGLweb前端  cenggel.com</p>
    <p>CGLweb前端  cenggel.com</p>
</div>
<script type="text/javascript">
    $('p').unwrap('<div>');
</script>

 

到此为止JQuery包装对象wrap()、wrapAll()、wrapInner()、unwrap(),已经讲解完毕。

 

 

文章链接:http://cenggel.com/js/45.html

版权声明:文章《浅谈JQuery包装对象wrap、wrapAll、wrapInner、unwrap》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注