jQuery的text()和html()讲解

最新推荐文章于 2021-11-20 10:49:56 发布
最新推荐文章于 2021-11-20 10:49:56 发布
阅读量1.9k 收藏 4
点赞数 2
分类专栏： js 文章标签： jQuery的text和html讲解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufeiayang/article/details/53344181
版权

text方法返回或者设置匹配元素的文本内容。

特别说明:

HTML内容就是内容中可以包含HTML标签，并且能够被浏览器渲染。
文本内容是先将内容中的HTML预定义字符转换成html字符实体，这样HTML标签就不会被渲染。

text()方的使用:

用法一:

此方法不带参数时候，功能是取得所有匹配元素的文本内容，并且结果是由所有匹配元素包含的文本内容组合起来的文本。

此方法与html()方法没有参数用法类似，但是还是有很大区别：

1.html()方法取得第一个匹配元素的内容，而text()方法是取得所有匹配元素包含的内容。
2.html()方法取得内容html内容，而text()方法取得是文本内容。

实例代码如下:

关于第一条：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>text()函数-脚本之家</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="f:/测试/js/jquery3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("div").html());
 })
})
</script>
</head>
<body>
<div>
<ul>
  <li>第一个div</li>
  </ul>
</div><div>
<ul>
  <li>第二个div</li>
  </ul>
</div><div>
<ul>
  <li>第三个div</li>
  </ul>
</div>
<button>点击查看效果</button>
</body>
</html>

此时输出结果为：

                                                               

当把html（）替换为text（）时结果为：

                                                            

下面测试第二条：


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>text()函数-脚本之家</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("div").text());
 })
})
</script>
</head>
<body>
<div>
<ul>
  <li>html专区</li>
  <li>DIV+CSS专区</li>
  <li>jquery专区</li>
</ul>
</div>
<button>点击查看效果</button>
</body>
</html>

以上代码可以弹出取得div中的所有文本内容。

结果： html专区
          DIV+CSS专区
          jquery专区

如果换成html（）

结果为：

<ul>
  <li>html专区</li>
  <li>DIV+CSS专区</li>
  <li>jquery专区</li>
</ul>

用法二:

带有参数的时候是设置所有匹配元素的文本内容。
此方法与html()方法带有参数的用法类似，但是还是有很大的区别：
text()方法设置的是匹配元素的文本内容，且会将HTML中的预留字符（如大于号（>））转换成html字符实体，以便于正确显示，而html()方法是设置匹配元素的html内容。

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>text()函数-脚本之家</title>
<style type="text/css">
div{ 
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").text("<span>是个内联元素");
    alert($("div").html())
  })
})
</script>
</head>
<body>
<div>原来的内容</div>
<button>点击查看效果</button>
</body>
</html>
结果：

实例代码三:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>text()函数-脚本之家</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
$("button").click(function(){
   $(".html").html("<b>好好学习</b>");
   $(".text").text("<b>好好学习</b>");    
})
})
</script>
</head>
<body>
<div class="html"></div>
<div class="text"></div>
<button>点击查看效果</button>
</body>
</html>

  1. .html()用为读取和修改元素的HTML标签
  2. .text()用来读取或修改元素的纯文本内容
  3. .val()用来读取或修改表单元素的value值。

这三个方法功能上的对比

  1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

