JQ里的this与$(this)
网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象。
$(this)指向jQuery对象是无可厚非的,但this就是指向dom对象,这个是因为jQuery做了特殊的处理。
在创建dom的jQuery对象时,jQuery不仅仅为dom创建一个jQuery对象,而且还将dom存储在所创建对象的数组中。

elem = document.getElementById(match[2]);
if (elem && elem.parentNode) {
this.length = 1;
this[0] = elem;
} this.context = document;
this.selector = selector;
return this;

this[0] = elem这条语句就是实现对象数组。所以javascript是很有意思的语言,使用this访问时,可以访问它所指向的对象的成员函数,而其实this又是一个对象数组。其存放的是dom对象。
先看看 $("p").each() -- 循环
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}
看了each函数的调用大家应该明白,jQuery.each( this, callback, args );调用的是对象数组,而对象的数组存储的是dom对象,因此在callback函数中的this自然是dom对象了
再看看$("p").hide() -- 成员函数

hide: function() {
return showHide( this );
},
function showHide( elements, show ) {var elem, display,
values = [],
index = 0,
length = elements.length;
for ( ; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
values[ index ] = jQuery._data( elem, "olddisplay" );
if ( show ) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if ( !values[ index ] && elem.style.display === "none" ) {
elem.style.display = "";
}
// Set elements which have been overridden with display: none
// in a stylesheet to whatever the default browser style is
// for such an element
if ( elem.style.display === "" && isHidden( elem ) ) {
values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
}
} else {
display = curCSS( elem, "display" );
if ( !values[ index ] && display !== "none" ) {
jQuery._data( elem, "olddisplay", display );
}
}
}
// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
elem.style.display = show ? values[ index ] || "" : "none";
}
}
return elements;
}

从上面的代码可以看出hide行数其实调用的是showHide,而传入的第一个参数this,并不是dom对象,而是jQuery对象数组,因此showHide函数通过循环此对象数组获取每一个dom对象。
最后看看$("p").bind() -- 事件

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
// 此部分代码省略
return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
});
},

bind函数调用的是 on函数,而on函数又是通过 each函数实现了jQuery.event.add。因此 jQuery.event.add( this中的this也就是dom对象了。所以事件中的this也就是dom对象了。
JQ里的this与$(this)的更多相关文章
- jq里attr和prop的区别
jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答 ...
- jq里验证插件的自定义方法Jquery.validator.addMethod()示例
最近写验证的时候感觉原生的验证谢了一遍又一遍,就想到了“不要重复造轮子,学会管理自己的工具库”这句名言,于是尝试用jq的validator. 用过又发现需要自定义方法去验证,于是去查官网,写了Jque ...
- jq里延迟对象Deferred,状态变化后,会一直保持
var defer = $.Deferred(); defer.resolve('abc'); defer.done(function (data) { console.log(data); }) d ...
- 模仿jq里的选择器和color样式
(function(){ HTMLElement.prototype.css = function () { var option; if (arguments.length > 0) { op ...
- jq仿淘宝放大镜插件
html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...
- JQ对象到底是什么
jQuery对象是什么,举个例子,$('#id') 返回的就是jQuery对象,这个东西是整个jQuery的核心所在,所以我先来分析它. var jQuery = function( selector ...
- JQ的基本架构
Jquery的基本架构 引入 以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多 ...
- ASP.NET动态网站制作(12)-- JQ(4)
前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置: (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass( ...
- kubernetes集群管理之通过jq来截取属性
系列目录 首先要声明,这里的jq并不是批前端框架里的jquery,而是一个处理json的命令行工具. jq工具相比yq,它更加成熟,功能也更加强大,主要表现在以下几个方面 支持递归查找(我点对我们平时 ...
随机推荐
- xamarin android 获取根证书代码
Java.Security.KeyStore keyStore = Java.Security.KeyStore.GetInstance("AndroidCAStore"); ke ...
- C# 使用xenocode混淆加密【转】
http://www.cnblogs.com/chendaoyin/archive/2013/05/03/3056692.html 之前就了解过混淆加密工具,但这还是第一次使用,选择了xenoco ...
- NN优化方法对照:梯度下降、随机梯度下降和批量梯度下降
1.前言 这几种方法呢都是在求最优解中常常出现的方法,主要是应用迭代的思想来逼近.在梯度下降算法中.都是环绕下面这个式子展开: 当中在上面的式子中hθ(x)代表.输入为x的时候的其当时θ參数下的输出值 ...
- Frotinet60D IP映射 開放指定端口是實際應用
有多個外網IP的環境中,在某一部電腦上,如何使用多個外網IP中的某一個?且為使用的Bitcomet開放TCP,TUP特定端口? 1.在本機windows防火墻中"輸入" 和&quo ...
- Active Directory虚拟机搭建域控服务器环境
前言 还是和上一章一样,痛苦过后还是记录下给后来人提供便利为妙. 虚拟机选择:建议Hyper-V或者VMware 系统选择:建议WIindows Server 2003及以上 我这里是使用VMware ...
- Python Journey
1. 开发环境搭建 - Eclipse + PyDev搭建开发环境: http://www.cnblogs.com/Bonker/p/3584707.html (其实,如果不是License限制,推荐 ...
- JavaScript+Json写的二级联动
省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...
- linux快捷键及主要命令(转载)
作者:幻影快递Linux小组 翻译 2004-10-05 22:03:01 来自:Linux新手管理员指南(中文版) 5.1 Linux基本的键盘输入快捷键和一些常用命令 5.2 帮助命令 5.3 系 ...
- Linux 中权限的再讨论( 下 )
前言 上篇随笔讲述了Linux中权限的大致实现机制以及目录权限的相关规则.本文将讲解Linux中的三种特殊权限:SUID,SGID,Sticky权限.看完这两篇文章,你一定会对Linux的权限有个更深 ...
- UNIX网络编程卷1 时间获取程序client TCP 使用非堵塞connect
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 1.当在一个非堵塞的 TCP 套接字(可使用 fcntl 把套接字变成非堵塞的)上调用 co ...