jQuery wrap（）示例

最新推荐文章于 2022-11-10 21:25:35 发布
最新推荐文章于 2022-11-10 21:25:35 发布
阅读量419 收藏 2
点赞数
文章标签： javascript ViewUI

jQuery wrap（）用于将HTML元素包装在每个匹配的元素周围。

例如， 

<div class="innerBox">Ip man vs Iron man</div>
<div class="innerBox">Ip man 2 vs Iron man 2</div>

用div标签包装它，该标签包含类名“ wrapBox”。 

$('.innerBox').wrap("<div class='wrapBox'></div>");

新内容将变为： 

<div class='wrapBox'>
   <div class="innerBox">Ip man vs Iron man</div>
</div>

<div class='wrapBox'>
   <div class="innerBox">Ip man 2 vs Iron man 2</div>
</div>

警告
不要包装html内容 

$('.innerBox').wrap("<div class='wrapBox'>TESTING</div>");

您期望跟随吗？ 

<div class='wrapBox'>TESTING
   <div class="innerBox">Ip man vs Iron man</div>
</div>

不，结果将是全部替换。 包装仅支持html标签，不支持内容。 

<div class='wrapBox'>TESTING</div>

自己尝试 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.innerBox{
		padding:8px;
		border:1px solid blue;
		margin:8px;
	}
	.wrapBox{
		padding:8px;
		border:1px solid red;
		margin:8px;
	}
</style>

</head>
<body>
  <h1>jQuery wrap() example</h1>

  <div class="innerBox">Ip man vs Iron man</div>
  
  <div class="innerBox">Ip man 2 vs Iron man 2</div>
  
  <p>
  <button id="wrapButton">wrap()</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#wrapButton").click(function () {
		
	  $('.innerBox').wrap("<div class='wrapBox'></div>");
	  
    });
	
	$("#reset").click(function () {
	  location.reload();
    });
	
</script>
</body>
</html>
试试演示
标签：

翻译自: https://mkyong.com/jquery/jquery-wrap-example/

