<ul class="tree-ocx">
<li class="tree-ocx-li" data-displayed="false">
<div class="tree-ocx-tip">分类</div>
<ul class="tree-ocx-body">
<li class="sub-category-item">设计作品</li>
<li class="sub-category-item">技巧杂烩</li>
<li class="sub-category-item">生活随笔</li>
</ul>
</li>
</ul>

当我们使用 JQ 选择器选中节点 A 之后,并为之添加点击事件on(events, hander)。hander 参数接收一个箭头函数,在箭头函数中又需要选中此节点 A,为其添加一个 CSS 样式。$(this)的 this 指向的并不是节点 A,而是Window对象。

$(".tree-ocx-li").on("click", () => {
$(this).addClass("tree-ocx-li-active");
}

箭头函数箭头函数 - JavaScript | MDN没有自己的 this、arguments、super。所以,在箭头函数里面使用 this,其实就是 Window 对象。

把箭头函数换成普通函数,此时的this就是函数本身,普通函数有箭头函数没有的东西,例如 arguments、super。普通函数可以使用 new,即构造器:

$(".tree-ocx-li").on("click", function () {
$(this).addClass("tree-ocx-li-active");
}

jQuery 选择器选中某节点,在后续的链式操作函数内使用 $(this) 的结果是 Window 对象,而非该节点对象的更多相关文章

  1. 如何一行jquery代码写出tab标签页(链式操作)

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  2. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  3. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  4. jquery中链式操作的this指向

    jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...

  5. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

  6. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  7. jQuery对象的链式操作用法分析

    可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...

  8. jquery初级接触-----链式操作

    设置一个初级菜单,点击显示本级菜单下的项目,被点击的同级其它菜单收起 html 代码: <!DOCTYPE html> <html lang="en"> & ...

  9. 强大的JQuery链式操作风格

    实例代码 <style type="text/css"> #menu {width: 300px;} .has_children {background:#555;co ...

随机推荐

  1. 专家PID控制仿真学习

    目录 专家控制 专家系统 专家控制 学习笔记,用于记录学习 资料:<智能控制>(第四版)--刘金琨 专家系统 一.专家系统的定义 专家系统是一类包含知识和推理的智能计算机程序,其内部包含某 ...

  2. STM32时钟系统配置程序源码深入分析

    一.分析程序的目的 最近我在移植实时系统是遇到了一些问题,所以决定深入了解系统时钟的配置过程,当然想要学好stm32的小伙伴也有必要学习好时钟系统的配置,所以我将学习的过程再次记录,有写得不好的地方, ...

  3. MySQL数据库5

    内容概要 pyhton操作MySQL SQL注入问题 修改表SQL语句补充 视图.触发器.储存过程 事务 流程控制 函数 索引与慢查询优化 内容详情 pyhton操作MySQL python中支持操作 ...

  4. 浏览器代理user-agent

    两种方法: 法1:浏览器地址栏输入:about://version,然后复制用户代理: 如果法1不行,法2肯定可以. 法2:打开任意浏览器,输入任意网址,下面以火狐和百度网址为例来进行说明: 打开火狐 ...

  5. CVPR2022 | 可精简域适应

    前言 在本文中,作者引入了一个简单的框架,即Slimmable Domain Adaptation,以通过权重共享模型库改进跨域泛化,从中可以对不同容量的模型进行采样,以适应不同的精度效率权衡.此外, ...

  6. dos命令-*02

    1.cmd状态下 tab快速补充文件名 ↑↓快速填充之前输入的文件名 2.//这是Java的快速入门 //对代码的相关说明 //1.public class Hello 表示Hello是一个类,是一个 ...

  7. vlan配置

    VLAN(Virtual Local Area Network)即虚拟局域网,是将一个物理的局域网在逻辑上划分成多个广播域的技术. 通过在交换机上配置VLAN,可以实现在同一个VLAN内的用户可以进行 ...

  8. flv.js的追帧、断流重连及实时更新的直播优化方案

    目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 ...

  9. windows版本rabbitmq安装及日志level设置

    1.DirectX Repair 安装缺失的C++组件,不安装缺失的组件会造成第二部安装erl文件夹缺少bin文件夹2.安装otp_win64_23.1 1.配置 ERLANG_HOME:地址为Erl ...

  10. C++ 弹幕游戏

    可能会持续更新吧,, 我们说一下固定弹,直线轨迹的做法 . 首先放一个 Kaguya 的波粒: 境符「波与粒的境界」 since C++98,系统要求 Windows . #include <c ...