jQuery入门教程-文档操作方法
一、append()和appendTo()
1.1 append()方法
<body>
<p>好好学习</p>
<button>append() 方法</button>
</body>
<script>
$('button').click(function() {
$('p').append('<p>天天向上</p>');
});
</script>
1.2 appendTo()方法
<body>
<p>好好学习</p>
<button>appendTo() 方法</button>
</body>
<script>
$('button').click(function() {
$('<p>天天向上</p>').appendTo('p');
});
</script>
1.3 append()和appendTo()比较
（1）用法相同
在被选元素的结尾（仍然在内部）插入指定内容。
（2）不同之处
内容和选择器的位置不同，以及 append() 能够使用函数来附加内容。
二、html()方法
2.1 返回元素内容
当使用该方法返回一个值时，它会返回第一个匹配元素的内容 (inner HTML)。
<body>
<p>好好学习</p>
<button>返回被选元素的内容</button>
</body>
<script>
$('button').click(function() {
alert($('p').html());
});
</script>
2.2 设置元素内容
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容 (inner HTML)。
<body>
<p>好好学习</p>
<button>设置被选元素的内容</button>
</body>
<script>
$('button').click(function() {
$('p').html('天天向上');
});
</script>
2.3 使用函数来设置元素内容
（1）语法
$(selector).html(function(index,oldcontent))
（2）参数
| 参数 | 描述 |
|---|---|
| function(index,oldcontent) | 规定一个返回被选元素的新内容的函数。index - 可选。接收选择器的 index 位置。oldcontent - 可选。接收选择器的当前内容。 |
（3）示例
<body>
<p>好好学习</p>
<p>天天向上</p>
<button>设置被选元素的内容</button>
</body>
<script>
$('button').click(function() {
$('p').html(function (n) {
return '这个 p 元素的 index 是' + ' ' + n;
});
});
</script>
三、append()、appendTo()和html()的区别
（1）append()和appendTo()方法是在被选元素的结尾（仍然在内部）插入内容，是在原有内容的基础上增加。
（2）html()方法是覆盖所有内容，是原有的内容被替换。
jQuery入门教程-文档操作方法的更多相关文章
- javaweb 开发所需工具和入门教程文档等
下载网址 1.JDK1.8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...
- jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- jQuery的文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- jQuery文档操作方法对比和src写法
jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Jq_文档操作方法、属性操作方法、CSS操作函数
JQuery文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() ...
- dot.js教程文档api
dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...
- ABP 教程文档 1-1 手把手引进门之 ASP.NET Core & Entity Framework Core（官方教程翻译版 版本3.2.5）
本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 官方文档分四部分 一. 教程文档 二.ABP 框架 三.zero 模块 四.其他(中文翻译资源) 本篇是第一部分的第一篇. 第一部分分三篇 1- ...
- ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework（官方教程翻译版 版本3.2.5）含学习资料
本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/ 谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...
随机推荐
- json 格式
Json格式规则:(Douglas Crockford提出的) 1) 并列的数据之间用逗号(“,”)分隔. 2) 映射用冒号(“:”)表示. 3) 并列数据的集合(数组)用方括号("[]&q ...
- pycharm运行时出现‘no module named 'requests'’
参考文章:https://www.jianshu.com/p/f7c808365a9e 出现无requests的包的错误--->找包中是否有requests 1.从files下拉框中点击sett ...
- CEPH集群搭建（CentOS 7）
以包含四个节点的集群为例,其中包括一个 ceph-deploy 管理节点和一个三节点的Ceph存储集群. 下图中每个节点代表一台机器. 创建一个 Ceph 存储集群,它有一个 Monitor 和两个 ...
- jmeter _Random函数生成随机数
因对发送邮件接口做压测发现相同数据对服务器的压力很小所以需要每次发送请求都需要不同的参数,所以要对某个字段做随机数 选项中-函数助手对话框
- 在VS Code中使用Jupyter Notebook
一.安装配置 1.在扩展商店中安装官方的Python扩展包 2.系统已经安装了Jupyter Notebook 由于系统上的Python环境是用Anaconda安装的,已经有Jupyter Noteb ...
- g50打开无线设置 fn+f7
- ajax 的post方法 的content-type设置和express里应用body-parser
ajax的post方法相比get方法,在传参形式上很不一样, get把参数用'?'拼接在端口后,并且用'&'连接;而post则是需要在send参数里设置. 根据ajax实例xhr.setReq ...
- ES6精解：变量的解构赋值
1.数组的解构赋值 我们知道以前我们给一个变量赋值要这样如下: let a = 1; let b = 2; let c = 3; 但是ES6出来之后,我们可以这样: let [a, b, c] = [ ...
- java操作mongodb工具类
新建maven项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...
- qemu-kvm使用
创建镜像qemu-img create -f qcow2 test-vm.qcow2 10g 修改镜像大小qemu-img resize test-vm.qcow2 +10G 安装系统 qem ...