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. 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

    [源码下载] 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件 作者 ...

  2. A2W、W2A、A2T、T2A的使用方法

    1.A2W和W2A 在<Window核心编程>,多字节和宽字节之间转换比较麻烦的,MultiByteToWideChar函数和WideCharToMultiByte函数有足够多的参数的意义 ...

  3. 【笔记】LAMP 环境无脑安装配置 Centos 6.3

    p.p1 { margin: 0.0px 0.0px 5.0px 0.0px; font: 12.0px Times; color: #ff2500 } p.p2 { margin: 0.0px 0. ...

  4. getRequestDispatcher()与sendRedirect()的区别

    1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ; response.sendRedirect()是重新定向,前后页面不是一个request ...

  5. HTML5本地存储Localstorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

  6. 使用IdleTest进行TDD单元测试驱动开发演练（1）

    [前言] 开发工具:Visual Studio 2012 测试库:Visual Studio 2012自带的MSTest DI框架:Unity 数据持久层:Entity Framework 前端UI: ...

  7. iOS 获取设备唯一标示符的方法

    在开发中会遇到应用需要记录设备标示,即使应用卸载后再安装也可重新识别的情况,在这写一种实现方式--读取设备的UUID(Universally Unique Identifier)并通过KeyChain ...

  8. showSetPwdDialog--自定义对话框

    样式: 布局: layout dialog_set_pwd.xml <?xml version="1.0" encoding="utf-8"?> & ...

  9. 前端开发--ppt展示页面跳转逻辑实现

    1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 今天遇到一个小问题, 同组的 ...

  10. 如何dos中查看当前MySQL版本信息？

    dos中MySQL安装服务成功--启动服务成功--登录MySQL成功后输入:select version();  如图: