jQuery 特殊选择器this
2024-09-26 13:57:45
特殊选择器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表示在捕获阶段执行。
最新文章
- MySQL的用户和权限介绍
- jq实现点击表格无刷新修改数据,优化版
- 那些在学习iOS开发前就应该知道的事(part 1)
- Upgrade R (升级R语言)
- Freescle cortex-A9(完善中...)
- 用response输出一个验证码
- 【转】Windows按键消息—虚拟键码
- 个人vim配置(.vimrc文件分享)
- MySql优化方案
- Nexus 5完全拆解
- [HMLY]10.深入研究Block用weakSelf、strongSelf、@weakify、@strongify解决循环引用
- C#生成word
- javascript数组详解(js数组深度解析)【forEach(),every(),map(),filter(),reduce()】
- Being a Good Boy in Spring Festival(杭电1850)(尼姆博弈)
- Filecoin协议(挖矿)
- Tornado day1
- echarts 修改y轴name的样式
- Android Service解析
- Spring MVC POM示例
- Python 全集变量