一个容易弄错的.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和相关类,相信如果对此实例能够完全理解那么将有进一步进行数字图像处理的能 ...
随机推荐
- redis集群搭建注意事项
官方教程:https://redis.io/docs/management/scaling/ 其他参考: https://note.youdao.com/ynoteshare/index.html?i ...
- CSS语法检查利器之csslint
本文于2015年底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 背景 前段时间研究使用YUI Compressor压缩项目里的js和cs ...
- Python——第五章：os模块、sys模块
os 模块 os 模块提供了很多允许你的程序与操作系统直接交互的功能 import os 得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目 ...
- Pikachu漏洞靶场 Unsafe Fileupload（文件上传）
Unsafe Fileupload 文章目录 Unsafe Fileupload 1.client check 2.MIME type 3.getimagesize 1.client check 标题 ...
- P9344 去年天气旧亭台 代码
不带滚动数组代码: #include <iostream> #include <cstdio> #include <cstring> #define int lon ...
- 面试官：说一说你的第一个Java程序是怎么跑起来的
面试官:"说一说你第一个Java程序是怎么跑起来的?" 我:"啊,您是说Hello World吗?" 面试官:"嗯,没错,几十年过去了,还是hello ...
- nacos 系列：.net core 6.0 使用 nacos
目录 安装 Nuget 包 配置 appsettings.json 添加服务和配置 测试 官方示例:https://kgithub.com/nacos-group/nacos-sdk-csharp 安 ...
- 昇腾CANN DVPP硬件加速训练数据预处理，友好解决Host CPU预处理瓶
本文分享自华为云社区<昇腾CANN 7.0 黑科技:DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶颈>,作者: 昇腾CANN . 随着人工智能的快速发展,越来越多的应用场 ...
- Nacos是什么？
摘要:Nacos是 Dynamic Naming and Configuration Service的首字母简称,相较之下,它更易于构建云原生应用的动态服务发现.配置管理和服务管理平台. 本文分享自华 ...
- CWE4.6标准中加入 OWASP 2021 TOP10
摘要: 新发布的CWE4.6标准,加入了OWASP 2021 TOP10的视图. 本文分享自华为云社区<CWE 4.6 和 OWAPS TOP10(2021)>,作者: Uncle_Tom ...