jQuery编程开发中的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对象了。
上一篇: 运动神经元病人日常生活需注意四个方面
下一篇: 怎样喝茶有益健康 十个喝茶误区要牢记
推荐阅读
-
JavaScript编程开发中jquery中post方法用法实例教程
-
JavaScript编程开发中jquery.cookie.js使用指南
-
jQuery中的mouseenter和mouseleave事件讲解
-
smarty模板引擎中内建函数if、elseif和else的使用方法
-
JavaScript开发中8个实用的jQuery技巧
-
老生常谈jquery中detach()和remove()的区别
-
jQuery中的read和JavaScript中的onload函数的区别
-
JavaScript编程开发中影响jQuery使用的14个方面
-
jQuery编程开发中$.each使用详解
-
Jquery编程开发中该如何实现弹出层插件