详谈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 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jquery预加载图片的方法
May 27 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
JSONP基础知识详解
2017/03/19 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
K-近邻算法的python实现代码分享
2017/12/09 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
委托书模板
2014/04/04 职场文书
餐厅筹备计划书
2014/04/25 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
法制教育主题班会
2015/08/13 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
python基于turtle绘制几何图形
2021/06/15 Python