轻松掌握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>
相关推荐
-
jquery文档操作wrap()方法实例简述
本文实例讲述了jquery文档操作wrap()方法.分享给大家供大家参考.具体实现方法如下: wrap()方法:是指用某个标签将某个元素包起来,即在外面多加一层标签. 复制代码 代码如下: <html> <head> <title>jquery文档操作:wrap()方法</title> <script type="text/javascript" src="jquery-1.8.2.min.js"><
-
jQuery中wrapAll()方法用法实例
本文实例讲述了jQuery中wrapAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法将所有匹配的元素用单个元素包裹起来. 此方法与wrap()方法虽然功能类似,但是有着很大区别.wrap()方法会把每一个匹配的元素都匹配一次. 语法一: 用指定的DOM元素去包裹匹配元素. 复制代码 代码如下: $(selector).wrapAll(elem) 参数列表: 参数 描述 elem 用于包裹目标的DOM元素. 实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC
-
使用jQuery中的wrap()函数操作HTML元素的教程
wrap()函数用于在每个匹配元素外部包裹指定的HTML结构. 与该函数相对的是unwrap()函数,用于当前匹配元素的父元素(只移除父元素,其内部节点全部保留). 该函数属于jQuery对象(实例). 语法 jQueryObject.wrap( wrapper ) 参数 wrapper String/Element/jQuery/Function类型用于包裹匹配元素的节点. 如果参数wrapper为字符串,则将其视作jQuery选择器或html字符串,jQuery会自行判断. jQuery 1
-
jQuery中wrapInner()方法用法实例
本文实例讲述了jQuery中wrapInner()方法用法.分享给大家供大家参考.具体分析如下: 此方法使用指定的HTML内容或元素将匹配的元素内容包裹起来. 语法一: 用指定的DOM元素去包裹匹配元素的内容. 复制代码 代码如下: $(selector).wrapInner(elem) 参数列表: 参数 描述 elem 用于包裹目标的DOM元素. 实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
-
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的. 可是,W3School的解释是这样的: jQuery 文档操作 - wrap() 方法 wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中. jQuery 文档操作 - wrapAll() 方法 wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素. jQuery 文
-
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()与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()方法 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
随机推荐
- 深入理解JavaScript的React框架的原理
- ASP.NET Core配置教程之读取配置信息
- 详解php中serialize()和unserialize()函数
- 概述IE和SQL2k开发一个XML聊天程序
- jQuery 判断是否包含在数组中Array[]的方法
- js/jquery判断浏览器类型的方法小结
- vue-resource 拦截器使用详解
- 魔鬼字典 JavaScript 笔记 代码比较多乱第1/3页
- canvas实现弧形可拖动进度条效果
- JS中数组Array的用法示例介绍
- php实现数组中索引关联数据转换成json对象的方法
- 深入PHP操作MongoDB的技术总结
- C C++ 算法实例大全
- JavaScript中把数字转换为字符串的程序代码
- Android基于RecyclerView实现高亮搜索列表
- java List循环与Map循环的总结
- ORACLE 10G修改字符编码没有超字符集的限制
- WinForm的延时加载控件概述
- 探讨数组与字符串输入的问题(C++版)
- 微信小程序实现添加手机联系人功能示例