一个容易弄错的.textContent和text()问题
最近在写一些前端页面，遇到需要通过点击事件获取被点击对象的文本内容，正确代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Target</title>
</head>
<body>
<div id="tom">
TOmCat
</div>
</body>
<script>
$(document).ready(function() {
$('#tom').click(function(e) {
var strContent = $(e.currentTarget).text(); // 这里要用.text()获取文本内容
alert(strContent); // output: TOmCat
});
});
</script>
</html>
我一顿搜索（soso），发现还有人说可以用textContent熟悉来获取，我试了一下，直接alert出来是undefined ，可见只能用.text()来获取被点击对象的文本内容。
然后 .textContent属性一般用于某个具体的对象，举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Target</title>
</head>
<body>
<div id="tom">
TOmCat
<div class="tabs">
<div class="tab-item">
Item1
</div>
<div class="tab-item">
Item2
</div>
<div class="tab-item">
Item3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function() {
var objectTabItems = $('#tom .tabs div.tab-item');
var num = objectTabItems.length;
for(var i = 0; i < num; i++) {
let strContent = objectTabItems[i].textContent;
alert("this click is:" + strContent);
}
});
</script>
</html>
可以看出来.textContent是在取到某个具体元素对象的时候使用。
一个容易弄错的.textContent和text()问题的更多相关文章
- javascript中replace( )方法的使用——有博主已经讲过了，但里面有一小丢丢知识错误，挺重要的部分，我就重提下，以免初学者弄错
阿里面试题:说出以下函数的作用是?空白区域应该填写什么? 其实这个问题http://www.phpstudy.net/b.php/105983.html解释的已经非常好了,思路也很顺,容易理解,本文将 ...
- 启动多个eclipse 时，因为一个另一个启动报错，
启动多个eclipse 时,因为一个另一个启动报错, 原因: 可能是 有一个 eclipse 中 的 tomcat 配置出错:preference中 tomcat 配置 context dec ...
- 哇 真的是一个好插件！！！Sublime Text编辑文件后快速刷新浏览器
http://9iphp.com/web/html/sublime-text-refresh-browser.html这篇博文咯 来源:[Tips]Sublime Text编辑文件后快速刷新浏览器 - ...
- MyBatis查询传一个参数时报错：There is no getter for property named 'sleevetype' in 'class java.lang.Integer
用MyBatis进行查询,传入参数只有一个时(非Map)如int,报错 There is no getter for property named 'sleevetype' in 'class jav ...
- ibatis把表名作为一个参数报错问题的解决方案
用ibatis的时候,想把表名也作为一个参数传进去,可是报错了,在ibatis配置文件里面是#resource#的方式,报错信息如下: org.apache.cxf.interceptor.Fault ...
- 最近纠结致死的一个java报错java.net.SocketException: Connection reset 终于得到解决
自从SEOTcs系统11月份24日更新了一下SEO得分算法以来,一直困扰我的一个问题出现了,java的数据job任务,在执行过程中会经常报以下的错误: “2011-12-03 18:00:32 Def ...
- 一个CSS值转REM的Sublime Text插件
CSSREM 一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 下载本项目,比如:git clone https://github.com/flashli ...
- cmake的一个编译报错
在一台新搭建的服务器上执行cmake的时候,报了如下错误: $ cmake ./ -- The C compiler identification is unknown -- The CXX comp ...
- console的一个小易错点
以前用控制台都是 console.log("a"); 每次log的都是一个变量或直接的字符串, 但是今天我在log里面写了个表达式, 下面再写各个表达式的时候,发现他莫名奇妙的输出 ...
- (续)一个demo弄清楚位图在内存中的存储结构
本来续---数字图像处理之位图在计算机中的存储结构一文,通过参考别人的代码,进行修改和测试终于成功运行. 该实例未使用任何API和相关类,相信如果对此实例能够完全理解那么将有进一步进行数字图像处理的能 ...
随机推荐
- 【C#】【串口通信（Serial Port）】无法使用（using System.IO.Ports;）命名空间<Error：SerialPort不存在上下文>
1.包缺失导致--安装相应包: 2.等待命令行初始化--输入命令: Install-Package Microsoft.Windows.Compatibility -Version 5.0.2 参考网 ...
- 神经网络优化篇：详解神经网络的权重初始化（Weight Initialization for Deep NetworksVanishing / Exploding gradients）
神经网络的权重初始化 这是一个神经单元初始化地例子,然后再演变到整个深度网络. 来看看只有一个神经元的情况,然后才是深度网络. 单个神经元可能有4个输入特征,从\(x_{1}\)到\(x_{4}\), ...
- MinIO FTP 断点续传
MinIO FTP 断点续传 对于minio来说,使用minio官方的Java SDK和开启FTP都是不支持断点续传的.对于要实现http接口的断点续传,可以通过调用Amazon S3 REST AP ...
- java：JDBC使用步骤（mysql）java小白的第一篇博客
1:环境要求 先在你的mysql里面创造一个数据库(并添加一点数据) 下载并导入驱动 2:jdbc的五大步骤 第一步:加载mysql驱动: 1 Class.forName("com.mysq ...
- yml与json互转、yaml转json、json转yml
yml与json互转.yaml转json.json转yml 使用jackson下的格式化模块实现 依赖: <dependency> <groupId>com.fasterxml ...
- .NET开源、强大的Web报表统计系统
前言 今天分享一个.NET开源.强大的Web报表统计系统:CellReport. 项目官方介绍 CellReport 诞生的初衷是为了解决日常快速制作统计报表的需要. CellReport 是一个为复 ...
- 新版以太坊Ethereum库ethersV5.0配合后端Golang1.18实时链接区块链钱包(Metamask/Okc)以及验签操作
区块链去中心化思想无处不在,比如最近使用个体抗原自检替代大规模的中心化核酸检测,就是去中心化思想的落地实践,避免了大规模聚集导致的交叉感染,提高了检测效率,本次我们使用Ethereum最新的ether ...
- 华为云GaussDB支撑华为MetaERP系统全面替换
摘要:目前MetaERP已经覆盖了华为公司100%的业务场景和80%的业务量. 本文分享自华为云社区<强渡大渡河!华为云GaussDB支撑华为MetaERP系统全面替换>,作者: 华为云头 ...
- 性能测量工具-DevTools/PageSpeed/LightHouse
前端的性能优化有诸多有迹可循的理论和方法,比如 Yahoo!性能军规(Best Practices for Speeding Up Your Web Site).Google PageSpeed In ...
- Scala Http请求工具类
import java.io.IOException import java.util import org.apache.http.client.ClientProtocolException im ...