jquery之html(),text()方法详解
一: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() )。如果参数为null
或undefined
,则将其视作空字符串("")。
返回值
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() )。如果参数为null
或undefined
,则将其视作空字符串("")。
返回值
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( '<strong>Hello World</strong>' );$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()方法详解的更多相关文章
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
- Jquery validate插件使用方法详解
html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Reg.aspx.c ...
- jquery之remove(),detach()方法详解
一:remove()方法 remove()函数用于从文档中移除匹配的元素. 你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素. 与detach()相比,remove ...
- jQuery.toggleClass() 和detach()方法详解
一.toggleClass()函数: toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名.所谓"切换",就是如果该元素上已存在指定的类名 ...
- jquery之replaceAll(),replaceWith()方法详解
一:replaceAll() replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素. 该函数属于jQuery对象(实例). 语法 jQuery 1.2 新增该函数. jQueryObj ...
- jquery中的each()方法详解
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...
- jQuery animate动画 stop()方法详解~
一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...
- $.ajax()方法详解 jquery
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- jQuery中 $.ajax()方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
随机推荐
- 【py网页】urllib模块,urlopen
Python urllib 库提供了一个从指定的 URL 地址获取网页数据,然后对其进行分析处理,获取想要的数据. 下面是在 Python Shell 里的 urllib 的使用情况: 01 Pyth ...
- 获取CPUID等
unit CommonUnit; interface uses Windows, SysUtils, DateUtils; Const CPUVendorIDs: .. ] of string = ( ...
- Spring 复习笔记01
Spring 框架 1. core:整个Spring框架构建在Core核心模块上,它是整个框架的的基础. 2. AOP:AOP模块提供了一个轻便但功能强大强大的AOP框架,让我们可以以AOP的形式增强 ...
- Python标准库之核心模块学习记录
内建函数和异常 包括__builtin__模块和exceptions模块 操作系统接口模块 包括提供文件和进程处理功能的os模块,提供平台独立的文件名处理(分拆目录名,文件名,后缀等)的os.path ...
- mysql命令行操作
显示数据库 show databases;当前数据库 select database(); 显示表 show tables;更改表名称 alter table 原表名 rename ...
- 战舰的STM32的SPI的逻辑分析仪设置
- JBuilder链接sql server数据库
加载你的jdbc的驱动 一.将jdbc驱动解压到一个指定的目录,例如:c:\sql_server_jdbc, 其中包含三个驱动文件:msbase. ...
- Spring JDBC保存枚举对象含关键字报错原因之一
报错信息: org.springframework.jdbc.UncategorizedSQLException: PreparedStatementCallback; uncategorized S ...
- VPS常用工具
1.命令行工具 putty 在Mac下,可以直接使用超级终端 ssh username@ipaddress 2.可视化上传文件工具 WinSCP 在Mac下,使用 Cyberduck
- 【Pro ASP.NET MVC 3 Framework】.学习笔记.6.SportsStore:导航
在之前的章节,偶们设置了核心的基础设施,现在我们将使用基础设计添加关键特性,你将会看到投资是如何回报的.我们能够很简单很容易地添加重要的面向客户的特性.沿途,你也会看到一些MVC框架提供的附加的特性. ...