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

wrap()

wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。
eg：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
  document.body.innerHTML += "<br/>" + html;
}

var name = "Hello";
function foo( a, b ){
  w( this.name );
  w( a + b );
}
 // 直接调用
foo( 1, 2 );
// Hello
// 3

var obj = { name: "CodePlayer", age: 18 };
var proxy = $.proxy( foo, obj, 5, 10 );
// 代理调用foo()函数，此时其内部的this指向对象obj
proxy();
// CodePlayer
// 15
运行代码

unwrap()
这个函数将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
eg：
用ID是"content"的div将每一个段落包裹起来

# HTML 代码:
<div>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</div>

# jQuery 代码:
 $("p").unwrap()

结果：

<p>Hello</p>
<p>cruel</p>
<p>World</p>
赞 (0)

相关推荐

  • 浅谈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中的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中wrapAll()方法用法实例

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

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

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

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

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

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

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

  • jQuery中常用动画效果函数(日常整理)

    jquery中动画效果非常多,下面小编给大家分享一下jquery中的动画函数. jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo(

  • jQuery中attr()与prop()函数用法实例详解(附用法区别)

    jQuery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.

  • jQuery中常用的遍历函数用法实例总结

    本文实例总结了jQuery中常用的遍历函数用法.分享给大家供大家参考.具体如下: 1. children()函数 children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回. 你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素. 用法示例如下: // 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.

  • jQuery中click事件的定义和用法

    本文实例讲述了jQuery中click事件的定义和用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. click()方法也可以绑定事件处理方法. 语法结构一: 触发click事件. 复制代码 代码如下: $(selector).click() 语法结构二: 为click事件绑定事件处理方法. 复制代码 代码如下: $(selector).click(data,function) 参数列表: 参数 描述 d

  • jQuery中even选择器的定义和用法

    本文实例讲述了jQuery中even选择器的定义和用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有索引值为偶数的元素,从0开始计数. 语法结构: 复制代码 代码如下: $(":even") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等. 例如: 复制代码 代码如下: $("li:even)").css("color","green") 以上代码是将li元素集合中索引为偶数的li中的字体颜色设置

  • Python中dictionary items()系列函数的用法实例

    本文实例讲述了Python中dictionary items()系列函数的用法,对Python程序设计有很好的参考借鉴价值.具体分析如下: 先来看一个示例: import html # available only in Python 3.x def make_elements(name, value, **attrs): keyvals = [' %s="%s"' % item for item in attrs.items()] attr_str = ''.join(keyvals

  • Linux 中C语言getcwd()函数的用法

    Linux 中C语言getcwd()函数的用法 先来看该函数的声明: #include<unistd.h> char *getcwd(char *buf,size_t size); 介绍: 参数说明:getcwd()会将当前工作目录的绝对路径复制到参数buffer所指的内存空间中,参数size为buf的空间大小. 普通的用法会是这样: #define MAX_SIZE 255 char path(MAX_SIZE); getcwd(path,sizeof(path)); puts(path);

  • jquery中show()、hide()和toggle()用法实例

    本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc

随机推荐