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 框架 三. ...
随机推荐
- django基于odm,简单的post和get封装
- 浅谈数学上的矩阵——矩阵的乘法运算的概念及C++上的实现模板
首先让我们来谈一谈数学意义上的矩阵(在座各位也可以简单地将它理解为一个二维数组) 这样可以帮助我们理解矩阵加速及其运用的原理(矩阵加速是一个及其玄学的东西,所以请重点理解矩阵乘法) 这里给出一段严格 ...
- 20191105 《Spring5高级编程》笔记-第9章
第9章 事务管理 一些名词: 2PC(2 Phase Commit) XA协议 JTS(Java Transaction Service) JCA(Java EE Connector Architec ...
- C++学习笔记（五）--指针、NULL、引用
1. C++中已经定义了NULL为0:#define NULL 0 指针p可以指向空值NULL即 p = NULL;表示该指针变量不指向任何变量. 注意:指针未初始化与指针为NULL不同, p = N ...
- Maven 修改jdk版本
Maven 修改jdk版本方法1: <build> <plugins> <plugin> <groupId>org.apache.maven.plugi ...
- [2019杭电多校第八场][hdu6667]Roundgod and Milk Tea
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6667 题目大意是说n个班级,每个班级有ai人和bi杯茶,每个人只能喝其他班的茶并且只能喝一杯.问最多有 ...
- HNUSTOJ-1696 简单验证码识别(模拟)
1696: 简单验证码识别 时间限制: 2 Sec 内存限制: 128 MB 提交: 148 解决: 44 [提交][状态][讨论版] 题目描述 验证码是Web系统中一种防止暴力破解的重要手段.其 ...
- Kotlin学习（3）类
声明类和接口: //类 class A{ } //接口,接口中的方法可以有默认实现 interface B{ fun show(){ print("i'm B") } } //用冒 ...
- 生日蛋糕 (poj1190) (dfs剪枝)
[题目描述] 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, 高度为 ...
- 2019 Multi-University Training Contest 7 - 1006 - Snowy Smile - 线段树
http://acm.hdu.edu.cn/showproblem.php?pid=6638 偷学一波潘哥的二维离散化和线段树维护最大子段和. 思路是枚举上下边界,但是不需要从左到右用最大子段和dp. ...