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

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

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

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

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

查看: 3555|回复: 2

[Jquery] jQuery文档处理之内部插入用法讲解大全

[复制链接]
发表于 2018-3-21 22:39:42 | 显示全部楼层 |阅读模式
jQuery文档处理之内部插入用法讲解大全



       jQuery的 文档处理 ,顾名思义,就是动态的处理页面的html内容,一般我会经常会碰见的,就是给页面的某一个特定的地方,替换html,增加html,或者删减部分html。
      本次主要了解,jQuery文档处理 中的 内部插入 的部分内容。

jQuery文档处理的内容插入 主要有如下的4种:

[C#] 纯文本查看 复制代码
1. append(content|fn)  向每个匹配的元素内部追加内容。
2. appendTo(content)  把所有匹配的元素追加到另一个指定的元素元素集合中。
3. prepend(content|fn)  向每个匹配的元素内部前置内容。
4. prependTo(content)  把所有匹配的元素前置到另一个、指定的元素元素集合中。


下面就逐个进行讲解
1. append(content|fn)

       向每个匹配的元素内部追加内容。
content: 要追加到目标中的内容

jQuery代码:
[HTML] 纯文本查看 复制代码
$("p").append("<b>Hello</b>")


返回结果:
[JavaScript] 纯文本查看 复制代码
[ <p>I would like to say: <b>Hello</b></p> ]


附件html代码:
[HTML] 纯文本查看 复制代码
<p>I would like to say: </p>


可以通过下图,详细查看执行后的效果
1.png


备注: 上述可以看出, append 为向当前匹配元素的html后面,增加部分内容


2. appendTo(content)  

把所有匹配的元素追加到另一个指定的元素元素集合中。
注:使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("p").appendTo("div");


返回结果:
[JavaScript] 纯文本查看 复制代码
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>


附件HTML代码:
[HTML] 纯文本查看 复制代码
<p>I would like to say: </p>
<div></div><div></div>


备注详解:
从以上内容可看出,是把所有的 p 元素内容,添加的div中   
即: appendTo   括号里面的是被指定,需要添加内容的元素


3. prepend(content|fn)  

向每个匹配的元素内部前置内容。

jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("p").prepend("<b>Hello</b>")


输出结果:
[JavaScript] 纯文本查看 复制代码
[ <p><b>Hello</b>I would like to say: </p> ]


附件html代码:
[HTML] 纯文本查看 复制代码
<p>I would like to say: </p>


备注:
从字面上就可以看出,jQuery 中的pre 基本上都是前的意思,所有从上述内容中可以看出,  prepend 就是在匹配元素的html内容之前,添加部分内容
输出的结果如下图所示:
2.png


4. prependTo(content)  

把所有匹配的元素前置到另一个、指定的元素元素集合中。


jQuery代码:
[HTML] 纯文本查看 复制代码
$("p").prependTo("#foo");


输出结果:
[JavaScript] 纯文本查看 复制代码
<div id="foo"><p>I would like to say: </p></div>


附件html代码:
[HTML] 纯文本查看 复制代码
<p>I would like to say: </p><div id="foo"></div>


备注:
从上述实例可以看出, 是 把p元素的内容,添加到id为foo的元素中,作为id为foo的html内容





1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
发表于 2018-3-22 09:04:36 | 显示全部楼层
强烈支持楼主ing……
 楼主| 发表于 2018-3-22 22:22:04 | 显示全部楼层
谢谢老大支持
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

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

GMT+8, 2024-11-8 17:37

© 2014-2021

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