手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >详谈jQuery中的this和$(this)
详谈jQuery中的this和$(this)
摘要:网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而...

网上有很多关于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)的理解了,如有什么纰漏,请联系我或者给我留言

【详谈jQuery中的this和$(this)】相关文章:

JavaScript中的unshift()方法的使用

详解JavaScript中的表单验证

AngularJs中route的使用方法和配置

jquery右下角自动弹出可关闭的广告层

详解Javascript中的Object对象

灵活的理解JavaScript中的this指向

浅谈JavaScript中的Math.atan()方法的使用

jQuery替换textarea中换行的方法

JavaScript中的this机制

浅谈jQuery中replace()方法

精品推荐
分类导航