网上有很多关于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)的更多相关文章

  1. jq里attr和prop的区别

    jquery中attr和prop的区别   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答 ...

  2. jq里验证插件的自定义方法Jquery.validator.addMethod()示例

    最近写验证的时候感觉原生的验证谢了一遍又一遍,就想到了“不要重复造轮子,学会管理自己的工具库”这句名言,于是尝试用jq的validator. 用过又发现需要自定义方法去验证,于是去查官网,写了Jque ...

  3. jq里延迟对象Deferred,状态变化后,会一直保持

    var defer = $.Deferred(); defer.resolve('abc'); defer.done(function (data) { console.log(data); }) d ...

  4. 模仿jq里的选择器和color样式

    (function(){ HTMLElement.prototype.css = function () { var option; if (arguments.length > 0) { op ...

  5. jq仿淘宝放大镜插件

    html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...

  6. JQ对象到底是什么

    jQuery对象是什么,举个例子,$('#id') 返回的就是jQuery对象,这个东西是整个jQuery的核心所在,所以我先来分析它. var jQuery = function( selector ...

  7. JQ的基本架构

    Jquery的基本架构   引入  以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多 ...

  8. ASP.NET动态网站制作(12)-- JQ(4)

    前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置:  (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass( ...

  9. kubernetes集群管理之通过jq来截取属性

    系列目录 首先要声明,这里的jq并不是批前端框架里的jquery,而是一个处理json的命令行工具. jq工具相比yq,它更加成熟,功能也更加强大,主要表现在以下几个方面 支持递归查找(我点对我们平时 ...

随机推荐

  1. vcl.Forms等与VCL界面有关的单元不支持跨平台

    vcl.Forms等与VCL界面有关的单元不支持跨平台 midaslib也不支持

  2. ADO如何记录SQL日志

    ADO如何记录SQL日志 procedure TfrmDM.ADOConnection1WillExecute(Connection: TADOConnection; var CommandText: ...

  3. Solaris 目录与文件管理

    熟悉系统目录结构 掌握27个常用命令 掌握针对目录.文件的操作 掌握查找与文件内容的操作 一.命令 命令:内部命令(不依赖其他文件,可以直接执行)与外部命令 .他是用于实现某一类功能的指令或程序,其执 ...

  4. mysql flush详解

    http://www.cnblogs.com/ggjucheng/archive/2012/11/07/2758021.html   cnblogs - FLUSH TABLES WITH READ ...

  5. Regex 手机号 座机 正則表達式

    近期在工作中须要推断一个号码是否是手机号,是否是座机号. 在网上也搜到了大家总结的方法,没有直接使用这些方法是由于:手机号码在不断開始新的号码段(比方17x).座机号中个别区号由于行政区域的变化而废除 ...

  6. 【软件创意】智能Goals (android)

    智能Goals  软件创意核心思想:实现你的愿望. 功能概要:帮助记录奋斗了的历程.实现你的愿望.可以是跑步减肥,每天阅读,交际,存钱买房.满足各种记录需要,目标可以是完成多长时间,可以用计时器:可以 ...

  7. URL 截取参数 正则

    用处很多,记录下. function getvl(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&am ...

  8. caffe2--ubuntu16.04--14.04--install

    Install Welcome to Caffe2! Get started with deep learning today by following the step by step guide ...

  9. 深入Garbage First垃圾收集器(一)术语

    Garbage垃圾收集器的原理,在这篇博客中有讲到,可以拿来参考下, Getting Started with the G1 Garbage Collector(译) 另外在这篇博客中也有讲到很多垃圾 ...

  10. 发送邮件程序报错454 Authentication failed以及POP3和SMTP简介

    一.发现问题 在测试邮件发送程序的时候,发送给自己的QQ邮箱,程序报错454 Authentication failed, please open smtp flag first. 二.解决问题 进入 ...