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

<!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. MagicArray:像php一样，让Go业务代码不再卷！

    卷!一个字形容了当今码农行业的现状.一层一层的代码结构,一个一个dto,entity,vo,req,resp.这些对象越来越多,让码农们非常劳于奔命,加一个字段,改一个字段,影响面有多少.代码量也越来 ...

  2. ElasticSearch之cat pending tasks API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/pending_tasks?v=true&pretty" --cacert ...

  3. uniapp中实现H5录音和上传、实时语音识别（兼容App小程序）和波形可视化

    目录 Recorder-UniCore插件特性 集成到项目中 调用录音 上传录音 ASR语音识别 在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能,uniapp自带的re ...

  4. maven系列：POM文件总体配置说明

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  5. Windows使用docker踩坑记录

    一.安装踩坑 安装时会让你选择:是否使用Windows容器 Use Windows containers instead of Linux containers(this can be changed ...

  6. 前端js常用的60余种工具方法【强烈建议收藏】

    "工欲善其事,必先利其器!"本文为大家带来前端js开发常用的60种工具方法,有了这些开发工具你就可以高效的处理任务和信息了. 1.邮箱 export const isEmail = ...

  7. Rust布道者张汉东倾授，入门Rust初学者都要攻破哪些难点？

    摘要:Rust语言学习曲线过于陡峭?初学者看懂这张思维导图,快速入门. Rust语言这两年的热度大家有目共睹,作为一个有着突破性变革意义的语言,其光鲜背后也有诸多质疑,对于想要在系统编程语言上更上一层 ...

  8. 梳理数仓FI manager节点健康检查逻辑

    摘要:一篇记录FI Manager节点健康检查机制的博文. 本文分享自华为云社区<GaussDB(DWS) FI manager节点健康检查逻辑梳理>,作者:配音师 . 一.相关背景 1. ...

  9. FTP 被动模式配置

    总结:FTP 21端口,可以主动连接,防火墙配置一下21端口放行就OK了.非21端口,需要设成被动连接和端口范围.防火墙要做相应的配置 原理 https://www.cnblogs.com/zjoch ...

  10. flask 上传文件，视图

    记得有template ''' 导入flask类.该类的实例将会成为我们的wsgi应用 __name__是一个适用于大多数情况的快捷方式,有了这个参数,flask才能知道在那里找到模板和静态文件等东西 ...