详谈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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
vue实现微信分享功能
Nov 28 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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使用Imagick生成图片的方法
2015/07/31 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
JS Timing
2007/04/21 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python处理csv数据的方法
2015/03/11 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Django的信号机制详解
2017/05/05 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python ubplot使用方法解析
2020/01/10 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
艺术用品:Arteza
2018/11/25 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
公司承诺书怎么写
2014/05/24 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
高中政治教师教学反思
2016/02/23 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
mysql查找连续出现n次以上的数字
2022/05/11 MySQL