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 相关文章推荐
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
小程序实现侧滑删除功能
Jun 25 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
yii实现创建验证码实例解析
2014/07/31 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php生成word并下载代码实例
2019/03/15 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python conda操作方法
2019/09/11 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
求职信写作要突出重点
2014/01/01 职场文书
初三物理教学反思
2014/01/21 职场文书
喝酒检查书范文
2014/02/23 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
公司承诺函范文
2015/01/21 职场文书
针对吵架老公保证书
2015/05/08 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书