最近在写一些前端页面，遇到需要通过点击事件获取被点击对象的文本内容，正确代码如下：

<!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()问题的更多相关文章

  1. javascript中replace( )方法的使用——有博主已经讲过了，但里面有一小丢丢知识错误，挺重要的部分，我就重提下，以免初学者弄错

    阿里面试题:说出以下函数的作用是?空白区域应该填写什么? 其实这个问题http://www.phpstudy.net/b.php/105983.html解释的已经非常好了,思路也很顺,容易理解,本文将 ...

  2. 启动多个eclipse 时，因为一个另一个启动报错，

    启动多个eclipse 时,因为一个另一个启动报错, 原因: 可能是 有一个 eclipse  中 的 tomcat  配置出错:preference中  tomcat 配置  context dec ...

  3. 哇 真的是一个好插件！！！Sublime Text编辑文件后快速刷新浏览器

    http://9iphp.com/web/html/sublime-text-refresh-browser.html这篇博文咯 来源:[Tips]Sublime Text编辑文件后快速刷新浏览器 - ...

  4. 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 ...

  5. ibatis把表名作为一个参数报错问题的解决方案

    用ibatis的时候,想把表名也作为一个参数传进去,可是报错了,在ibatis配置文件里面是#resource#的方式,报错信息如下: org.apache.cxf.interceptor.Fault ...

  6. 最近纠结致死的一个java报错java.net.SocketException: Connection reset 终于得到解决

    自从SEOTcs系统11月份24日更新了一下SEO得分算法以来,一直困扰我的一个问题出现了,java的数据job任务,在执行过程中会经常报以下的错误: “2011-12-03 18:00:32 Def ...

  7. 一个CSS值转REM的Sublime Text插件

    CSSREM 一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 下载本项目,比如:git clone https://github.com/flashli ...

  8. cmake的一个编译报错

    在一台新搭建的服务器上执行cmake的时候,报了如下错误: $ cmake ./ -- The C compiler identification is unknown -- The CXX comp ...

  9. console的一个小易错点

    以前用控制台都是 console.log("a"); 每次log的都是一个变量或直接的字符串, 但是今天我在log里面写了个表达式, 下面再写各个表达式的时候,发现他莫名奇妙的输出 ...

  10. (续)一个demo弄清楚位图在内存中的存储结构

    本来续---数字图像处理之位图在计算机中的存储结构一文,通过参考别人的代码,进行修改和测试终于成功运行. 该实例未使用任何API和相关类,相信如果对此实例能够完全理解那么将有进一步进行数字图像处理的能 ...

随机推荐

  1. 【内核】基于 LSM 框架的 ELF 校验控制

    欲实现操作系统对正在加载的 ELF 文件的校验控制,需要借助 LSM 框架. LSM 框架介绍 LSM 全称 Linux Security MOdule,是 Linux 的一个安全模块框架.LSM 为 ...

  2. Python——第二章：运算符

    1. 算数运算    + - * / // % "//"除 "%"余 a = 20 b = 3 c = a // b d = a % b # 20 / 3 = ...

  3. Python——第一章：if语法规则

    if语句的语法规则: ======第一种======        if 条件:            代码        如果条件成立就执行代码        如果不成立, 就不执行 案例1: mo ...

  4. 构建健康游戏环境：DFA算法在敏感词过滤的应用

    现在的游戏有敏感词检测这一点,相信大家也不陌生了,不管是聊天,起名,签名还是简介,只要是能让玩家手动输入的地方,一定少不了敏感词识别,至于识别之后是拒绝修改还是星号替换,这个就各有各的做法了,但是绕不 ...

  5. 8种ETL算法汇总大全！看完你就全明白了

    摘要:ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,是构建数据仓库的重要一环,用户从数据源抽取出所需的数据,经过数据清洗,最终按照预先定义好的数据仓库模型,将数据加载到数据仓库中 ...

  6. 资源成本降低70%！华为MetaERP资产核算的Serverless架构实践

    本文分享自华为云社区<资源成本降低70%!华为MetaERP资产核算的Serverless架构实践>,作者: 华为云PaaS服务小智. 资产核算是指在一定的财务周期,对企业拥有的房屋建筑物 ...

  7. 小熊派开发实践丨小熊派+合宙Cat.1接入云服务器

    摘要:使用小熊派开发板,以合宙的AIR724为通信模组(Cat.1),以AT指令方式,通过mqtt协议接入云服务器. 本贴使用小熊派开发板+合宙的Air724(Cat.1模组),接入自己搭建的EMQ服 ...

  8. Golang代码测试：一点到面用测试驱动开发

    摘要:TDD(Test Driven Development),测试驱动开发.期望局部最优到全局最优,这个是一种非常不错的好习惯. 了解Golang的测试之前,我们先了解一下go语言自带的测试工具. ...

  9. 云小课 | 华为云KYON：网段零修改上云，简单又好用

    摘要:KYON(Keep Your Own Network)是华为云推出的企业级云网络解决方案,KYON能让用户直接将IDC组网搬到云上,网段零修改,简单又好用. 本文分享自华为云社区<[云小课 ...

  10. JS的深浅复制，原来如此！

    摘要:之所以会出现深浅拷贝的问题,实质上是由于JS对基本类型和引用类型的处理不同. 本文分享自华为云社区<js的深浅复制,一看就明白>,作者: 鑫2020. 浅复制的意思 浅复制是仅仅对数 ...