http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 4299|回复: 3

[Jquery] jQuery文档处理中包裹部分内容解析大全

[复制链接]
发表于 2018-3-27 22:11:15 | 显示全部楼层 |阅读模式
jQuery文档处理中包裹部分内容解析大全



包裹,根据字面意思就可以看出,是用一个元素,将其他元素包起来,作为这个元素的子元素处理。
本节主要讲解jQuery文档处理中,包裹的所有方法以及方法的使用方式。

jQuery文档处理中包裹主要有如下几种

[C#] 纯文本查看 复制代码
1. wrap(html|ele|fn)  把所有匹配的元素用其他元素的结构化标记包裹起来。
2. unwrap()  把所有匹配的元素移出元素的父元素。
3. wrapAll(html|ele)  将所有匹配的元素用单个元素包裹起来。
4. wrapInner(html|ele|fn)  将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。


1. wrap(html|ele|fn)  

把所有匹配的元素用其他元素的结构化标记包裹起来。
使用方法如下: $(a).wrap('html')  将所有匹配的a元素,用html包裹起来,即作为html的子元素


实例
jQuery代码:
[JavaScript] 纯文本查看 复制代码
$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

输出结果:
[HTML] 纯文本查看 复制代码
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

附件html:
[HTML] 纯文本查看 复制代码
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

备注:
从上例可以看出,实现了如下内容:
用原先div的内容作为新div的class,并将每一个元素包裹起来
即: 将所有的获取到的样式为inner的div作为子元素,在其外面包裹以该元素text为样式的div

从上例中可以看出, warp()方法,是将匹配到的元素,用括号内的内容给包裹起来

2. unwrap()  

把所有匹配的元素移出元素的父元素。

实例
jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("p").unwrap()

输出结果:
[HTML] 纯文本查看 复制代码
<p>Hello</p>
    <p>cruel</p>
    <p>World</p>

附件HTML代码:
[HTML] 纯文本查看 复制代码
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>

备注:
从上例中看出,unwrap() 是将获取到的元素,从其父元素中移出来。

3. wrapAll(html|ele)  

将所有匹配的元素用单个元素包裹起来。

实例
jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("p").wrapAll("<div></div>")

输出结果:
[HTML] 纯文本查看 复制代码
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>

<div>ceshi</div>

附件html:
[HTML] 纯文本查看 复制代码
<p>Hello</p>
<p>cruel</p>
<div>ceshi</div>
<p>World</p>

备注
wrapAll() 是将所有获取到的匹配的元素,使用一个元素将其包裹起来,作为该元素的子元素
从上例中可以看出, 在使用此方法时,会将页面的排序打乱,将原有的同级的html内容'<div>ceshi</div>' 从同级变成了p元素的上一级元素

4. wrapInner(html|ele|fn)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。


实例
    用原先div的内容作为新div的class,并将每一个元素包裹起来
jQuery代码:
[JavaScript] 纯文本查看 复制代码
$('.inner').wrapInner(function() {
  return '<div class="' + $(this).text() + '" />';
})

输出结果:
[HTML] 纯文本查看 复制代码
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

附件html:
[HTML] 纯文本查看 复制代码
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>


备注

从以上详解中可以看出:
1. wrap()  将匹配到A1、A2、A3元素,用一个B元素将其一个一个的包裹起来
2. unwrap()  将匹配到的A元素,从其父元素中移出来
3. wrapAll() 将匹配到A1、A2、A3元素,用一个B元素将A1、A2、A3做为B元素的子元素(且A1、A2、A3同为B元素的兄弟子元素)给包裹起来
4. wrapInner() 将匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来




1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
发表于 2018-3-29 16:02:34 | 显示全部楼层
我只是路过打酱油的。
 楼主| 发表于 2018-4-3 22:23:22 | 显示全部楼层
谢老大支持,努力ing
发表于 2018-11-21 18:08:54 | 显示全部楼层
这个不错 学习中 赞一个 强烈支持楼主ing……
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 18:03

© 2014-2021

快速回复 返回顶部 返回列表