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. [SQL Server] 特殊字符、上标、下标处理

    今天遇到一个问题是往 SQL Server 中导入像m².m³这样的单位数据,可是在 SQL Server 中查看到的都是 m2.m3,于是在网上查了一下资料,顺便摘录下来供日后查阅. 一  Wind ...

  2. EC笔记:第三部分:16成对使用new和delete

    我们都知道,申请的资源,使用完毕后要释放.但是这个释放动作,一定要注意. 举个例子,很多人动态分配的资源,在使用之后,往往直接调用了delete,而不管申请资源的时候用的是new还是new[]. 如下 ...

  3. MVC发布到虚拟主机上出现的错误

    问题1:无法识别的属性“targetFramework”.请注意属性名称区分大小写. 现象:无法识别的属性“targetFramework”.请注意属性名称区分大小写. 原因:站点中部署的Web使用的 ...

  4. [python] File path and system path

    1. get files in the current directory with the assum that the directory is like this: a .py |----dat ...

  5. spring/spring boot/spring cloud开发总结

    背景        针对RPC远程调用,都在使用dubbo.dubbox等,我们也是如此.由于社区暂停维护.应对未来发展,我们准备尝试新技术(或许这时候也不算什么新技术了吧),选择使用了spring ...

  6. Java Business Process Management(业务流程管理) 初识环境搭建

    一.简介 (一)什么是jbpm JBPM,全称是Java Business Process Management(业务流程管理),它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易 ...

  7. Navicat软件中mysql中int、bigint、smallint和tinyint的区别、布尔类型存储以及乱码问题的解决

    很长时间不写博客了,最近一直在忙这学校的比赛都忘记更新博客了.新的任务又要开始了,我们要准备<2017年中国大学生计算机设计大赛软件服务外包竞赛>.这次不能再想像之前那样有PC端的功能作为 ...

  8. Python 环境搭建,开发工具,基本语法

    python环境 https://www.python.org/downloads/ 现在pthon有两个版本 一个是3.5系列的 , 一个是2.7系列的.建议用3.5版本的 开发工具 PyCharm ...

  9. Android XML中引用自定义内部类view的四个why

    今天碰到了在XML中应用以内部类形式定义的自定义view,结果遇到了一些坑.虽然通过看了一些前辈写的文章解决了这个问题,但是我看到的几篇都没有完整说清楚why,于是决定做这个总结. 使用自定义内部类v ...

  10. C++实现DNS域名解析

    一.概述 现在来搞定DNS域名解析,其实这是前面一篇文章C++实现Ping里面的遗留问题,要干的活是ping的过程中画红线的部分: cmd下域名解析的命令是nslookup,比如“nslookup w ...