详谈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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
1.PHP简介
2006/10/09 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
解析php中反射的应用
2013/06/18 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
一道python走迷宫算法题
2018/01/22 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
django 控制页面跳转的例子
2019/08/06 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
艺术用品:Arteza
2018/11/25 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
大学学习个人的自我评价
2014/02/18 职场文书
幼儿园小班评语
2014/04/18 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
php字符串倒叙
2021/04/01 PHP
HAM-2000摩机图
2021/04/22 无线电
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
Python装饰器详细介绍
2022/03/25 Python