cyan20115
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
给Dreamweaver安装jQuery插件jQuery_API.mxp
ywj_316的博客
01-20 336
要让Dreamweaver支持jQuery自动提示代码功能，方法很简单，下载一个插件—jQuery_API.mxp[点击下载]。 在Dreamweaver里依次选择“命令” -&gt; “扩展管理” -&gt; “安装扩展” -&gt; …，就会自动安装了。 成功后重启Dreamweaver，就大功告成了。 点击下载DW cs4的jQuery语法提示插件：jquery_api_for_dw4 注...
jQuery中warp与warpInner以及warpAll的简单应用
m0_52228992的博客
05-12 446
warp，warpInner相对于append，prepend内部追加而言，是将元素包裹起来（就是成为它的父元素包裹或是子元素包裹），也是比较常用的方法 下面简单解释用法及应用 元素1.warp（标签）：用标签包裹元素1 元素2.warpInner（标签）：用标签包裹元素2内部 元素3.warpAll(标签)：所有元素3均被一个标签包裹 举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta ch
简述jQuery中warp，wrapAll和wrapInner方法
飞翔的企鹅的博客
11-10 327
介绍 wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来 wrapAll() 将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹 wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来 区分 1、wrap()方法 <!DOCTYPE html> <html>...
jQuery中wrap方法
myy_llc的博客
11-15 596
wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来。 wrapAll() ：将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹。 wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来. unwrap() ：移出匹配元素的父元素，用于取消 .wrap()方法的效果。 代码如下： wrap()方法： <!DOCTYP...
jQuery中wrap、wrapAll、wrapInner、unwrap方法
ANFO的博客
11-10 420
1.wrap() 该方法的作用是把所有匹配的元素用指定标签包裹起来，这里要注意它的效果是将匹配的每一个元素各用一个指定标签包裹，代码示例如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script sr...
jQuery包裹节点用法完整示例
10-21
主要介绍了jQuery包裹节点用法,结合完整实例形式分析了jQuery中wrap方法包裹节点的使用技巧,注释中还包含了wrapAll与wrapInner方法的使用,需要的朋友可以参考下
jQuery实现的图片轮播效果完整示例
11-22
本文实例讲述了jQuery实现的图片轮播效果。分享给大家供大家参考，具体如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <...
jQuery实现的简单手风琴效果示例
12-03
本文实例讲述了jQuery实现的简单手风琴效果。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery手风琴...
基于jquery的9行js轻松实现tab控件示例
01-21
代码如下: <!... <head> <meta charset=”UTF-8″> [removed][removed] [removed] /** * 考虑到tab和pane有可能被动态的添加和删除， * 所以每次都废点时间去查找先前被激活的tab */ var tab = function...
jquery wrap
weixin_33871366的博客
12-03 128
Jquery的wrap的系列的函数可以说是dom元素操作中较为复杂的方法。它提供,wrapAll,wrapInner,wrap三种方法。    wrapAll是把jquery对象中所有元素都包裹在给定的元素最内部元素中(firstChild)。这个包裹之后的元素在jquery对象第一个元素的位置之前。同时会把所有其它位置的元素都去掉。也就是说wrapAll最好是不要多个元素。...
CSS中选择器用法
weixin_42244691的博客
12-06 158
先明白一个概念： <div class="view"></div> <ul id='parent' class="box"> <li id='child1' class="wrap"> <img src='xxxx' class="picture" /> <img src='xxxx' /...
jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()的用法及其区别
weixin_45846805的博客
05-23 1156
在jQuery中有三总包裹节点的方法 1.wrap()：将每一个匹配到的子元素进行包裹(一对一 单独包裹，直接添加父元素) 2.wrapInner()： 给一堆同级别的元素添加父元素 3.wrapAll(): 给一堆元素添加同一个父元素 三者中比较好理解的就是wrap()和wrapInner() 例如： body中存在1个hello world！ 此时分别执行$(‘em’).wrap(’’); $(‘em’).wrapInner(’’); 得到的结果： 从html结构可以看出：wrap是在选定元素外面包
关于jQuery自动生成html代码的方法--wrap用法
yhsap
09-19 4817
<br />源码：<br /> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /> <html xmlns="http://www.w3.org/1999/xhtml"> <br /> <head> <br /> <title>Onion Skin DropShadwo wit
js的选项卡经典案例：排他思想
最新发布
m0_68863090的博客
11-10 210
选项卡和排他思想：运用的是排他思想。排他思想，就是排除所有人（留下我自己），然后设置自己。
jQuery中wrap()方法、warpAll()方法、warpInner()方法与unwarp()方法
Liuxiaoyang1999的博客
11-10 858
目录 一、wrap()方法： 二、wrapAll()方法： 三、wrapInner()方法： 四、unwrap() 方法： 一、wrap()方法： wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。 代码示例： <!DOCTYPE html> <html> <head> <meta chars...
jquery 包裹节点warp(),warpAll(),warpInner()
a_as31243qadfg的专栏
07-08 1186
<strong>aaaaaaaaaaaaaaaaa</strong> <strong>bbbbbbbbbbbbbb</strong>$( "strong").warp("<b></b>");//得到的结果是 <b><strong>aaaaaaaaaaaaaaaaa</strong></b> <b><strong>bbbbbbbbbbbbbbb</strong></b>//warp()会对每一个匹配的
jquery_warp
pyl574069214的专栏
06-25 362
jQuery中的wrap()方法
kongjunchao159的博客
11-18 497
jQuery中wrap()、wrapAll()和wrapInner()的区别 (使用指定的HTML元素来包裹被选元素) 例子： 原代码： 段落1 段落2 wrap()方法： $('p').wrap(''); 结果： 段落1 段落2 wrapAll()方法： $('p').wrap(''); 结果： 段落1 段落2 wr
使用jquery的wrapAll()和wrap()方法包装元素
马果的博客
12-27 1313
wrapAll() 把所有元素包装在一个容器中 wrap() 把每个元素分别包装在各自的容器中 before() insertBefore()的反向方法，功能与insertBefore()类似，但操作的内容和目标与insertBefore（）相比刚好是相反的 例如： $('<p>Hello</p>').appendTo('#container'); 与

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值