特殊选择器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表示在捕获阶段执行。

最新文章

  1. MySQL的用户和权限介绍
  2. jq实现点击表格无刷新修改数据,优化版
  3. 那些在学习iOS开发前就应该知道的事(part 1)
  4. Upgrade R (升级R语言)
  5. Freescle cortex-A9(完善中...)
  6. 用response输出一个验证码
  7. 【转】Windows按键消息—虚拟键码
  8. 个人vim配置(.vimrc文件分享)
  9. MySql优化方案
  10. Nexus 5完全拆解
  11. [HMLY]10.深入研究Block用weakSelf、strongSelf、@weakify、@strongify解决循环引用
  12. C#生成word
  13. javascript数组详解(js数组深度解析)【forEach(),every(),map(),filter(),reduce()】
  14. Being a Good Boy in Spring Festival(杭电1850)(尼姆博弈)
  15. Filecoin协议(挖矿)
  16. Tornado day1
  17. echarts 修改y轴name的样式
  18. Android Service解析
  19. Spring MVC POM示例
  20. Python 全集变量

热门文章

  1. direct.h头文件(对目录操作)
  2. 制作用于日期时间型字段的DELPHI数据感知控件
  3. Hibernate配置文件说明
  4. 在VS2012中设置默认启动
  5. Mac Java配置JAVA——HOME
  6. FFT多项式乘法模板
  7. C语言一些常用的功能
  8. java禁止实例化的工具类
  9. Equal Sums (map的基本应用) 多学骚操作
  10. Hadoop NameNode元数据相关文件目录解析