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

<!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. ez_curl【代码审计】

    ez_curl[代码审计][难度:4] 题目描述 代码审计类题目,附上代码: <?php highlight_file(__FILE__); $url = 'http://back-end:30 ...

  2. stackoverflow怎么解决

    stackoverflow怎么解决 栈溢出的可能原因: 函数递归调用层次过深 ,每调用一次,函数的参数.局部变量等信息就压一次栈,并且没有及时出栈. 局部变量体积太大 分析:每一个 JVM 线程都拥有 ...

  3. 构建 dotnet&vue 应用镜像->推送到 Nexus 仓库->部署为 k8s 服务实践

    前言 前面分享了 k8s 的部署安装,本篇来点实操,将会把一个 .net core + vue 的项目(zhontai),打包构建成 docker 镜像,推送到 nexus 镜像仓库,并部署到 k8s ...

  4. 聊聊 从源码来看ChatGLM-6B的模型结构

    基于ChatGLM-6B第一版,要注意还有ChatGLM2-6B以及ChatGLM3-6B 概述 ChatGLM是transformer架构的神经网络模型,因此从transformer结构入手,分析其 ...

  5. CSS3学习笔记引言

    开始我们要来介绍css: CSS(全称为Cascading Style Sheets)是一种用于描述HTML.XML等文档样式的样式语言,它能够定义元素的显示方式,如字体.颜色.布局等. CSS可以把 ...

  6. 【Tinyui】极简跨平台桌面端小工具开发框架

    导航 Github Gitee 开发指南 用户手册 说明 在产品或项目工作中,可能会遇到需要给非开发人员或者客户提供简易的PC小工具,这些小工具通常用户交互比较简单:功能也不复杂:同时需要支持多平台以 ...

  7. VSCode C++开发环境配置：CMake 调试配置 launch.json

    相关内容 VSCode C++开发环境配置: LLVM clang clangd 安装 cmake sudo apt install cmake 安装 VSCode 插件 CMake CMakeToo ...

  8. Spring Boot 整合 Log4j2 日志并压测性能

    1/ Log4j2的性能测试 从图中不难看出,在线程数为 2~16 之间,混合使用同步和异步的logger来打印日志,性能是最好的. 2/ 目标 混合 sync/async 彩色日志 分类输出到不同文 ...

  9. MySQL篇：详解MySQL卸载-Windows版

    MySQL篇:第一章_补_MySQL卸载(Windows版) 1. 停止MySQL服务 win+R 打开运行,输入 services.msc 点击 "确定" 调出系统服务. 2. ...

  10. MySQL进阶篇：详解索引结构

    2.2 MySQL进阶篇:第二章_二.二_索引结构 2.2.1 概述 MySQL的索引是在存储引擎层实现的,不同的存储引擎有不同的索引结构,主要包含以下几种: 索引结构 描述 B+Tree索引 最常见 ...