使用jq获取DOM对象的this和event.target

NsbiCs

于 2023-10-10 09:11:53 发布

阅读量310

点赞数 1

文章标签： DOM

本文链接：https://blog.youkuaiyun.com/NsbiCs/article/details/133737336

版权

DOM 专栏收录该内容

10 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了在jQuery（jq）中如何使用`this`和`event.target`来获取当前操作的DOM对象及事件触发的目标对象。通过示例代码展示了在事件处理函数中，如何将`this`转换为jq对象，以及如何从事件对象中获取`event.target`，以实现对DOM对象的灵活操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用jQuery（简称jq）处理DOM操作时，经常需要获取当前操作的DOM对象以及事件触发的目标DOM对象。通过使用this关键字和event.target属性，可以轻松地获得这些对象。下面将详细介绍如何使用jq来实现这一功能，并提供相应的源代码。

获取当前操作的DOM对象（this）
当在事件处理函数中使用this关键字时，它将指向当前操作的DOM对象。无论是绑定了点击事件、改变事件还是其他事件，都可以使用this关键字来访问当前的DOM对象。

// 绑定点击事件
$("button").click(function

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

NsbiCs

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

jq 获取dom对象this和event.target

ViolenceHK的博客

08-22

5752

几天学习Ajax,看别人在点击事件获取dom时用event.target获取,发现很多不知道的地方。一、先说说区别 1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素； 2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(even

jQuery获取当前点击的对象元素(实现代码)

11-23

jQuery获取当前点击的对象元素(实现代码) [removed][removed] </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> [removed] //获取当前点击的对象 $('p').click( function(){ //this表示当前被点击元素，但是此时我们当做dom对象

参与评论您还未登录，请先登录后发表或查看评论

JQuery获取$(this)子节点对象的方法

松篁

07-05

518

相信很多刚接触JQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？首先来看看JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（）,即$(this)=jquery();也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个obj...

this$ java,[Java教程]［原创］jQuery的this和$(this)

weixin_42469169的博客

03-10

173

[Java教程]［原创］jQuery的this和$(this)0 2014-05-26 18:00:14网上有很多关于jQuery的this和$(this)的介绍，大多数只是理清了this和$(this)的指向，其实它是有应用场所的，不能一概而论在jQuery调用成员函数时，this就是指向dom对象。$(this)指向jQuery对象是无可厚非的，但this就是指向dom对象，这个...

jquery得到点击事件的this对象

taotoxht的专栏

11-07

9258

$(function() { // 点击任意 li,全部 li 变色 $("#tree li").click(function(e) { $(this).css("color", "red"); }); }); $(function() { // 点击第二层

JQ实现长按判断并且获取this

weixin_41623830的博客

10-28

531

$.fn.longPress = function (fn,trsTime) { //长按监听 var $this = this; for (var i = 0; i < $this.length; i++) { (function (target) { var timeout; target.addEventListener('touchstart', function (event) { quxiaoanniu(); //关闭删除按钮(取消按

jquery 关于event.target使用的几点说明介绍

01-19

this和event.target的相同点this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target); 这使我想起了以前写的一个例子：代码如下: //del event $(“.del”)...

JS和JQ的event对象区别分析

10-25

在使用事件委托的情况下，例如在`body`上监听`click`事件，JS和JQ的`event`对象会有不同的表现。在JS中，`event.target`仍然是触发事件的最底层元素，而在JQ中，`event.currentTarget`和`event.delegateTarget`都是...

jq获取点击后的event对象

热门推荐

weixin_zsh的博客

08-25

6万+

有时候会遇到循环出来的div，实现用户点击其中一个，据此进行其他操作，我们可以用$(this)来获取用户点击的div，但是如果没有其他的标志来区分这些循环出来的div的话（比如lang值的不同），我们如何获得点击的div的子元素呢？方法有两种，都是jQuery中获得子元素的方法------- .find () 和 .children () find查找所有的子元素，会一直查找，跨层级查找...

jquery 得到了this,如何获得到this下的一个元素

不抛弃不放弃

07-15

1518

$(this).find(":radio").attr("checked",true); 找到在A标签里面的radio，选中这就解决了带this的选择器，不能选择其内部元素是需求了！！！

JQuery中this和event.target的区别

adolf双手成就梦想

09-14

1721

this是Javascript语言的一个关键字。 this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。 this和event.target的区别： js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素； this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对

jQuery事件对象

原地起飞

12-14

1331

一、jQuery 事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。语法：演示代码： <body> <div></div> <script> $(function() { $(document).on("click", function() { consol...

jq获取同级或者下级的dom节点的操作

qq_23392319的博客

03-03

1711

jQuery.parent(expr) 找父亲节点，比如spanparent或者("span").parent()或者spanparent或者jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点jQuery.contents(),返回下面的所有内容，包括节点和文本。

jQuery 如何通过 this 获取元素属性

weixin_42587866的博客

01-12

1077

在 jQuery 中，可以使用 $(this) 或 $(event.target) 来获取当前元素。然后使用 attr() 方法来获取元素的属性值。例如： $(document).on("click", ".my-class", function(){ var value = $(this).attr("data-value"); console.log(value); }); ...

jquery获取任意点击到的对象，绑定点击函数event.target 不能用this

xiaoran606的专栏

01-23

492

$(document).click(function (event) { alert($(event.target).attr("class")); });