一个容易弄错的.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和相关类,相信如果对此实例能够完全理解那么将有进一步进行数字图像处理的能 ...
随机推荐
- 三个月我迁移了100PB数据
2023年马上结束,这一年做了不少事情,有一项我可以吹好几年,忍不住和大家分享一下啊. 需求 去年底收到一项需求,要求2个月内从某云存储迁移100PB数据到微软云存储,包含几百亿个文件.当时听到这个数 ...
- 学习JVM---入门
1.JVM体系结构 JVM的位置 JVM体系结构 2.类加载器 双亲委派机制 package java.lang; /** * 测试自定义java.lang.String类能否运行成功 * 体会双亲委 ...
- 从零玩转QQ登录-clwzqqdlu
title: 从零玩转QQ登录 date: 2021-05-01 15:55:39.951 updated: 2023-03-30 13:29:03.865 url: https://www.yby6 ...
- python在容器内克隆拉取git私有仓库
前言 目前有个python应用需要在容器镜像内拉取git私有仓库的代码,一开始的想法是用GitPython,折腾一番ssh私钥和known_hosts问题后,发现还是在镜像中封装个git最省事,然后用 ...
- GeoServer发布地图服务（WMS、WFS）
目录 1. 概述 2. 矢量数据源 3. 栅格数据源 1. 概述 我们知道将GIS数据大致分成矢量数据和栅格数据(地形和三维模型都是兼具矢量和栅格数据的特性).但是如果用来Web环境中,那么使用图片这 ...
- Android学习--ListView和Tab
产生一个ListView 其中包含很多items,第一个item启动另一个实现了Tab的Activity. 关于tab的使用方式,参见下面blog http://oldshark.blog.163.c ...
- 屎山代码风格指南（避免被优化&&避免被接盘）
欢迎补充!!! 序言 良好的代码结构:Bad 使用有意义的变量和函数名,遵循命名规范,使代码易于理解. 组织代码,使用适当的文件和文件夹结构,保持模块化. 避免全局变量的滥用,尽量使用局部作用域. 单 ...
- 5分钟就能实现的API监控，有什么理由不做呢？基调听云
API深度影响着你的应用 今天的数字应用世界其实是一个以API为中心的世界,我们只是没有意识到这些API的重要性.比如在电子商务交易.社交媒体等对交互高度依赖的领域,可以说API决定了应用的质量一点也 ...
- Java中ArrayList的遍历与删除元素方式总结
在Java编程中,我们经常需要对数据结构进行遍历操作,并根据业务需求删除部分元素.而数组列表(ArrayList)是集合类中的一种,它可以动态地添加和删除元素,非常适合在程序中使用.本篇博客将总结Ar ...
- C++篇：第十二章_文件及IO_知识点大全
C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 十二.文件及IO 当在输入输出流中使用控制符进行格式控制时,需在程序中加入头文件 ...