JQuery中的特殊选择器--this

原创 2016年05月30日 21:16:52
相信很多刚接触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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery选择器this的问题

(1)html方法属性中调用使用thishtml代码: aaa bbb ccc ddd js代码:...
  • jjzjjz1
  • jjzjjz1
  • 2011年04月14日 20:51
  • 2951

JQuery中的特殊选择器--this

相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?下面我们一起来看一下! this是JavaScript中的关键字,指的是当前的上下文对象,简单...
  • LHJBK
  • LHJBK
  • 2016年05月30日 21:16
  • 1181

CSS选择器修改样式,及单独修改样式this.style.

css选择器:修改样式 实现开关灯效果       开关灯效果    body  {      background: #FFF;  } .day {     backg...
  • sinat_26992509
  • sinat_26992509
  • 2016年09月12日 20:10
  • 1053

【整理】JQ样式篇——选择器

id选择器 id选择器:一个用来查找的ID,即元素的id属性 $( "#id" ) id选择器也是基本的选择器,jQuery内部使用JavaScript函数document.getElementB...
  • sinat_30511235
  • sinat_30511235
  • 2016年08月10日 16:04
  • 427

JQuery_九大选择器

JQuery中九大选择器。
  • pseudonym_
  • pseudonym_
  • 2017年07月25日 18:19
  • 615

兄弟选择器(+ 和 ~)

1. + 选择器  如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。      比如: h1 + p { margin-top:50p...
  • u014291497
  • u014291497
  • 2016年01月08日 14:51
  • 10950

5.选择器& 伪类和伪元素

最常用的:后代选择器和类型选择器(也称为元素选择器)id 和类选择器 属性选择器(http://www.w3school.com.cn/css/css_selector_attribute.asp)可...
  • qq_36367494
  • qq_36367494
  • 2018年02月04日 11:22
  • 16

jquery选择器的优势

码农传奇 2017-05-06 10:04 jquery中的选择器完全继承了CSS的风格,利用jquery选择器,可以非常方便地找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支...
  • u011277123
  • u011277123
  • 2017年05月10日 14:51
  • 713

常用jQuery选择器详解

元素选择是一切操作的前提,jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器') $('...
  • a153375250
  • a153375250
  • 2016年05月26日 14:46
  • 1547

jQuery选择器

jQuery选择器
  • zhanyouwen
  • zhanyouwen
  • 2016年06月04日 18:23
  • 362
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中的特殊选择器--this
举报原因:
原因补充:

(最多只允许输入30个字)