一:html()

html()函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容

该函数的用途相当于设置或获取DOM元素的innerHTML属性值。

该函数属于jQuery对象(实例)。

语法

jQueryObject.html( [ htmlString ] )

参数

参数 描述
htmlString 可选/String/Function类型用于设置的html字符串。

如果没有指定htmlString参数,则表示获取第一个匹配元素的html内容;如果指定了htmlString参数,则表示设置所有匹配元素的html内容。

jQuery 1.4 新增支持:参数htmlString可以为函数。html()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。

html()还会为函数传入两个参数:第一个参数就是该元素在匹配元素中的索引,第二个参数就是该元素当前的html内容。函数的返回值就是需要为该元素设置的html内容。

如果参数htmlString不是字符串或函数类型,则会被转换为字符串类型( toString() )。如果参数为nullundefined,则将其视作空字符串("")。

返回值

html()函数的返回值是String/jQuery类型,返回值的实际类型取决于html()函数所执行的操作。

如果html()函数执行的是设置操作,将返回当前jQuery对象本身。如果执行的是获取操作,将返回第一个匹配元素的html内容,该值为字符串类型。

示例&说明

以下面这段HTML代码为例:

<div id="n1">    <p id="n2">Hello</p>    <p id="n3">        CodePlayer        <span id="n4">专注于编程开发技术分享</span>        <span id="n5"></span>    </p></div>

我们编写如下jQuery代码:

var $n2 = $("#n2");alert( $n2.html() ); // Hello// 设置n2的html内容$n2.html( '<strong>Hello World</strong>' );

var $n3 = $("#n3");alert( $n3.html() );/*CodePlayer<span id="n4">专注于编程开发技术分享</span><span id="n5"></span>*/

// 清空所有span元素的html内容(将html内容设为"")$("span").html( "" );

// 将所有p元素的html内容改为"第<em>N</em>个p元素,id为this.id"// 这里的N表示该元素在所有匹配元素中的序号(1、2、3……)// this.id是该元素的id属性值$("p").html( function(index, currentHtml){    // 函数内的this指向当前迭代的p元素    return "第<em>" + (index + 1) + "</em>个p元素,id为" + this.id;   });

二:text()

text()函数用于设置或返回当前jQuery对象所匹配的DOM元素内的text内容

所谓text内容,就是在该元素的html内容(即innerHTML属性值)的基础上过滤掉所有HTML标记后的文本内容(即IE浏览器的DOM元素特有的innerText属性值)。

如果jQuery对象匹配的元素不止一个,则text()返回合并了每个匹配元素(包含其后代元素)中的文本内容后的字符串。

该函数属于jQuery对象(实例)。

语法

jQueryObject.text( [ textString ] )

参数

参数 描述
textString 可选/String/Function类型用于设置的text字符串。

如果没有指定textString参数,则表示获取合并了每一个匹配元素中的内容后的text内容;如果指定了textString参数,则表示设置所有匹配元素的text内容。

jQuery 1.4 新增支持:参数textString可以为函数。text()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。

text()还会为函数传入两个参数:第一个参数就是该元素在匹配元素中的索引,第二个参数就是该元素当前的text内容。函数的返回值就是需要为该元素设置的text内容。

如果参数textString不是字符串或函数类型,则会被转换为字符串类型( toString() )。如果参数为nullundefined,则将其视作空字符串("")。

返回值

text()函数的返回值是String/jQuery类型,返回值的实际类型取决于text()函数所执行的操作。

如果text()函数执行的是设置操作,将返回当前jQuery对象本身。如果执行的是获取操作,将返回合并了每一个匹配元素中的内容后的text内容,该值为字符串类型。

示例&说明

以下面这段text代码为例:

<div id="n1">    <p id="n2">Hello</p>    <p id="n3">        CodePlayer        <span id="n4">专注于编程开发技术分享</span>        <span id="n5"></span>    </p>    <ul>        <li>item1</li>        <li>item1</li>        <li>item1</li>    </ul></div>

我们编写如下jQuery代码:

var $n2 = $("#n2");alert( $n2.text() ); // Hello// 设置n2的text内容$n2.text( "Hello World" );

