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. 使用百度地图api接口获取公交地图路线和车站

    需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...

  2. win10 启动文件夹

    C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp

  3. asp.net的mongodb实例

    mongodb为2.6版本, .net是4.0, c#接口时1.7. 运行环境为windows8 with visual studio2010 注意事项:在mongodb中使用地理位置存储信息且动用到 ...

  4. listview和checkbox的冲突的用法

    package com.exaple.music; import java.util.List; import java.util.Timer; import java.util.TimerTask; ...

  5. 利用 async & await 的异步编程

    走进异步编程的世界 - 开始接触 async/await 利用 async & await 的异步编程 async 的三大返回类型 公司技术需求备忘录

  6. IOS随机随学

    1.Objective-C是一种面向对象的语言. 2.Objective-C类声明和实现包括两个部分:接口部分和实现部分. 3.Objective-C中方法不是在“.”运算符,而是采用“[]”运算符. ...

  7. 阿里云mariadb无法启动问题

    需要再安装yum install mariadb-server就可以了, 重启服务器,使用命令 sudo systemctl start mariadb.service

  8. python之excel自动报表

    一.自动报表前期工作: 需要安装XlsxWriter模块,可以从github上下载以后解压.setup.py install. 二.程序: #!/usr/bin/env python # -*- co ...

  9. Bash:-:-通过awk获取文本变量的赋值

    txt格式: ... logport='13000' sessionport='23000' ... ######################## 只获取logport的赋值13000 awk ' ...

  10. 总结一下今天做的unity面试题（一）：刚体的点击事件

    按照需求,由于要模拟丧尸被击中的效果,不能使用CharactorControll组件,只能使用rigidbody组件. 首先在场景上摆好僵尸和相机的位置,这里就不给相机加脚本了,直接固定住. 然后给丧 ...