jQuery--.wrap()方法

时间：2022-04-04 20:30:33

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>

    浏览器中显示的代码：

    jQuery--.wrap()方法

  • .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>

    浏览器中显示的代码：

　　   jQuery--.wrap()方法

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

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

  1. jQuery框架-2&period;jQuery操作DOM节点与jQuery&period;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&lpar;&rpar;方法

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

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

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

  6. jquery&period;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&quot ...

  9. C&num;实现jQuery的方法连缀

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

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

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

随机推荐

  1. Conversion Operators in OpenCascade

    Conversion Operators in OpenCascade eryar@163.com Abstract. C++ lets us redefine the meaning of the ...

  2. ViewPager部分源码分析一：加载数据

    onMeasure()调用populate(),完成首次数据初始化. populate()维护ViewPager的page,包括mItems和mAdapter. populate(): if (cur ...

  3. PHP的面向对象编程

    面向对象编程的概念: 不同的作者之间说法可能不一样,但是一个OOP语言必须有以下几方面: 抽象数据类型和信息封装 继承 多态 在PHP中是通过类来完成封装的: <?php class Somet ...

  4. hibernate&lowbar;validator&lowbar;03

    约束继承 如果要验证的对象继承于某个父类或者实现了某个接口,那么定义在父类或者接口中的约束会在验证这个对象的时候被自动加载,如同这些约束定义在这个对象所在的类中一样. 让我们来看看下面的示例: pac ...

  5. apache主目录，配置文件目录结构说明

    apache服务安装成功后,主要的目录结构如下: |-- bin 程序命令目录[apache执行文件的目录如apachectl,htpassed] |-- build |-- cgi-bin 预设给一 ...

  6. ScriptCase升级到7&period;01

    今天打开ScriptCase的开发环境,发现有新的升级,联网自动升级后,发现已经升级到7.01版本. 7.01版本对界面进行了优化,菜单和图标均以立体的形式进行展现. 不过粗粗看了一下,翻译还是有很多 ...

  7. Java中使用UDP实现简单的聊天功能

    通过DatagramSocket类来实现.此类表示用来发送和接收数据报包的套接字. 发送端代码如下: import java.io.IOException; import java.net.*; im ...

  8. idea取消vim模式

    在安装idea时选择了vim编辑模式,但是用习惯了eclipse,总是要拷贝粘贴,在idea中一直按ctrl+c和ctrl+v不起总用.于是想把vim模式关闭掉.方法:菜单栏:tools->vi ...

  9. MySQL统计信息以及执行计划预估方式初探

    数据库中的统计信息在不同(精确)程度上描述了表中数据的分布情况,执行计划通过统计信息获取符合查询条件的数据大小(行数),来指导执行计划的生成.在以Oracle和SQLServer为代表的商业数据库,和 ...

  10. Nor Flash 驱动框架

    框架入口源文件: lcd.c (可根据入口源文件,再按着框架到内核走一遍) 内核版本:linux_2.6.22.6      硬件平台:JZ2440 以下是驱动框架: 以下是驱动代码 s3c_nor_ ...

相关文章