详谈jQuery中的this和$(this)


Posted in Javascript onNovember 13, 2014

网上有很多关于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)的理解了,如有什么纰漏,请联系我或者给我留言

Javascript 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JavaScript Date对象应用实例分享
Oct 30 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 #Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 #Javascript
Javascript window对象详解
Nov 12 #Javascript
a标签的href与onclick事件的区别详解
Nov 12 #Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 #Javascript
JavaScript实现关键字高亮功能
Nov 12 #Javascript
javascript的函数作用域
Nov 12 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php实现监听事件
2013/11/06 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
jQuery treeview树形结构应用
2021/03/24 jQuery
教师通用专业自荐书范文
2014/02/11 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
社区创先争优承诺书
2014/08/30 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
导游词之阆中古城
2019/12/23 职场文书
mysql sql常用语句大全
2022/06/21 MySQL