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

jQuery 特殊选择器this的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  8. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  9. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

  10. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. user32的使用

    通过代码查询特定的窗口,并在文本框中输入文字然后单击"OK"按钮 需要查找的Dialog 使用Spy++查看窗口信息 通过代码实现功能 class Program { //defi ...

  2. doget,doPost在底层走的是service

    doget,doPost在底层走的是service 因为在源码上 先执行service方法 然后再调用doget,doPost方法

  3. Hibernate高级应用

    数据模型与领域模型的关系 领域模型是一个分析模型,它帮助需求分析人员.用户认识现实业务的工具,描述的是业务中设计的试题及其相互之间的关系,它是需求分析的产物.领域模型是需求分析人员与用户交流的有力工具 ...

  4. 洛谷 P1829 [国家集训队]Crash的数字表格 / JZPTAB 解题报告

    [国家集训队]Crash的数字表格 / JZPTAB 题意 求\(\sum\limits_{i=1}^n\sum\limits_{j=1}^mlcm(i,j)\),\(n,m\le 10^7\) 鉴于 ...

  5. 【BZOJ 3195 】[Jxoi2012]奇怪的道路 装压dp

    受惯性思维的影响自动把二进制状态认为是连与不连......... 我们这里二进制状态表示的是奇偶,这样的话我们f[i][j][k]表示的就是前i个城市用了j个边他前k个城市的奇偶状态,然后想想怎么转移 ...

  6. Spring源码解析-AOP简单分析

    AOP称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等等,不需要去修改业务相关的代码. 对于这部分内容,同样采用一个简单的例子和源码来说明. 接口 public ...

  7. WCF分布式开发步步为赢(12):WCF事务机制(Transaction)和分布式事务编程

    今天我们继续学习WCF分布式开发步步为赢系列的12节:WCF事务机制(Transaction)和分布式事务编程.众所周知,应用系统开发过程中,事务是一个重要的概念.它是保证数据与服务可靠性的重要机制. ...

  8. poj3133 Manhattan Wiring

    Manhattan Wiring Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 2016   Accepted: 1162 ...

  9. POJ3259:Wormholes(spfa判负环)

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 68097   Accepted: 25374 题目链接: ...

  10. Django随笔 01

    Django 视图 不处理用户输入,而仅仅决定要展现哪些数据给用户: Django 模板 仅仅决定如何展现Django视图指定的数据. dd http://blog.csdn.net/pipisorr ...