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. 有关css伪类visited样式无效的解决方法

    错误写法 将visited写在hover和active之后,例如: .ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color: ...

  2. getStyle(obj, attr)兼容获取css

    设置元素(element)的css属性值可以用element的style属性,dom.style.attr  这样或取得到的值大多数是undefined:何解? dom.style.attr  是用来 ...

  3. PHP就业班心得：IP与域名以及DNS和端口号的概念

    什么是IP地址 概念:IP地址就相当于人们的身份证号码!每一个连入Internet的计算机都应该有全世界独一无二的IP地址 IP地址是使用32个bit位来保存,也就是4个字节! 为了方便记忆,采用十进 ...

  4. Android数字签名

    描述你对Android数字签名的理解? 数字签名就是为程序打上一个标记来作为自己的标识,是Android系统要求的,若一个Android程序没有经过数字签名,没办法安装到系统: 签名也是对apk的一种 ...

  5. WCF、Net remoting、Web service概念及区别

    Windows通信基础(Windows Communication Foundation,WCF)是基于Windows平台下开发和部署服务的软件开发包(Software Development Kit ...

  6. JBOSS服务器的安装及配置

    1 安装jdk(jdk-1_5_0_05-windows-i586-p.exe)2 配置jdk环境 安装完成后还需要配置运行时环境:右键点击"我的电脑"->"属性& ...

  7. grid style

    <style type="text/css"> .g_grid tr{ border-left:none; border-right:none; border-top: ...

  8. wps使用技巧

    1.和word一样的文档结构图: 视图->文档结构图 (不是导航窗格) 2.粘贴时,出现乱码: WPS->选项->默认粘贴方式:无格式文本. 3.浏览当前文档所在目录: 在WPS的标 ...

  9. Thinkphp回顾之(四)查询方法深入学习

    本次讲的查询方法主要有:表达式查询,模糊查询,between语句,in语句,区间查询,统计数据,普通方式查询,但大多数都只是引入数组而已,明白了第一个,其他的也就差不多全明白了,唯一要注意的是在后台中 ...

  10. Android 进程常驻----开机广播的简单守护以及总结

    这是一个轻量级的库,配置几行代码,就可以实现在Android上实现进程常驻,也就是在系统强杀下,以及360获取root权限下,clean master获取root权限下都无法杀死进程 支持系统2.3到 ...