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 框架 三. ...
随机推荐
- C#—Nhibernate使用教程
本篇文章,让我们一起来探索Nhibernate.首先我们去搜索Nhibernate下载地址,如下链接所示.该版本可能是最新版,我下载的4.0.4.GA.其中GA意思我没搞清楚.不过应该不重要.http ...
- C++笔记（4）——引用及结构体
引用 C++中有一个很方便的语法叫做引用,作用就是使得函数能够对传入的参数作出全局有效的改动.用法很简单,就是在传入参数的类型后面加上&就可以指明传入的参数是引用. 例子: #include ...
- JS使用 popstate 事件监听物理返回键
pushHistory(); window.addEventListener("popstate", function (e) { if (or ...
- git --> 工作使用流程
[git]------git开发过程中的使用流程------[WangQi] 001.创建仓库 002.新建项目 003.初始化仓库 这一步不需要做 git init : 文件夹中会多出一个隐藏 ...
- JavaWeb servlet,乱码的原因和解决
请求为什么会有乱码? 答:当表单提交时,浏览器对中文参数值进行编码(使用打开表单所在的页面时的字符集进行编码,web服务器在默认情况下会使用iso-8859-1去解码,编码和解码方式不一致,就会产生乱 ...
- node基本介绍及使用
1.什么是node 简单的说node.js就是运行在服务端的JavaScript 官网地址:http://nodejs.cn/ 2.node安装 2.1下载node node下载:https://no ...
- python 二维数组转一维数组
三种方法 比如 a = [[1, 2], [3, 4], [5, 6]] 列表推导式 [i for j in a for i in j] 库函数 from itertools import chain ...
- TimeUnit类 java.util.concurrent.TimeUnit
TimeUnit是什么? TimeUnit是java.util.concurrent包下面的一个类,表示给定单元粒度的时间段 主要作用 时间颗粒度转换 延时 常用的颗粒度 TimeUnit.DAYS ...
- 深入ArrayList看fast-fail机制
fail-fast机制简介 什么是fail-fast fail-fast 机制是java集合(Collection)中的一种错误机制.它只能被用来检测错误,因为JDK并不保证fail-fast机制一定 ...
- 第一个chrome extension
如今,chrome浏览器的使用如越来越流行,chrome extension往往能提供更多很丰富的功能.以前一直想了解这方面的东西,可是又担心很复杂.前段时间,在斗鱼看一个直播,想刷弹幕,但是每次自己 ...