什么时候在 jQuery 插件中使用 '$(this)' 和 'this'？（net.tutsplus.com 上的文章）答案

【问题标题】：When to use '$(this)' and 'this' in a jQuery plugin? (Article on net.tutsplus.com)什么时候在 jQuery 插件中使用 '$(this)' 和 'this'？（net.tutsplus.com 上的文章）
【发布时间】：2009-07-24 00:06:16
【问题描述】：

我现在正在学习 jQuery，正在阅读 Jeffrey Way 的一篇文章，"You Still Can’t Create a jQuery Plugin?" 几乎一切都清楚了，但有些地方我仍然无法理解。

问题从“第 3 步：构建插件”开始，标题为“For Each...”，然后是“错误检查”。

   this.each(function() {  
     $this = $(this);
     var title = this.title; 
     if ($this.is('a') && $this.attr('title') != '') {  
       this.title = '';  
       $this.hover(function(e){

问题

this.title - 这是什么方法？当我们使用 jQuery 时，我们输入 $(this).attr('title') - 创建 jQuery 是为了简化开发） this.title 是指 DOM 规范还是 Javascript 内置方法？
我完全无法理解这里的this 关键字是怎么回事，我们什么时候必须使用this，什么时候必须使用$(this)？为什么我们使用this.each(func...，而不是$(this).each(func...？（我已经测试过了——它也可以工作，但有什么区别？）我知道工厂方法$()返回一组包装的DOM元素，但是为什么我们在这里使用this.title（又是$(this).attr('title')做这项工作）？我做了一点测试。我们可以在条件语句中键入this.title 或title 而不是$this.attr('title')，但只要我们在语句this.title = ''; 中使用任何东西（title 或$(this).attr('title')）而不是this.title - 它不会'没用。
好吧，我们指定了var title = this.title;。但是我们在使用这个变量的时候，为什么要声明呢？

我认为你们中的一些人甚至比我更了解，了解我需要什么，所以我完成了我的解释）非常非常感谢，如果你能说清楚）

【问题讨论】：

标签： jquery plugins jquery-plugins coding-style

【解决方案1】：

在each() 函数中，this 参数是被迭代的项目。当迭代 DOM 元素的集合时，this 将是一个 DOM 元素。如果你想在 DOM 元素上使用 jQuery 函数，你需要再次将它们包装在 jQuery 中，这意味着你需要使用 $(this).doAwesomeness()
var title 可能正在嵌套在 $this.hover() 内的函数中使用

【讨论】：

抱歉，您可能弄错了，据我所知，没有 title() 方法。你的意思是，$(grabAwesomeness).attr('title', setValue)。请您告诉我们可以直接操作哪些属性，任何属性？我必须重新阅读“DOM 脚本”吗？ ))
对不起，我是在今天早上喝咖啡之前写的。我的意思是.attr('title')。是的，它可以从 jQuery 的 DOM 元素或 DOM 元素集合中操作或检索任何属性。
我想写一些关于你在第 1 段中所说的内容的 cmets：通过使用这个关键字，我们还能够操作包装集中的所有元素。但是如果我们想要（正如你在第 2 段中所说的）在包装集上使用 jQuery 函数，我们应该使用 $(this)。我的观点正确吗？
但是我们仍然可以使用 this.each(function() {})，但是 .each(function() {}) 是 jQuery 的函数。不，我还不清楚。

【解决方案2】：

正如您自己所说的，$() 函数返回一组包装的 DOM 元素，向其中添加了 jquery 功能。 $(this).attr('title') 不会换成 this.title 的原因是因为该函数的正确使用方式是这样的

$(this).attr( 'title', '' );

而不是

$(this).attr( 'title' ) = '';

你也不能使用 title = '' 因为 title 是一个局部变量而不是对属性本身的引用。

【讨论】：

谢谢）请您解释一下：'title 是一个局部变量，不是对属性本身的引用' 但我可以输入 if (... && title != '' ) { 并且代码将正常工作。那么，这是什么意思呢？
当你去“var title = this.title;”您正在使用该时间点的 this.title 的值创建一个局部变量。如果您更改 this.title，它不会更改标题，如果您更改标题，它不会更改 this.title。 Title 只是与 this.title 保持相同的值，因为你告诉它。

【解决方案3】：

this.title 是纯 JS DOM 中对象的标题属性。 (http://w3schools.com/htmldom/prop_title.asp)。

以下与jQuery和普通JS等价：

 var  blah = this.title;  // is the same as...
 var  blah = $(this).attr('title');

 this.title = 'blah';     // is the same as ...
 $(this).attr('title', 'blah');

这是一个指向触发事件的对象或您正在运行的方法所属的对象，JavaScript 中的所有方法都属于某种父对象。
$(object) 会将 jQuery 包装器附加到标准对象（让您可以访问该对象上的所有 jQuery 方法/等）

【讨论】：