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. sql查询指定表外键约束

    //////////////////查询指定表外键约束select a.name as 约束名, object_name(b.parent_object_id) as 外键表, d.name as 外 ...

  2. 使用Python统计深圳市公租房申请人省份年龄统计

    使用Python,HtmlParser来统计深圳市保障房申请人的原籍省份分布,年龄分布等.从侧面可以反映鹏城人的地域分布.以下python代码增大了每一次获取的记录数,从而少提交几次请求.如果按照WE ...

  3. js执行环境的深入理解

    第一个例子中 :之所以每个函数都返回不同的值的原因 有2点 (简写如下文) 就是[SCOPE]内部属性,函数可能拥有相同的父作用域时,多个函数引用同一个[SCOPE]属性,所以return i的值还是 ...

  4. C#调用windows API的一些方法

    使用C#调用windows API(从其它地方总结来的,以备查询) C#调用windows API也可以叫做C#如何直接调用非托管代码,通常有2种方法: 1．  直接调用从 DLL 导出的函数. 2． ...

  5. Extjs swfUpload 多图片上传

    一.属性介绍   类型 默认值 描述 upload_url String   处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址 p ...

  6. [Effective JavaScript 笔记]第45条：使用hasOwnProperty方法以避免原型污染

    之前的43条,44条讨论了属性的枚举,但都没有彻底地解决属性查找中原型污染的问题.看下面关于字典的一些操作 'zhangsan' in dict; dict.zhangsan; dict.zhangs ...

  7. vs加js引用

    今天又有一个同事问我“在VS中如何让一个JS文件智能提示另一个JS文件中的成员”,他说Google了一下,并没有找到答案,然后我把这个小技巧贴出来,希望能被Google到. 有时候会有这种情况:当我的 ...

  8. 理解innodb buffer pool

    今天组里有个同事说可以查看innodb buffer pool每个表和索引占的大小,为此我搜了下,还真有方法,记录下. innodb buffer pool有几个目的: 缓存数据--众所周知,这个占了 ...

  9. 深度系统deepin使用初体验

    最近使用linux系统比较多,因为很多项目要用到,而且厌烦了windows流氓软件各种广告的繁琐,因此决定在自己的本子上安装linux系统.然后了解到了deepin操作系统,竟然是武汉一个公司发行的版 ...

  10. Cortex-M3中C与汇编的交互

          以下内容摘自<ARM Cortex-M3权威指南>         概览       在CM3 上编程,既可以使用C 也可以使用汇编.可能还有其它语言的编译器,但是大多数人还是 ...