alert($("p").text()); // 返回"Hello World\nCodePlayer\n专注于编程开发技术分享\n"// 由于不同浏览器的HTML解析器差异,返回的文本在换行符或其他空白字符方面也可能不同。

var $n3 = $("#n3");// 返回的是过滤掉HTML标记的文本内容alert( $n3.text() );/*CodePlayer专注于编程开发技术分享*/

var $n5 = $("#n5");// 虽然设置的内容中包含符合html标签的字符串,但是这些都会被当作文本内容看待,而不会被当作html内容来看待// 因此页面上将显示字符串"<strong>Hello World</strong>",而不是粗体的"Hello World"。// 这相当于$5.html( '&lt;strong&gt;Hello World&lt;/strong&gt;' );$n5.text( '<strong>Hello World</strong>' );alert( $n5.text() ); // <strong>Hello World</strong>

// 清空所有span元素的text内容(将text内容设为"")$("span").text( "" );

// 将所有li元素的text内容改为"第N个<li>元素"// 这里的N表示该元素在所有匹配元素中的序号(1、2、3……)$("li").text( function(index, currentText){    // 函数内的this指向当前迭代的li元素    return "第" + (index + 1) + "个<li>元素";   

jquery之html(),text()方法详解的更多相关文章

  1. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

  2. Jquery validate插件使用方法详解

    html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Reg.aspx.c ...

  3. jquery之remove(),detach()方法详解

    一:remove()方法 remove()函数用于从文档中移除匹配的元素. 你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素. 与detach()相比,remove ...

  4. jQuery.toggleClass() 和detach()方法详解

    一.toggleClass()函数: toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名.所谓"切换",就是如果该元素上已存在指定的类名 ...

  5. jquery之replaceAll(),replaceWith()方法详解

    一:replaceAll() replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素. 该函数属于jQuery对象(实例). 语法 jQuery 1.2 新增该函数. jQueryObj ...

  6. jquery中的each()方法详解

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  7. jQuery animate动画 stop()方法详解~

    一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...

  8. $.ajax()方法详解 jquery

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  9. jQuery中 $.ajax()方法详解

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

随机推荐

  1. 【py网页】urllib模块,urlopen

    Python urllib 库提供了一个从指定的 URL 地址获取网页数据,然后对其进行分析处理,获取想要的数据. 下面是在 Python Shell 里的 urllib 的使用情况: 01 Pyth ...

  2. 获取CPUID等

    unit CommonUnit; interface uses Windows, SysUtils, DateUtils; Const CPUVendorIDs: .. ] of string = ( ...

  3. Spring 复习笔记01

    Spring 框架 1. core:整个Spring框架构建在Core核心模块上,它是整个框架的的基础. 2. AOP:AOP模块提供了一个轻便但功能强大强大的AOP框架,让我们可以以AOP的形式增强 ...

  4. Python标准库之核心模块学习记录

    内建函数和异常 包括__builtin__模块和exceptions模块 操作系统接口模块 包括提供文件和进程处理功能的os模块,提供平台独立的文件名处理(分拆目录名,文件名,后缀等)的os.path ...

  5. mysql命令行操作

    显示数据库    show databases;当前数据库 select database(); 显示表    show tables;更改表名称    alter table 原表名 rename ...

  6. 战舰的STM32的SPI的逻辑分析仪设置

  7. JBuilder链接sql server数据库

    加载你的jdbc的驱动             一.将jdbc驱动解压到一个指定的目录,例如:c:\sql_server_jdbc,                其中包含三个驱动文件:msbase. ...

  8. Spring JDBC保存枚举对象含关键字报错原因之一

    报错信息: org.springframework.jdbc.UncategorizedSQLException: PreparedStatementCallback; uncategorized S ...

  9. VPS常用工具

    1.命令行工具 putty 在Mac下,可以直接使用超级终端 ssh username@ipaddress 2.可视化上传文件工具 WinSCP 在Mac下,使用 Cyberduck

  10. 【Pro ASP.NET MVC 3 Framework】.学习笔记.6.SportsStore:导航

    在之前的章节,偶们设置了核心的基础设施,现在我们将使用基础设计添加关键特性,你将会看到投资是如何回报的.我们能够很简单很容易地添加重要的面向客户的特性.沿途,你也会看到一些MVC框架提供的附加的特性. ...