JQuery中的特殊选择器--this
来源:互联网 发布:东北云计算 编辑:程序博客网 时间:2024/06/01 15:54
相信很多刚接触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 0
- JQuery中的特殊选择器--this
- jQuery选择器之特殊选择器this
- jQuery选择器之特殊选择器this
- jQuery选择器中的特殊字符处理
- 【整理】特殊选择器this
- Jquery选择器特殊用法
- jQuery选择器this的问题
- JQuery ID选择器中的不能包含特殊字符(=,@ etc.)
- JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法
- JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法
- JQuery中的id选择器含有特殊字符时,不能选中dom元素!
- jquery中的层次选择器
- jquery中的基本选择器
- jquery中的表单选择器
- JQuery中的选择器
- jquery中的选择器简介
- jquery中的选择器简介
- Jquery中的选择器
- 计算机内存中的堆与栈
- 导数与微积分初步
- 记录下:解决fatal error: sqlite3.h: No such file or directory
- Oracle 自增长主键 三种方式
- ip拨号器
- JQuery中的特殊选择器--this
- 四旋翼飞行器的姿态解算小知识点
- 柔弱的APP如何自我保护,浅谈APP防御手段,使用360加固助手加固/签名/多渠道打包/应用市场发布
- MFC绘图(转载)
- Linux——》SVN安装
- Java基础练习2之用集合写员工管理系统
- 设计模式系列之单例模式
- POJ2559Largest Rectangle in a Histogram
- Linux——》redis安装