jQuery 选择器选中某节点,在后续的链式操作函数内使用 $(this) 的结果是 Window 对象,而非该节点对象
<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 对象,而非该节点对象的更多相关文章
- 如何一行jquery代码写出tab标签页(链式操作)
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- jquery中链式操作的this指向
jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- jQuery对象的链式操作用法分析
可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...
- jquery初级接触-----链式操作
设置一个初级菜单,点击显示本级菜单下的项目,被点击的同级其它菜单收起 html 代码: <!DOCTYPE html> <html lang="en"> & ...
- 强大的JQuery链式操作风格
实例代码 <style type="text/css"> #menu {width: 300px;} .has_children {background:#555;co ...
随机推荐
- 选择ERP频频踩雷?国内外ERP有差异,突破ERP软件单一性是关键
信息化日新月异的蓬勃发展,导致企业在选择ERP软件时频频踩雷.企业如何选择出一个适合自己的ERP软件系统呢?是选择国外知名公司的ERP软件产品,还是选择国内性价比高的ERP软件产品呢,小编就带大家了解 ...
- 使用pip安装库或执行pip命令时报错解决方案
初次安装pip后执行安装升级一般不会有问题,但是国外的镜像源下载升级由于网速过慢会进行报错,提示需要升级 pip 或者下载速度很慢最后直接报了错如下图: 这个时候只需要修改镜像源即可,建议修改为永久镜 ...
- Makefile基础语法
Makefile的作用 如果没有Makefile,每次修改源代码后,如果要重新编译代码,都要输入编译命令,当源代码很多时,效率很底下. 基本格式 target: componsnts TAB rule ...
- 剖析虚幻渲染体系(15)- XR专题
目录 15.1 本篇概述 15.1.1 本篇内容 15.1.2 XR概念 15.1.2.1 VR 15.1.2.2 AR 15.1.2.3 MR 15.1.2.4 XR 15.1.3 XR综述 15. ...
- Number.prototype.toString()方法
Number.prototype.toString(radix)方法返回指定基数对应Number的字符串值 radix可选参数,值范围为2~36,转化基数,如果未指定,默认值为10,如果radix值不 ...
- 竟然还有人说ArrayList是2倍扩容,今天带你手撕ArrayList源码
ArrayList是我们开发中最常用到的集合,但是很多人对它的源码并不了解,导致面试时,面试官问的稍微深入的问题,就无法作答,今天我们一起来探究一下ArrayList源码. 1. 简介 ArrayLi ...
- mac mini 装UBUNTU后没有WIFI解决办法
1.在终端中运行如下命令,重新安装b43相关的全部驱动和firmware: 复制代码 代码如下: sudo apt-get install bcmwl-kernel-source #Broadcom ...
- springboot2.7.x 集成log4j2配置写入日志到mysql自定义表格
在阅读之前请先查看[springboot集成log4j2] 本文暂不考虑抽象等实现方式,只限于展示如何自定义配置log4j2并写入mysql数据库(自定义结构) 先看下log4j2的配置 <?x ...
- bat-Office激活命令
激活命令 cd C:\Program Files\Microsoft Office\Office16 //然后目录对的话,该目录下面应该有个 OSPP.VBS cscript ospp.vbs /ds ...
- 从Mpx资源构建优化看splitChunks代码分割
背景 MPX是滴滴出品的一款增强型小程序跨端框架,其核心是对原生小程序功能的增强.具体的使用不是本文讨论的范畴,想了解更多可以去官网了解更多. 回到正题,使用MPX开发小程序有一段时间了,该框架对不同 ...