jQuery的text()方法用法分析


Posted in Javascript onDecember 20, 2014

本文实例讲述了jQuery的text()方法用法。分享给大家供大家参考。具体分析如下:

此方法返回或者设置匹配元素的文本内容。
如需了解更多相关内容可参阅参考手册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="https://3water.com/" />

<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()方法带有参数的用法类似,但是还是有很大的区别:
text()方法设置的是匹配元素的文本内容,且会将HTML中的预留字符(如大于号(>))转换成html字符实体,以便于正确显示,而html()方法是设置匹配元素的html内容。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<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(){

    $("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="https://3water.com/" />

<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>

通过此实例大家可以观察一下HTML内容和文本内容的区别。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
js 幻灯片的实现
Dec 06 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
jQuery中click事件的定义和用法
Dec 20 #Javascript
javascript中String对象的slice()方法分析
Dec 20 #Javascript
javascript中Number对象的toString()方法分析
Dec 20 #Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 #Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 #Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 #Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 #Javascript
You might like
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
php使用GeoIP库实例
2014/06/27 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
php常用数组函数实例小结
2016/12/29 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
php 修改密码实现代码
2017/05/24 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
Python正则表达式匹配中文用法示例
2017/01/17 Python
使用Python生成XML的方法实例
2017/03/21 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
python实现动态数组的示例代码
2019/07/15 Python
Python内置类型性能分析过程实例
2020/01/29 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
经典的班主任推荐信
2013/10/28 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
建筑工地大门标语
2014/06/18 职场文书
大学生实习介绍信
2015/05/05 职场文书
新郎婚礼致辞
2015/07/27 职场文书
美容院管理规章制度
2015/08/05 职场文书
小学英语听课心得体会
2016/01/14 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL