在jQuery插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 但是在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中。可以看下面的例子:
<div class="content" style="background:#ff50000"></div>
<div class="box">hello world<div class=""inner></div></div>
html代码结构如上，然后写一个非常简单的插件，用于输出最高的div的高度值。
js代码是这样的：
(function ($) {
$.fn.maxheight = function(){
//在插件范围内，this指的是jquery插件将要执行的对象。并不是原生的dom元素，
//因此，直接用this即可，不需要用$(this).
var max = 0;
console.log(this);//此处this指的是要遍历的jquery对象集合
this.each(function(){
console.log(this);//此处this指的是dom元素,即要遍历的每一个dom元素。
//this->$(this) : DOM对象封装成Jquery对象
max = Math.max(max,$(this).height());//所以这里要使用$选取dom元素。
});
return max;
}
})(jQuery);
var maxheight = $("div").maxheight();
console.log(maxheight);
根据结果可以知道，第一个this指的是jquery对象，而在return this.each()中，this指的是div元素，所以必须使用$将this包裹起来，选取dom元素，再进行操作。
注：
1. 此处说的this与当前调用的作用域有关。在全局变量下，this指向windows变量;在局部变量下，this指向你所调用的当前对象。
关于$(this)和this, 你关键还是要知道this表示的是什么, 如果this是一个dom元素, 那么$(this)是一个jquery元素, 如果this是一个jquery元素, 那么$(this)还是一个jquery元素, 虽然你用==去判断两者是不同的, 但是他们内容都是一样的, 这是我的经验, 我并没有去深入看过源码, jquery的api中似乎也没有说这个.
关于this和$(this)还要注意一点$('.abc').click(function(){});中this是dom元素, $(this)是jquery元素, 而写插件的时候, 由于是扩展prototype, 所以this就是对象实例, 即this就是jquery对象, $(this)还是jquery对象, 他们虽然不是同一对象, 但是内容是完全相同的
转自http://www.cnblogs.com/wayofeng/p/5701878.html
网友评论