jQuery:click()方法中使用this的问题解决
程序员文章站
2022-03-07 14:32:00
...
jQ版本:jquery-1.7.2.js
<div id="box">test</div>
<script> $(function(){ $('#box').click(function(){ //alert(this.html()); // 报错 alert(this.innerHTML);// test alert($(this).html()); // test }); });</script>
请问一下,经$('#box')获取后,已经得到jQuery对象了,为什么this对应的还是DOM对象,而$(this)却是jQuery对象呢?谢谢!
你要知道没有jquery 也有js,没有js就没有jquery。 this 是js的东东,函数执行环境中的this 是属于原生js的,怎么能够给你指向jquery对象。 穿上$(this)马甲 才是jquery对象。
this引用的是函数执行的环境对象,比如在全局中调用,this就是window。所以你这个this并不是$("#box")返回的,不是JQ对象,而是调用此函数的div这个dom对象。仔细理解下this。手机打字好费劲,如果还有不明白的明天开电脑说
$('#box')已经返回JQuery对象了啊,所以你后面才能调用click()方法,注意你这一步相当于
var $box = $('#box'); $box.click(function(){ //TODO});
而函数执行的环境对象跟你这句代码获得什么对象没关系,本质是在这个DOM上绑定一个事件,
事件触发时,this就只是这个DOM
$(this)并不会改变这个DOM对象,只是进行了一次包装,就像是加了一层外壳,让他变成JQuery对象,从而能够使用JQuery方法,并不是像传入选择器一样去寻找DOM,因此它仍是当前触发此事件的div.box。包装后的JQuery可以还原成DOM对象。
看看下面的代码,通过事件对象获取触发事件的对象:
$('.box').click(function(event){ console.log(event.target); console.log(event.target==this);//非事件冒泡情况下为true console.log($(this).get(0)==this);//true});
以上就是jQuery:click()方法中使用this的问题解决的详细内容,更多请关注其它相关文章!
上一篇: jquery有哪些属性选择器
下一篇: pip是啥
推荐阅读
-
spring boot中controller的使用及url参数的获取方法
-
使用C#实现在word中插入页眉页脚的方法
-
解析C#中@符号的几种使用方法详解
-
使用@符号让C#中的保留字做变量名的方法详解
-
wxpython中自定义事件的实现与使用方法分析
-
VS2010中lib与dll文件的生成与使用方法
-
java中hashCode、equals的使用方法教程
-
MySQL中union和order by同时使用的实现方法
-
关于C# 5.0 CallerMemberName CallerFilePath CallerLineNumber 在.NET4中的使用介绍方法
-
Python中列表和元组的使用方法和区别详解