1.  .wrap()方法:在每个匹配的元素外层包上一个html元素。

2.  有两种使用方法:

  • .wrap(wrappingElement):其中wrappingElement可以是一个HTML片段,选择表达式,jQuery对象,或者DOM元素,用来包在匹配元素的外层。

    <!DOCTYPE html>
    <html> <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    </head> <body>
    <div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
    </div>
    </body> <script type="text/javascript">
    $(function(){
    $('.inner').wrap('<div class="new"></div>');
    });
    </script> </html>

    浏览器中显示的代码:

  • .wrap(function(index)):回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函函数内的this指向集合中的当前元素。
    <!DOCTYPE html>
    <html> <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    </head> <body>
    <div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
    </div>
    </body> <script type="text/javascript">
    $(function(){
    $('.inner').wrap(function(){
    return "<div class='>"+$(this).text()+"<'/div>"
    });
    });
    </script> </html>

    浏览器中显示的代码:

    

3.  这个方法还是十分简单的,我在看代码的时候不知道这是个什么方法,但是查阅了API后就知道这个方法的作用了。

jQuery--.wrap()方法的更多相关文章

  1. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  2. jQuery 事件方法大全-超全的总结

    jquery经常使用的事件: /*     on     off     hover     blur     change     click     dblclick     focus     ...

  3. Django配合使用Jquery post方法

    Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...

  4. jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  5. jquery ajax 方法及各参数详解

    1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...

  6. jquery.extend方法

    jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...

  7. jQuery extend方法使用及实现

    一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...

  8. 优化加载jQuery的方法

    请看下面的一段代码: <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ...

  9. C#实现jQuery的方法连缀

    jQuery的方法连缀使用起来非常方便,可以简化语句,让代码变得清晰简洁.那C#的类方法能不能也实现类似的功能呢?基于这样的疑惑,研究了一下jQuery的源代码,发现就是需要方法连缀的函数方法最后返回 ...

  10. jQuery原型方法each使用和源码分析

    jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍对象和数组.不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象.通常需要两个参数 ...

随机推荐

  1. ASP.NET Core 导入导出Excel xlsx 文件

    ASP.NET Core 使用EPPlus.Core导入导出Excel xlsx 文件,EPPlus.Core支持Excel 2007/2010 xlsx文件导入导出,可以运行在Windows, Li ...

  2. 关于gdb和shp的FID问题

    gdb的FID从1开始,并且FID唯一,从数字化时开始,每个图形对应唯一的FID,删除图形亦删除对应的FID.FID可能出现中断的情况. shp的FID从0开始,并且永远连续.删除图形,则编号在其下面 ...

  3. linux中输入输出和重定向问题

    输入输出解释 当我们执行shell的时候,每个进程都和三个打开的文件有关系,并使用文件描述符来引用这些文件.但这些文件不容易记忆,所以shell给了相应的文件名: 0:输入文件-标准输入(它的命令是输 ...

  4. Python VS PHP 基础语法

    这几天在学习Python,鄙人平时学习中为了方便记忆和更好的比较与理解语言二者之间在某些情况的优劣性,所以花了点时间,整理了一下 Python 和 PHP 常用语法的一些区别. 一.大小写 PHP: ...

  5. 《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式(如:文件)

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  6. JavaScript闭包(Closure)

    JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...

  7. 如何利用FineBI做财务分析

    很多企业随着业务规模的增长,传统的财务分析方式采用手工摘取数据的方式,难以快速地对企财务经营状况作出及时分析和预测.现在业务人员通过使用自助式BI工具做财务分析已经成为流行,每个人都希望自己做报表,快 ...

  8. Android 内存泄漏的一些情况。

    最近在维护代码,发现一个自定义View(这个View是在一个AsyncTask的工作线程doInBackground中新建的,在UI线程onPostExecute中添加进window中的)经常会泄漏内 ...

  9. 获取iPhone手机的UDID和设备名称.

    关于设备名称: iPhone的设备名称也可以在手机上面查看到:设置-通用-关于本机-名称(设备名称是可以自己改的) 关于UUID: 什么?用了iPhone这么久你不知道什么叫UDID! UDID 是由 ...

  10. Ubuntu 14 Trusty安装hue

    想开始学习一下hive,需要一个使用起来方便的客户端,网上搜了一下发现hue是个很常用的工具.于是,就在自己的ubuntu14系统里,尝试安装hue.下面就是自己的安装步骤,记录如下: 1.先查看自己 ...