JQuery中的特殊选择器--this

最新推荐文章于 2022-10-13 09:57:25 发布

刘小筛

最新推荐文章于 2022-10-13 09:57:25 发布

阅读量2.9k

点赞数

分类专栏： JQuery 文章标签： jquery 选择器特殊选择器 this

本文链接：https://blog.csdn.net/LHJBK/article/details/51541235

版权

JQuery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？下面我们一起来看一下！

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

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

var ch = {
    name:"中国",
    getName:function(){
        //this,就是ch对象
        return this.name;
    }
}
ch.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的方法和属性值。

接下来好好理解一下下面代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>特殊选择器this</h2>

    <p id="test1">点击测试：通过原生DOM处理</p>

    <p id="test2">点击测试：通过原生jQuery处理</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接通过dom的方法改变颜色
            this.style.color = "red"; 
        },false);
    </script>

    <script type="text/javascript">
        $('#test2').click(function(){
            //通过包装成jQuery对象改变颜色
            $(this).css('color','blue');
        })
    </script>

</body>

</html>

刘小筛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的特殊选择器--this

相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？下面我们一起来看一下！this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imoocvar ch = { name:"中国",
复制链接

扫一扫