详谈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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
用javascript动态调整iframe高度的代码
Apr 10 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
详解django模板与vue.js冲突问题
Jul 07 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
Extjs入门之动态加载树代码
2010/04/09 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
详解Python中的变量及其命名和打印
2016/03/11 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python 模拟登陆163邮箱
2020/12/15 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
军训自我鉴定
2013/12/14 职场文书
业务部主管岗位职责
2014/01/29 职场文书
幼儿园家长评语
2014/02/10 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
实习生矿工检讨书
2014/10/13 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
大国崛起观后感
2015/06/02 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Vue2.0搭建脚手架
2022/03/13 Vue.js