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

<!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. 【scikit-learn基础】--『监督学习』之 LASSO回归

    LASSO(Least Absolute Shrinkage and Selection Operator)回归模型一般都是用英文缩写表示,硬要翻译的话,可翻译为 最小绝对收缩和选择算子. 它是一种线 ...

  2. 不用手动创建数据库，直接导入sql文件，就能生成数据库和数据表

  3. CentOS7，配置rsyslog客户端地址

    在CentOS 7系统,将所有日志转发到 192.168.168.168 日志服务器,你可以按照以下步骤进行配置: 确保rsyslog已经被安装 rpm -qa|grep rsyslog 1.打开 r ...

  4. cp {,bak}用法（转载）

    cp filename{,bak} cp filename{,.bak} 这个命令是用来把filename备份成filename.bak的 等同于命令 cp filename filename.bak ...

  5. SQL优化三步曲

    有一天开发同学反馈线上业务库中有一条SQL执行很满,每次几乎要跑1分钟才结束,希望我们帮忙优化一下,具体SQL如下: SQL优化第一步 - 查看执行计划 对于一个SQL的优化,我们的第一步也是最重要的 ...

  6. 如何用.net制作一个简易爬虫抓取华为应用市场数据

    公司最近要做一款手机,手机需要制作一个应用市场.那么问题来了,自己制作应用市场,数据从哪来呢?作为一个创业型公司.搜集数据变成为了难题. 于是突然想到能不能通过程序去抓取别人应用市场的数据-- 那么我 ...

  7. Sequelize的简单连接和使用

    Sequelize是一个基于Node.js的ORM框架 特点: 1.支持多种数据库:Sequelize支持多种关系型数据库,包括MySQL.PostgreSQL.SQLite和MSSQL等,适用于需要 ...

  8. FreeMark模板基本知识

    FreeMarker模板基础知识 1.FreeMarker与jsp.Thymeleaf并排为三大模板引擎,用于把后端数据渲染到页面上,降低耦合度.动态数据+占位符+静态页面标签构成动态页面. 2.Fr ...

  9. SARIF在应用过程中对深层次需求的实现

    摘要:为了降低各种分析工具的结果汇总到通用工作流程中的成本和复杂性, 业界开始采用静态分析结果交换格式(Static Analysis Results Interchange Format (SARI ...

  10. aPaaS将如何改变软件行业？

    摘要:当SaaS在云计算中的占比越来越高的时候,几乎所有软件厂商言必谈SaaS,各大云厂商.咨询机构也都将目光瞄准了SaaS.如此火爆的现象背后,真实情况如何呢? 本文分享自华为云社区<[开天a ...