jQuery 提供了一系列方法用于包裹节点，那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思。

　　

　　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    //$('div').wrap('<strong></strong>'); //在div 外层包裹一层strong
    //$('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
    //$('div').wrap('<strong><em></em></strong>'); //包裹多个元素
    //$('div').wrap($('strong').get(1)); //也可以包裹一个原生DOM,先获取到strong元素，后再包裹div元素
    //$('div').wrap(document.createElement('strong')); //临时的原生DOM
    $('div').wrap(function (index) { //匿名函数
        return '<strong>'+index+'</strong>';
    });
});
</script>
</head>
<body>
    <strong>DOM</strong>
    <strong>DFM</strong>
    <div>节点</div>
    <div>节点</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $('div').unwrap(); //移除一层包裹内容，多个需移除多次
});
</script>
</head>
<body>
    <strong><div>节点</div></strong>
    <strong><em><div>节点</div></em></strong>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    //$('div').wrapAll('<strong></strong>'); //所有div 外面只包一层strong
    //$('div').wrapAll($('strong').get(0)); //同上
});
</script>
</head>
<body>
    <div>节点</div>
    <div>节点</div>
</body>

　　.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。

　　这两种都是在外层包含，而.wrapInner()在内层包含。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    $('div').wrapInner('<strong></strong>'); //包裹子元素内容,这里包裹了div里面的节点变成<div><strong>节点</strong></div>
    //$('div').wrapInner($('strong').get(0)); //DOM 节点
    //$('div').wrapInner(function () { //匿名函数
        //return '<strong></strong>';
    //});
});
</script>
</head>
<body>
    <div>节点</div>
    <div>节点</div>
</body>

JQuery_DOM 节点操作之包裹节点的更多相关文章

  1. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  2. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  3. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  4. Jquery6 DOM 节点操作

    学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,通过这 ...

  5. 51 jquery 节点操作和 bootstrapt

    jquery 和 bootstrapt1.jquery each 函数 1.each 循环方式一: 可循环对象: var arr =["alex","deng" ...

  6. js节点操作实例

    写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...

  7. 事件委托，元素节点操作，todolist计划列表实例

    一. 事件委托 事件委托就是利用冒泡的原理,把事件加到父级上,来代替子集执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新加入的子元素也可以拥有相同的操作. 比如有20个&l ...

  8. jQuery中的DOM操作------复制及包裹节点

    1.复制节点: 如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成: $(this).clone().appendTo("ul" ...

  9. jQuery 节点操作（创建 插入 删除 复制 替换 包裹）

    一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...

随机推荐

  1. Spring的Ioc和AOP扩展

    多种方式实现依赖注入: 这里唯一需要说明的是如果要使用P命名空间实现属性注入,需要添加命名空间的声明: 如我的xml里红色字体: <?xml version="1.0" en ...

  2. paper 114：Mahalanobis Distance(马氏距离)

    (from:http://en.wikipedia.org/wiki/Mahalanobis_distance) Mahalanobis distance In statistics, Mahalan ...

  3. 今天携程出事了：让我们来学习下http的响应码

    就在今天,2015年5月28日,中国最大的旅游机票预订网站--携程网粗大事了.据传携程网的数据库被人物理删除了,而容灾备份的数据又无法正常使用,服务器全面遭受瘫痪.每小时给携程带来的损失约100万美元 ...

  4. 夺命雷公狗-----React---19--表单的值的修改

    少了1个e,在代码部分补回,否则会报错 <!DOCTYPE> <html> <head> <meta charset="utf-8"> ...

  5. eclispe或者myeclispe maven jar包不能部署到tomcat下

    我们在做web开发是,经常都要在eclipse或者myeclipse中搭建web服务器,并将开发中的web项目部署到web服务器进行调试,在此,我选择的是tomcat服务器.之前部署web项目到tom ...

  6. Flexbox布局（转）

    Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防 ...

  7. 货运APP产品魔力＝卓越功能×情感诉求

    货运APP产品魔力＝卓越功能×情感诉求   [导语]在滴滴打车.快的打车软件风靡全国之际,很多企业也在探索如何将其应用到公路货运领域用以整合社会运力资源.但一方面大多数人聚焦的是干线运输中的长途货车运 ...

  8. redmine computed custom field formula tips

    项目中要用到Computed custom field插件,公式不知道怎么写,查了些资料,记录在这里. 1.http://apidock.com/ruby/Time/strftime 查看ruby的字 ...

  9. Vmware10如何打开vmware11建立的虚拟机

    先说一下办法: 使用文本工具打开VMware 虚拟机配置文件(*.vmx文件),找到"virtualHW.version"一行,将值11修改为10保存即可. 修改之前: 硬件兼容性 ...

  10. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...