详谈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动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
javascript实现Table排序的方法
May 15 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
详解Angular2响应式表单
Jun 14 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
一个简易需要注册的留言版程序
2006/10/09 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
js中判断控件是否存在
2010/08/25 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
Vuex提升学习篇
2018/01/11 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python dict remove数组删除(del,pop)
2013/03/24 Python
python显示生日是星期几的方法
2015/05/27 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
安装python及pycharm的教程图解
2019/10/10 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
论文评语大全
2014/04/29 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书