浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

今晚看书的时候发现jQuery有三个包裹节点的方法，百度了一下jQuery wrap() / wrapAll() / wrapInner()，果然搜索结果 W3School的文档说明是排第一的。

可是，W3School的解释是这样的：

jQuery 文档操作 - wrap() 方法

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
jQuery 文档操作 - wrapAll() 方法

wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
jQuery 文档操作 - wrapInner() 方法

wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
我读的书少，看见这样的解释不能立即解决我的困惑真的很烦。

还是动手最实际。

这是用来比较的原代码：

<p>我是占位子的。</p>
<p>我是占位子的。</p>
wrap()方法

$("p").wrap("<strong></strong>");

结果：

从图中可以看出strong标签包围了每个匹配的p标签。

wrapAll()方法

$("p").wrapAll("<strong></strong>");

结果：

从图中可以看出strong标签把全部匹配的p标签一下子全都包围了。

wrapInner()方法

$("p").wrapInner("<strong></strong>");

结果：

从图中可以看出strong标签内嵌入每个匹配的p标签里面。

当然，最后看起来，三个方法的效果是一样的。

点到即止。

以上就是个人对于jQuery中 wrap() wrapAll() 与 wrapInner()的差异分析了，仅仅是个人的一些理解，大神请略过。

赞 (0)

相关推荐

  • 使用jQuery中的wrap()函数操作HTML元素的教程

    wrap()函数用于在每个匹配元素外部包裹指定的HTML结构. 与该函数相对的是unwrap()函数,用于当前匹配元素的父元素(只移除父元素,其内部节点全部保留). 该函数属于jQuery对象(实例). 语法 jQueryObject.wrap( wrapper ) 参数 wrapper String/Element/jQuery/Function类型用于包裹匹配元素的节点. 如果参数wrapper为字符串,则将其视作jQuery选择器或html字符串,jQuery会自行判断. jQuery 1

  • jQuery中unwrap()方法用法实例

    本文实例讲述了jQuery中unwrap()方法用法.分享给大家供大家参考.具体分析如下: 此方法将移除匹配元素的父元素. 从方法的字面意思可以看出是清除wrap()方法的效果. 语法: 复制代码 代码如下: $(selector).unwrap() 实例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

  • jquery文档操作wrap()方法实例简述

    本文实例讲述了jquery文档操作wrap()方法.分享给大家供大家参考.具体实现方法如下: wrap()方法:是指用某个标签将某个元素包起来,即在外面多加一层标签. 复制代码 代码如下: <html> <head> <title>jquery文档操作:wrap()方法</title> <script type="text/javascript" src="jquery-1.8.2.min.js"><

  • jQuery中wrapInner()方法用法实例

    本文实例讲述了jQuery中wrapInner()方法用法.分享给大家供大家参考.具体分析如下: 此方法使用指定的HTML内容或元素将匹配的元素内容包裹起来. 语法一: 用指定的DOM元素去包裹匹配元素的内容. 复制代码 代码如下: $(selector).wrapInner(elem) 参数列表: 参数 描述 elem 用于包裹目标的DOM元素. 实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

  • 轻松掌握jQuery中wrap()与unwrap()函数的用法

    wrap() wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构.这种结构可以嵌套了好几层深,但应该只包含一个核心的元素.每个匹配的元素都会被这种结构包裹.该方法返回原始的元素集,以便之后使用链式方法. eg: //在当前页面内追加换行标签和指定的HTML内容 function w( html ){ document.body.innerHTML += "<br/>" + html; } var name = "Hello&qu

  • jQuery中wrapAll()方法用法实例

    本文实例讲述了jQuery中wrapAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法将所有匹配的元素用单个元素包裹起来. 此方法与wrap()方法虽然功能类似,但是有着很大区别.wrap()方法会把每一个匹配的元素都匹配一次. 语法一: 用指定的DOM元素去包裹匹配元素. 复制代码 代码如下: $(selector).wrapAll(elem) 参数列表: 参数 描述 elem 用于包裹目标的DOM元素. 实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC

  • 浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的. 可是,W3School的解释是这样的: jQuery 文档操作 - wrap() 方法 wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中. jQuery 文档操作 - wrapAll() 方法 wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素. jQuery 文

  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    jquery.each 方法 方法一 $("img").each(function(i,elem){ // i 下标 从零开始, // elem == this // $(elem).toggleClass("example"); $(this).toggleClass("example"); }); 方法二 $.each([1,2,3,4],function(){ //$(this)==数组中的每一个数组(如果数组是对象,就是对象) }); 方

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

  • 浅谈jQuery中事情的动态绑定

    在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等.在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中.今天这篇文章中,我们将要介绍如何使用bind(),on(),live()和delegate()方法来绑定特定的事件,什么情况下使用,什么情况下不适用它们.希望能够帮助大家更好的了解和使用jQuery的时间处理方法. 一.bind()方法 使用较早版本jQuery的教程或者应用中,我们往往使用bind()方法来将事件绑定到特定的

  • 浅谈Jquery中Ajax异步请求中的async参数的作用

    之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi

  • 浅谈jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque

  • 浅谈jQuery中Ajax事件beforesend及各参数含义

    Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定.这个跟click/mousedown/keyup等事件类似.但他

  • 浅谈jquery中next与siblings的区别

    siblings([expr]): 概述   取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合. [expr] :可以用可选的表达式进行筛选.用于筛选同辈元素的表达式 示例 找到每个div的所有同辈元素. HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div

  • 浅谈jQuery中的checkbox问题

    一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script t

  • 浅谈jQuery中ajaxPrefilter的应用

    jQuery的定义了一个ajax过滤器ajaxPrefilter,通过该过滤器可以过滤通过jQuery相应的ajax函数发送的ajax请求. 在项目中,很多地方存在指定开始时间.结束时间来获取该时间区间内某些值随时间变化的过程线的需求,我们可以定义一个通用的ajaxPrefilter来过滤所有ajax请求,当开始时间超过结束时间的时候,便将该ajax请求abort. $.ajaxPrefilter(function (options, originalOptions, jqXHR) { //tm

随机推荐