<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. Docker安装Mycat和Mysql进行水平分库分表实战【图文教学】

    一.前言 小编最近公司有个新的需求,数据量比较大,要涉及到分库分表.大概了解了一些主流的中间件,使用和网上资料比较多的是Mycat和sharding-jdbc,小编比较倾向于Mycat.原因很简单就是 ...

  2. Servlet的本质

    简介:Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. 功能:使 ...

  3. 推荐一款M1芯片电脑快速搭建集群的虚拟机软件

    虚拟机软件太多了,出名的莫过于VMware,VirutlaBox以及Parallels Desktop. 我们使用虚拟机软件一般有两种用途: 安装不同于宿主机系统的拥有用户界面的操作系统,比如Wind ...

  4. 程序员必备,一款让你提高工作效率N倍的神器uTools

    下载地址:https://www.aliyundrive.com/s/f7PU7QxdxEz uTools 是什么? uTools = your tools(你的工具集) uTools 是一个极简.插 ...

  5. 记一次排查线上MySQL死锁过程,不能只会curd,还要知道加锁原理

    昨晚我正在床上睡得着着的,突然来了一条短信. 啥,线上MySQL死锁了,我赶紧登录线上系统,查看业务日志. 能清楚看到是这条insert语句发生了死锁. MySQL如果检测到两个事务发生了死锁,会回滚 ...

  6. 实践GoF的23种设计模式:装饰者模式

    摘要:装饰者模式通过组合的方式,提供了能够动态地给对象/模块扩展新功能的能力.理论上,只要没有限制,它可以一直把功能叠加下去,具有很高的灵活性. 本文分享自华为云社区<[Go实现]实践GoF的2 ...

  7. 『现学现忘』Git后悔药 — 28、版本回退git reset --soft命令说明

    git reset --soft commit-id命令:回退到指定版本.(soft:柔软的) 该命令仅仅修改分支中的HEAD指针的位置,不会改变工作区与暂存区中的文件的版本. 实现上是只做了一件事情 ...

  8. Windows对拍系统

    有个东西可以帮助对拍,告诉你两个程序的输出哪不一样(但是无法得知错误位置,聊胜于无吧) 一.打开计算机  二.在上方输入$cmd$,摁下回车 三.弹出对话窗如下,输入$fc +$空格,输入两个需要比较 ...

  9. Linux快捷方式创建模板

    1.创建快捷方式文件 sudo gedit /usr/share/applications/Navicat.desktop 模板: [Desktop Entry] Name=Navicat Exec= ...

  10. APISpace 绕口令API接口 免费好用

    绕口令又称急口令.吃口令.拗口令等.是一种民间传统的语言游戏 ,由于它是将若干双声.叠韵词或发音相同.相近的语.词有意集中在一起,组成简单.有趣的语韵,要求快速念出,所以读起来使人感到节奏感强,妙趣横 ...