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

<!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. tarjan无向图割点与割边板子

    \(\Huge{割点}\) \(无向图割点判定法则\) 当遍历到一个点x时,这个点为割点的情况有两种: 第一种是该节点为根节点且子节点数>=2,必导致两个子节点不连通: 第二种是该节点不为根节点 ...

  2. 前端异步编程 —— Promise对象

    在前端编程中,处理一些简短.快速的操作,在主线程中就可以完成. 但是,在处理一些耗时比较长以至于比较明显的事情,比如读取一个大文件或者发出一个网络请求,就需要异步编程来实现,以避免只用主线程时造成页面 ...

  3. 在WInform开发中实现工具栏/菜单的动态呈现

    在Winform系统开发中,为了对系统的工具栏/菜单进行动态的控制,我们对系统的工具栏/菜单进行动态配置,这样可以把系统的功能弹性发挥到极致.通过动态工具栏/菜单的配置方式,我们可以很容易的为系统新增 ...

  4. java方法的定义与执行

    java中的方法在类中定义. 定义方法格式: 访问修饰符    返回值类型    方法名(参数列表){   ...  执行内容  ...   return 返回值; } 访问修饰符:表示方法在哪里能被 ...

  5. 【1】从零玩转OSS阿里云存储服务之阿里云平台等操作-1-cong-ling-wan-zhuan-oss-a-li-yun-cun-chu-fu-wu-zhi-a-li-yun-ping-tai-deng-cao-zuo

    title: [1]从零玩转OSS阿里云存储服务之阿里云平台等操作 date: 2021-06-09 17:21:12.037 updated: 2021-12-26 17:43:18.92 url: ...

  6. Next.js 开发指南 路由篇 | App Router

    前言 路由(routers)是应用的重要组成部分.所谓路由,有多种定义,对于应用层的单页应用程序而言,路由是一个决定 URL 如何呈现的库,在服务层实现 API 时,路由是解析请求并将请求定向到处理程 ...

  7. Ubuntu搭建邮件服务器

    转载:原文链接 前言 关于邮件服务器的工作原理我就不再赘述了.Postfix是优秀的MTA,而Dovecot则是优秀的MDA.前者负责发信.收信,提供smtp服务:后者负责邮件保存到邮箱,提供pop3 ...

  8. [python]常用配置读取方法

    前言 常见的应用配置方式有环境变量和配置文件,对于微服务应用,还会从配置中心加载配置,比如nacos.etcd等,有的应用还会把部分配置写在数据库中.此处主要记录从环境变量..env文件..ini文件 ...

  9. GOF23--23种设计模式（三）

    一.桥接模式 Java中的桥接模式(Bridge Pattern)是一种结构性设计模式,它将抽象部分和实现部分分离,使它们可以独立变化,同时通过桥接对象将它们连接起来. 这种模式将抽象与其实现解耦,使 ...

  10. 27、flutter Dialog 弹窗

    AlertDialog //放在State<>之下 void _alertDialog() async { var result = await showDialog( barrierDi ...