一: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. RobotFrameWork接口报文测试-----(一)简单demo的实现

    最近几个月的工作任务都是通过使用RF工具来搭建服务器端接口的自动化测试,使用python作为2次开发的语言,也是第一次去做这种项目,经验善浅,还是很有可能会走很多的弯路,为此,我希望自己能把每个阶段的 ...

  2. 【sinatra】安装测试

    $ gem install sinatra 测试: $ subl app.rb app.rb内容: require 'sinatra' get '/' do "Hello, World!&q ...

  3. 【py分析网页】可能有用的-re去除网页上的杂碎

    def remove_js_css (content): """ remove the the javascript and the stylesheet and the ...

  4. ASP.NET MVC5 新特性:Attribute路由使用详解 (转载)

    1.什么是Attribute路由?怎么样启用Attribute路由? 微软在 ASP.NET MVC5 中引入了一种新型路由:Attribute路由,顾名思义,Attribute路由是通过Attrib ...

  5. 怎样查出SQLServer的性能瓶颈

    怎样查出SQLServer的性能瓶颈 --王成辉翻译整理,转贴请注明出自微软BI开拓者[url]www.windbi.com[/url]--原帖地址 如果你曾经做了很长时间的DBA,那么你会了解到SQ ...

  6. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  7. 装多系统删除某个系统后,如何恢复ubuntu引导

    在重装系统或者再装多个系统后可能会出现ubuntu的引导文件不存在的情况,windows系列的引导文件可以用winpe修复,但是ubuntu就不可以,虽然网上很多种修复ubuntu的引导文件 方式,但 ...

  8. 身为运维工程师怎么用Nginx部署DokuWiki

    运维人员按区域组织,人员分散,集中培训成本比较高: 新入职运维人员除了培训手册,没有其它渠道可以持续深入了解公司产品: 运维人员的知识存在各自脑袋里,缺少有效的渠道来传播和分享: 运维知识体系需要积累 ...

  9. OC基础数据类型-NSData

    1.NSData,数据,当我们需要把一些信息写入到文件里或发送到网络上,我们需要把这些数据转换下,变成纯粹的0.1字符流 1 NSString * str = @"hello, world! ...

  10. POJ 3349:Snowflake Snow Snowflakes(数的Hash)

    http://poj.org/problem?id=3349 Snowflake Snow Snowflakes Time Limit: 4000MS   Memory Limit: 65536K T ...