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. Angular2中对ASP.NET MVC跨域访问

    应用场景 项目开发决定使用angular2进行前后端分离开发,由我负责后端服务的开发,起初选择的是web api进行开发.对跨域访问通过API中间件+过滤器对跨域访问进行支持.开发一段后,通知需要移植 ...

  2. SimpleSSO:使用Microsoft.Owin.Security.OAuth搭建OAuth2.0授权服务端

    目录 前言 OAuth2.0简介 授权模式 (SimpleSSO示例) 使用Microsoft.Owin.Security.SimpleSSO模拟OpenID认证 通过authorization co ...

  3. bzoj2693--莫比乌斯反演+积性函数线性筛

    推导: 设d=gcd(i,j) 利用莫比乌斯函数的性质 令sum(x,y)=(x*(x+1)/2)*(y*(y+1)/2) 令T=d*t 设f(T)= T可以分块.又由于μ是积性函数,积性函数的约束和 ...

  4. bodyparser

    今天在用bodyparser时,遇到了如下问题: 首先科普下bodyparser的作用:它用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理. 现在继 ...

  5. 如何解决例如i++的线程不安全性

    AtomicBoolean.AtomicInteger.AtomicLong.AtomicReference 各种原子性关键字,可以解决比如i++的线程不安全性的因素

  6. 以ZeroMQ谈消息中间件的设计【译文】

    本文主要是探究学习比较流行的一款消息层是如何设计与实现的 ØMQ是一种消息传递系统,或者乐意的话可以称它为"面向消息的中间件".它在金融服务,游戏开发,嵌入式系统,学术研究和航空航 ...

  7. Singleton(单例模式)的一种实现 -- 基于【惰性】适用于【大对象】的一种生产实践

    一.说明 本文中的代码类,在生产中使用了很长的时间,曾应用于多个企业多个项目实践中,其中也踩了不少坑,总结了一些适用的业务情景, 重要的事情说三遍: a.本代码类不是万能药,不要在业务情景中滥用! b ...

  8. python语言中的编码问题(续)

    上文提到了python开发中非常重要的两处设置. 一个是编解码器的默认设置defaultencoding >>> import sys >>> sys.getdef ...

  9. 移动端web自适应解决方案： adaptive.js

    代码有更新,最好直接查看github github:https://github.com/finance-sh/adaptive adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板 ...

  10. 【H5疑难杂症】脱离文档流时的渲染BUG

    BUG重现 最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!! 如图所示,我动态的改变了dom结构, ...