Resposta curta
Dentro de um event handler (ex.: a função fn
em $(...).click(fn)
) o this
se refere a um elemento do DOM. Isso significa que a maneira mais direta - e mais performática - de se atuar sobre esse elemento é chamando métodos nele próprio:
var id = this.id;
if ( (" " + this.className + " ").replace(/[\n\t]/g, " ").indexOf("minhaClasse") > -1 ) {
var p = document.createElement("p");
p.innerHTML = "Olá, Mundo!";
this.appendChild(p);
}
O uso de $(this)
encasula (wraps) esse elemento em um objeto jQuery, permitindo que você use as diversas funções disponibilizadas por essa biblioteca e seus plugins. É um pouco menos eficiente, porém muitas vezes bem mais conveniente:
var id = $(this).prop("id");
if ( $(this).hasClass("minhaClasse") )
$(this).append("<p>Olá, Mundo!</p>");
Já o $this
é uma variável comum, sem nada de especial. Muitas vezes convenciona-se esse nome para o objeto jQuery contendo o this
, e seu principal uso é para se evitar repetir o $(this)
diversas vezes (o que traz um certo overhead desnecessário):
var id = this.id;
var $this = $(this); // Poderia ser "var elefante = $(this);" tanto faz...
if ( $this.hasClass("minhaClasse") )
$this.append("<p>Olá, Mundo!</p>");
Resposta completa
Um "objeto jQuery" é um wrapper ("envelope"?) sobre uma lista de objetos. Foi criado com a intenção de ser usado com elementos do DOM, mas a princípio pode-se encapsular qualquer coisa nele:
$([1,2,3]).each(function() { /* aqui o "this" é um elemento da lista */ });
$(); // Vazio
$(el); // Um elemento
$([el1, el2, el3]); // Vários elementos
$(strSeletor); // zero, um ou vários elementos (depende do que o seletor "pegar")
Dado um objeto jQuery, pode-se descobrir quantos elementos ele possui usando length
, e acessar qualquer elemento individual usando [indice]
. Ou seja, ele se comporta como se fosse um array (i.e. é um "array-like").
var $els = $([el1, el2, el3]);
$els.length; // 3
$els[1]; // el2
Quando você usa $(...).each(fn)
, ele chama a função fn
usando cada elemento individual a ser percorrido como o contexto da função (i.e. o this
). Por isso, se seu objeto jQuery possui uma lista de elementos, a cada iteração do loop o this
será um elemento "cru".
E por que isso é relevante? Simples: toda função que atua num objeto jQuery - funções essas que você pode encontrar em $.fn
- recebe como contexto o próprio objeto jQuery, e então decide o que fazer com ele:
$.fn.meuPlugin = function() {
var $this = this; // Aqui this já é um objeto jQuery
};
Em geral, as funções mais comuns que conhecemos fazem das duas uma: ou obtém um valor do primeiro elemento, ou atribuem um valor a todos os elementos:
$.fn.meuPlugin = function(argumentoOpcional) {
if ( argumentoOpcional === undefined ) { // get
return this[0].umValor;
}
else { // set
return this.each(function() { // O this aqui fora é um objeto jQuery
this.umValor = argumentoOpcional; // O this aqui dentro é um elemento individual
});
}
};
$(meuSeletor).meuPlugin(); // Obtém o valor do primeiro elemento encontrado
$(meuSeletor).meuPlugin(42); // Atribui o valor 42 a todos os elementos encontrados
Por conta disso - pelo fato dos plugins fazerem uso comum de each
ou map
- é que as funções que passamos como argumento para esses plugins normalmente recebem o elemento cru como contexto. Essa organização permite que uma mesma função trabalhe sem distinção entre zero, um, ou vários elementos - simplificando o código para o usuário final.