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. Checkbox 模板和样式

    <Style TargetType="{x:Type CheckBox}"> <Setter Property="FontFamily" Va ...

  2. 充电时间 Go中的数组、切片、map简单示例

    数组是固定长度的,依稀让我想起了VB:切片是动态的:map一般是键值对 package main import ( "fmt" ) func main() { var userna ...

  3. Git 相关总结

    Git 优秀在线教程 廖雪峰-史上最浅显易懂的Git教程!

  4. OS存储管理——FIFO,LRU,OPT命中率

    课程设计课题 存储管理程序设计 摘 要 虚拟存储器作为现代操作系统中存储管理的一项重要技术,实现了内存扩充功能.而分页请求分页系统正好可以完美的支持虚拟存储器功能,它具有请求调页功能和页面置换功能.在 ...

  5. PHP函数基础知识.png

  6. spring mvc返回json字符串的方式

    spring mvc返回json字符串的方式 方案一:使用@ResponseBody 注解返回响应体 直接将返回值序列化json            优点:不需要自己再处理 步骤一:在spring- ...

  7. Android进阶--Acticivity的启动模式

    一.引言 我们在多次启动同一个Activity时,系统默认会重复创建多个实例,这样看上去便十分的愚蠢,所以android在设计时提供了启动模式来修改系统的默认行为.目前有四种启动模式:standard ...

  8. C#初步应用

    首先,此次编程是第一次尝试结对编程,我的结对对象博客园地址:http://www.cnblogs.com/cbb111/ 他的源代码链接:https://coding.net/u/cao1417146 ...

  9. 消费RabbitMQ时的注意事项，如何禁止大量的消息涌到Consumer

    按照官网提供的订阅型写法( Retrieving Messages By Subscription ("push API")) 我发现,RabbitMQ服务器会在短时间内发送大量的 ...

  10. 拥抱.NET Core，如何开发跨平台的应用并部署至Ubuntu运行

    之前写了一篇博文宣布Rabbit Rpc跨平台了"拥抱.NET Core,跨平台的轻量级RPC:Rabbit.Rpc",在过程中尝试了如何编写支持跨平台的类库与应用程序,也尝试了在 ...