jQuery 特殊选择器this

最新推荐文章于 2024-08-25 10:44:35 发布

转载最新推荐文章于 2024-08-25 10:44:35 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sMKing/p/5807493.html

本文详细解析了jQuery中this与$(this)的区别，解释了this在JavaScript中的作用域概念及其在DOM中的应用，并介绍了如何利用$(this)简化DOM元素的操作。

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

特殊选择器this

相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象MKing

var MKing = {
    name:"sMKing",
    getName:function(){
        //this,就是MKing对象
        return this.name;
    }
}
imooc.getName(); //慕课网

当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)，具体的大家可以查阅相关资料

同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用

假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可

 this.style.color = "red"

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

换成jQuery的做法：

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以

用jQuery提供的快捷方法直接处理样式了

总体：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
$this只是个自定义的变量，$(this)是将当前DOM对象转换成jquery对象 

addEventListener一共有三个参数(event, function, useCapture)，最后一个参数默认是false，表示事件句柄在冒泡阶段执行，true表示在捕获阶段执行。

转载于:https://www.cnblogs.com/sMKing/p/5807493.html