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 ...
随机推荐
- Delphi 线程同步技术(转)
上次跟大家分享了线程的标准代码,其实在线程的使用中最重要的是线程的同步问题,如果你在使用线程后,发现你的界面经常被卡死,或者无法显示出来,显示混乱,你的使用的变量值老是不按预想的变化,结果往往出乎意料 ...
- TI BLE CC2541的I2C主模式
由于要写TM1680, 写命令跟写数据, 所以需要使用CC2541的I2C, 2541是有硬件I2C的. tm1680.c: #include "tm1680.h" //TM168 ...
- PHP过滤评论关键词
<?php /** * PHP中屏蔽过滤指定关键字实现方法总结 * http://www.111cn.net/phper/phpanqn/46225.htm * * 思路: * 一.把关键字专门 ...
- PHP给图片加文字(水印)
准备工作: 代码: <?php header("Content-type: image/jpeg"); //浏览器输出,如不需要可去掉此行 $im = @imagecreat ...
- git 上传本地文件到github
git 上传本地文件到github 1 git config --global user.name "Your Real Name" 2 git config --global u ...
- 发送xml报文去第三方请求获取xml报文数据
import java.io.*; import java.net.HttpURLConnection; import java.net.MalformedURLException; import j ...
- [ios][opengles]GLKit如何搭一个app的框架
一个外文对GLKit的讲解: Beginning OpenGL ES 2.0 with GLKit Part 1 英文原文链接:http://www.raywenderlich.com/5223 ...
- 关于基于webrtc的android-apk 和 webrtc-brows
这一段时间我在做一些关于基于webrtc应用的一些研究,做个一个android的demo,详情如下: 手机客户端: 基于webrtc的 android apk (webrtc 代码版本 R67 ...
- js中的各种获取日期
JS中获取当前时间点前一天时间 var date=new Date(); var dat_year=date.getYear(); var dat_month=date.getMonth(); var ...
- oracle驱动地址
D:\app\LHComputer\product\12.1.0\dbhome_1\ODP.NET\bin\2.x