[原创]jQuery的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对象了。
[原创]jQuery的this和$(this)的更多相关文章
- [原创]Mac系统下制作OS 10.11安装镜像
一.所需软件 1.从App Store下载OS X El Capitan 10.11.2 ------------------------------------------------------- ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- [原创]mac终端前面的计算机名怎么改??
1.修改-之前的名称 mac环境,系统 OS X Yisemite,打开终端, 执行下面命令“Tmp”是你想要改的电脑名称 sudo scutil --set HostName Tmp 执行前,执行后 ...
- [原创]如何编写多个阻塞队列连接下的多生产者多消费者的Python程序
平常在写程序时,往往会遇到一个需求:在程序的多个阶段都会出现阻塞的可能,因此,这多个阶段就需要并发执行. Python的多线程有一个特点,就是不允许从外部结束一个运行中的线程,这给我们编写代码时带来了 ...
- [原创]阿里云RocketMQ踩过的哪些坑
由于公司的最近开始使用RocketMQ来做支付业务处理, 便开启了学习阿里云RocketMQ的学习与实践之路, 其中踩了不少的坑, 大部份是由于没有仔细查看阿里云的技术文档而踩的坑. 但是有一个非常大 ...
- [原创]delphi在win7下创建共享文件夹源代码
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- [干货]2017已来,最全面试总结——这些Android面试题你一定需要
地址.http://blog.csdn.net/xhmj12/article/details/54730883 相关阅读: 吊炸天!74款APP完整源码! [干货精品,值得收藏]超全的一线互联 ...
- [VS]VS2017 安装ReportDesigner/ReportViewer的方法
原文:[VS]VS2017 安装ReportDesigner/ReportViewer的方法 解决安装完VS2017后,无法用ReportDesigner/ReportViewer打开.rdlc文件V ...
- [caffe]linux下安装caffe(无cuda)以及python接口
昨天在mac上折腾了一天都没有安装成功,晚上在mac上装了一个ParallelDesktop虚拟机,然后装了linux,十分钟就安装好了,我也是醉了=.= 主要过程稍微记录一下: 1.安装BLAS s ...
随机推荐
- c#中const、static、readonly的区别
1. const与readonly const ,其修饰的字段只能在自身声明时初始化. Readonly 是只读变量,属于运行时变量,可以在类初始化的时候改变它的值.该类型的字段,可以在声明或构造函数 ...
- mysql 用户名密码登陆不上
问题1:刚安装完mysql,设置了用户名密码root,登陆OK的,后来再连怎么也连不上了 操作步骤: 输入:mysql -uroot -proot 提示:ERROR 1045 (28000): Acc ...
- (转) SQL 命令
省的自己总结了 1.终端启动MySQL:/etc/init.d/mysql start:(stop ,restart.)2.登录MySQL:mysql -uroot -p (用root账户登录),然后 ...
- Cocos2d-android (02) 添加一个精灵对象
什么是精灵: 1.精灵就是游戏当中的一个元素,通常用于代表画面当前中的一个事物,例如主人公,NPC和背景元素等: 2.一个精灵对象通常都与一张图片关联 3.精灵对象可以通过动作对象(CCAction) ...
- JDBC项目实践
这几天学习了JDBC的接口,从简单的连接,到不断地对JDBC的代码进行优化,最后到实体类,DAO类的设计,现在对这几天所学做一个总结: 首先是软件的系统组成: 数据库中有很多的表:Customer,D ...
- 从四大音乐APP首页设计对比分析产品方向
原帖:http://www.ui.cn/detail/63201.html 本文章中作者例举四个音乐APP应用:虾米.网易.百度.QQ首页 1. 推荐内容:作者将四个首页界面划分出官方推荐与个性化推荐 ...
- Embedded之memory test
1 main.c #include "led.h" #define BASE_ADDRESS (volatile datum *) 0x10000000 #define NUM_B ...
- [TL-WR841N V5~V9] 如何当作无线交换机使用?
http://service.tp-link.com.cn/detail_article_1034.html
- [WebService]之TCPMon的使用
TCPMon是apache下的一个项目,下载地址:http://ws.apache.org/commons/tcpmon/download.cgi (1)功能: TCPMon可以拦截客户与服务之间的H ...
- Hadoop2.2.0 自动切换HA环境搭建
自动切换的HA,比手动切换HA集群多了一个zookeeper集群 机器分配: zookeeper:hadoop4,hadoop5,hadoop6 namenode:hadoop4,hadoop5 da ...