determinar $ (esto) en jquery

Question

Un problema común que tengo es confundirme a qué se refiere $ (esto).

A menudo intentaré darle un estilo extraño:

$(this).css("border","10px solid red")

Lo que a veces ayuda.

Sin embargo, estoy perplejo con lo siguiente. Mi pregunta puede ser respondida de dos maneras:

1) ¿hay una manera universal de 'ver' a qué se refiere $ (esto) en una situación dada? ¿Quizás en combinación con Firebug?

2) más específicamente, ¿alguna idea de a qué $ (esto) debería referirse en este ejemplo a continuación? Supuse que habría sido la entrada con una clase de btnSave, pero no parece ser:

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel();
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Answer 1

1) Usa la consola en Firebug:

var obj = $(this);
console.log(obj);

2) savePanel () no tendrá el contexto correcto para usar $ (this). Podrías probar:

$(ajaxContainer).find("input.btnSave").click(function(){
    $(this).css("border", "10px solid red");
});

Answer 2

Primera pregunta (usando Firebug):

1. Coloque un punto de interrupción en algún lugar del contexto que desea investigar (por ejemplo, dentro de savePanel() en su ejemplo).
2. Cuando su aplicación llegue al punto de interrupción, agregue $(this) al panel de vigilancia y amplíelo para ver sus propiedades.
3. La primera propiedad debe ser "0", que corresponde al primer nodo DOM que coincide con el objeto jQuery (en este caso, this).
4. Si coloca el cursor sobre el valor de <input />, Firebug resaltará ese nodo DOM en la página. Si hace clic en el valor, Firebug cambiará a la pestaña HTML y se desplazará a ese elemento.

Segunda pregunta:

• Dentro de su función anónima, window se referirá al elemento <=>.
• Dentro de <=>, <=> se referirá al objeto <=>.

Si desea que <=> tenga acceso al elemento <=>, hay varias formas de hacerlo. Lo más simple en su caso sería pasarlo desde la función anónima:

$(ajaxContainer).find("input.btnSave").click(function(){
  savePanel($(this));
});

function savePanel(inputElement) {
  inputElement.css("border","10px solid red");
}

Answer 3

En su ejemplo de código, se encuentra con un problema clásico de JavaScript con un contexto perdido para esto , ya que llamar a otra función desde una función anónima perderá el contexto desde la función anónima ( lea más sobre esto aquí ). Cuando se llama a savePanel como lo hace, esto se referirá al objeto de la ventana. Puede mantener el contexto de this , desde el controlador de eventos, utilizando llamar o aplicar al delegar el método:

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.call(this);
});

// OR

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.apply(this, arguments);
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Answer 4

" esto " Este javascript es a menudo una fuente de confusión, porque se parece sintácticamente a una variable y, por lo tanto, implica la idea de pasarlo. En realidad, & Quot; esto & Quot; es más como una función y siempre devuelve el contexto de ejecución actual, es decir, el contexto para el que se llamó o se aplicó la función actual.

Si no me equivoco, jquery intenta ejecutar una devolución de llamada en el contexto en que se llamó la carpeta de devolución de llamada, es decir

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })