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 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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
相对路径转化成绝对路径
2007/04/10 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
使用Python实现分别输出每个数组
2019/12/06 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
如何使用python代码操作git代码
2020/02/29 Python
python3 logging日志封装实例
2020/04/08 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
自荐信格式简述
2014/01/25 职场文书
金融管理应届生求职信
2014/02/20 职场文书
集体婚礼策划方案
2014/02/22 职场文书
会计专业导师推荐信
2014/03/08 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
合作与交流自我评价
2015/03/09 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书