淡水河桥
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 和text 区别,.text()与.html()区别
weixin_30294759的博客
06-11 3443
【前言】之前遇到过.html()与.text()区别的问题，今天再拿出来总结下【列表】(1).html()；(2).text();(3).val();【详解】(1).html();读取和修改元素的HTML标签，对应js中的innerHTML.html()是用来读取元素的HTML内容(包括其Html标签)注意：.html()方法使用在多个元素上时，只读取第一个元素方法内部使用的是DOM的innerH...
前端提高篇(八十四)：jQuery的文本属性：text()、html()、val()
安之ccy的博客
03-28 1931
1.text() 对应js中的innerText属性，jQuery中的text也可读可写 1.1 可读： <div id="test">hello</div> <button id="btn">btn</button> $('#btn').click(function(){ console.log ( $('#test').text()); }) 效果：点击一下btn按钮，控制台输出#test的文本 1.2 可写： 1.2.1 如果获取dom元素，
jquery里html()和text()的区别
m0_50569176的博客
09-17 1154
首先我们看看当不写参数时，他们各自的作用 <ul> <li>123</li> <li>dc</li> <li>sadcdsc</li> </ul> <script> console.log( $("li").html() ); console.log( $("li").text() ); .
JQuery ztree带筛选、异步加载实例讲解
01-19
本文实例分享了JQuery ztree带筛选、异步加载实例，供大家参考，具体内容如下 <html> < head> < base href=<%=basePath%>> <title>My JSP 'ztree.jsp' starting page</title> <link rel=stylesheet href=zTrees/css/zTreeStyle/zTreeStyle.css type=text/css> < script type=text/javascript src=zTrees/js/jquery-1.4.4.min.js>[removed] <
JQuery 图片的展开和伸缩实例讲解
12-10
代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title></title> <style type=”text/css”> #img1 { width:400px; height: 400px; border: solid 1px #ccc; display:none; } </style> [removed][removed] [removed] $(function () { $(‘#But
jQuery插件imgAreaSelect基础讲解
01-19
关于ImgAreaSelect,  是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等~~来具体看一下 1、先下载imgAreaSelect插件 下载地址： 英文：http://odyniec.net/projects/imgareaselect/ 中文：http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html 在头部引用： <link rel=stylesheet type=text/css href=../jquery.imgareaselec
jquery之html(),text()方法详解
weixin_33985507的博客
10-17 358
一：html() html()函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容。 该函数的用途相当于设置或获取DOM元素的innerHTML属性值。 该函数属于jQuery对象(实例)。 语法 jQueryObject.html( [ htmlString ] ) 参数 参数描述 htmlString 可选/String/Function类型用...
jQuery中的text()、html()、val()的用法和区别
旭东怪的博客
04-28 713
1、text() 作用： （1）无参数时返回被选元素的文本内容，文本内容不包括html标签。 （2）有参数时设置被选元素的文本内容，文本内容不包括html标签。 注：text()针对input、button标签无效 测试代码： <body> <div id="div1">div有文本内容</div> <div id="div2...
jQuery的属性与样式之html()及.text()
aoer2500的博客
03-24 231
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text() .html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法： .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容 .html( htmlString ) 设置...
jquery之html、text
weixin_43051270的博客
05-21 90
1.jquery 之 html 操作dom节点，使用html() 取值 或 赋值 取值： 原始值；类型是字符串 typeof $('ul').html() //类型是 string html方法示例： <ul> <li>1</li> <li>2</li> <li>3&...
jquery调整表格行tr上下顺序实例讲解
11-27
表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能，分享给大家供大家参考，具体内容如下 代码实例如下: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css" > table { background:#F90; width:400px; line-height:20px; } td { border-r
JQuery实现级联下拉框效果实例讲解
11-22
用JQuery和select来实现汽车厂商和汽车类型的联动，参考过程如下 效果图：      逻辑分析图： html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset
jQuery: .text() . .html() 和 .val() 区别
m0_51491785的博客
11-20 815
jQuery你是否真的清除.text() .html()和val()方法的用处和解释吗？
jquery text()和html()
王星乐的博客
12-10 832
原文链接： 在用Jquery修改HTML文件中某个部分的内容时，text()和html()是两个最常用的方法 例如下面的例子： $("#aaa").text("haha")  $("#bbb").html("哈哈")  我们经常会使用上面的两个方法来修某个ID节点的内容. 但是如果我们的内容里面有html元素的话.比如 "hahaxixi" 这个时候如果你使用text()的话.
jQuery--内容操作（html()、text()、val()）详解
吴声子夜歌的博客
10-01 1717
样式操作 在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改。 1. html()方法： html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能...
jQuery的text()方法与html()方法比较
谈谈IT
02-15 691
jQuery中对文本内容有text()、html()以及val()方法。对input和textarea元素，使用val()方法获取和设置文本内容。对其它元素，可以使用text方法获取文本，html获取节点内的html内容。以下主要比较text和html方法。 使用text()方法获取文本 将符合条件的所有元素以及它们的子元素的文本内容用空格或换行符拼接起来。这里有四个点： 会对所有符合条件的j...
jQuery的html()和text()[0504]
MY128的博客
12-26 853
jQuery的html()和text()[0504]  一、开解： 把设置和返回拆开来理解，应该是四种。 1、html()是设置或返回html 2、text()是设置或返回文本 二、实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;D...
jquery text()和html()的区别
jarisMA的博客
08-27 1056
jquery text()和html()的区别 发布时间：2018-01-15 22:00:57 1.text()用来设置或返回被选元素的文本内容。 (1)返回被选元素文本内容 eg: <p> <strong>Hi!</strong> </p> $('p').text();/*返回p元素的文本内容，不包括内容里的标签，只返回:Hi! */ (2...
http状态码大全304、201、203等等
热门推荐
xufeiayang的博客
10-17 7万+
常见HTTP状态码大全 　　我们经常会遇到404、500、302等提示，它们究竟是什么意思呢?除了这几个常见的状态码外，还有哪些我们没有遇到过的但有可能出现的状态码呢？网站的http状态对于网站维护人员来说是相当重要的，当网站出现问题的时候，我们首先要诊断一下网站的http状态，从而进一步确认哪里出现的问题，下面IT百科就和大家分享一下一些HTTP状态码知识。
pyquery用法讲解
最新发布
06-13
PyQuery是一个类似于jQuery的Python库，它允许我们使用类似于jQuery的语法来操作HTML和XML文档。PyQuery基于lxml库构建，并提供了一种更为Pythonic的方式来进行文档解析和操作。 下面是一些PyQuery的基本用法： 1. 安装PyQuery库 使用pip命令来安装PyQuery库： ``` pip install pyquery ``` 2. 创建PyQuery对象 可以通过传入HTML或XML字符串来创建PyQuery对象，也可以从本地文件或URL获取文档并创建对象。 ``` from pyquery import PyQuery as pq # 从HTML字符串创建PyQuery对象 html = ''' <div class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ''' doc = pq(html) # 从本地文件创建PyQuery对象 doc = pq(filename='example.html') # 从URL创建PyQuery对象 doc = pq(url='http://www.example.com') ``` 3. 查找元素 可以使用类似于CSS选择器的语法来查找元素。 ``` from pyquery import PyQuery as pq html = ''' <div class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ''' doc = pq(html) # 查找class为box的元素 items = doc('.box') print(items) ``` 4. 获取属性和文本 可以使用attr()方法来获取元素的属性，text()方法来获取元素的文本。 ``` from pyquery import PyQuery as pq html = ''' <div class="wrap"> <a href="http://www.example.com">example</a> </div> ''' doc = pq(html) # 获取a标签的href属性 link = doc('a') print(link.attr('href')) # 获取a标签的文本 text = link.text() print(text) ``` 5. 修改属性和文本 可以使用attr()方法来修改元素的属性，text()方法来修改元素的文本。 ``` from pyquery import PyQuery as pq html = ''' <div class="wrap"> <a href="http://www.example.com">example</a> </div> ''' doc = pq(html) # 修改a标签的href属性 link = doc('a') link.attr('href', 'http://www.newexample.com') print(link) # 修改a标签的文本 link.text('new example') print(link) ``` 6. 遍历元素 可以使用for循环遍历元素。 ``` from pyquery import PyQuery as pq html = ''' <div class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ''' doc = pq(html) # 遍历class为box的元素 items = doc('.box') for item in items: print(item) ``` 以上就是PyQuery的一些基本用法，可以帮助我们更方便地解析和操作HTML和XML文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值