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. Ubuntu14.04安装OpenCV2.4.9

    1.安装依赖 sudo apt-get install build-essential libgtk2.0-dev libjpeg-dev libtiff4-dev libjasper-dev lib ...

  2. 理解timestamp

    大多数资料都说timestamp表示自从1970-1-1 00:00:00开始到现在的秒数,一般称为epoch time,却忽略了时区的概念.其实,不同时区记录timesamp的基准时间是不一样的,比 ...

  3. MVC3 数据验证用法之密码验证设计思路

    描述:MVC数据验证使用小结 内容:display,Required,stringLength,Remote,compare,RegularExpression 本人最近在公司用mvc做了一个修改密码 ...

  4. 原生态PHP+mysql 实现分页

    <?php/** * 数据分页 * 时间:2016-07-06 *//**1传入页码**/ $page = $_GET['p'];/**2根据页码取数据:php->mysql处理**/$h ...

  5. httpclient模拟post请求json封装表单数据

    好长时间不更博了,主要肚子里没什么好墨水,哈哈.废话不说上代码. public static String httpPostWithJSON(String url) throws Exception ...

  6. Java的文件读写操作

    file(内存)----输入流---->[程序]----输出流---->file(内存) 当我们读写文本文件的时候,采用Reader是非常方便的,比如FileReader,InputStr ...

  7. 浮点型数据运算精度bug

    /** * 校验是否为数字 * @param arg * @return */ function checkIsNumber(arg){ if(arg != null && arg.t ...

  8. vue-cli 安装报错

    # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...

  9. Git使用指南（3）—— 使用Git命令

    暂存区替换掉工作区 git init git init newrepo 克隆仓库 git clone git clone <repo> git clone <repo> < ...

  10. 如何静态添加toolbar到datagrid

    这个示例向你展示如何添加toolbar到datagrid. 创建 DataGrid <table id="tt" class="easyui-datagrid&qu ...