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 框架三. ...

随机推荐

log4j配置参数详解——按日志文件大小、日期切分日志文件
项目中尽管对log4j有基本的配置,例如按天生成日志文件以作区分,但如果系统日志文件过大,则就需要考虑以更小的单位切分或者其他切分方式.下面就总结一下log4j常用的配置参数以及切分日志的不同方式. ...
16/7/7_PHP-方法重载
PHP中的重载指的是动态的创建属性与方法,是通过魔术方法来实现的.属性的重载通过__set,__get,__isset,__unset来分别实现对不存在属性的赋值.读取.判断属性是否设置.销毁属性. ...
Jenkins---简单认识
老生常谈:知其然更要知其所以然,所以补充一下Jenkins的相关知识官方文档:https://jenkins.io/zh/doc/ 问题1:Jenkins是什么? 1.1.Jenkins是一个开源的 ...
git_03_git可视化工具github Desktop使用教程
前言 github desktop是github的桌面客户端,支持Windows和Mac OS版本.使用简单,可以查看.切换和创建分支,以及提交.合并或部署代码. 下载由于电脑限制,这里以mac o ...
什么是HIS、PACS、LIS、RIS
什么是HIS?医院信息系统的定义(HIS)医院信息系统(Hospital Information System,HIS)在国际学术界已公认为新兴的医学信息学(Medical Informatics)的 ...
第七周实验报告&课程总结
一.完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负数号票的情况. 代码: public cla ...
HDU 6468 /// DFS
题目大意: 把 1~15 的数字典序排序后为 1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9 此时给定 n k, 求1~n的数组字典序排序后第k个 ...
ofbiz idea 启动
1.下载gradle并安装到本地 2.idea引入gradle 3.gradle右键选择refresh,项目会重新编译并加载gradle的task 4.可以再编译一下 5.没问题的话打开,jar ap ...
FFmpeg从入门到出家（FLV文件结构解析）
FLV(FLASH VIDEO),是一种常用的文件封装格式,目前国内外大部分视频分享网站都是采用的这种格式.其标准定义为<Adobe Flash Video File Format Specif ...
信号量Semaphore实现原理
Semaphore用于管理信号量,在并发编程中,可以控制返访问同步代码的线程数量.Semaphore在实例化时传入一个int值,也就是指明信号数量.主要方法有两个:acquire()和release( ...