En este artículo, aprenderemos la diferencia entre this y $(this) en jQuery.
esta palabra clave : en JavaScript, esta palabra clave se usa para referirse al objeto al que pertenece. esto esto
Ejemplo 1: Usaremos esto en un método de objeto que se refiere al propietario del objeto.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p>The object's value for name: </p>
<p id="paraID"></p>
<script>
const obj = {
name: "hrithik",
roll: 36,
mydata: function () {
return this.name;
}
}
document.getElementById("paraID")
.innerHTML = obj.mydata();
</script>
</body>
</html>
Producción:
The object's value for name: hrithik
Ejemplo 2: Usaremos esta palabra clave en los controladores de eventos que se refieren al elemento en el que se llama al evento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p id="clickme">
<b> Click this to change color.</b> <br>
</p>
<script>
$("#clickme").click(function () {
this.style.color = "green"
})
</script>
</body>
</html>
Producción:
$(this): También se refiere al objeto al que pertenece. Básicamente, ambos son iguales. Pero cuando esta palabra clave se usa dentro de $(), se convierte en un objeto jQuery y ahora podemos usar todas las propiedades de jQuery en este método.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<b>
<p>Click to change color</p>
</b>
<p>GeekForGeeks</p>
<script>
$("p").click(function () {
$(this).css("color", "red");
});
</script>
</body>
</html>
Producción:
Diferencia entre esto y $(este)
Esta palabra clave es una referencia a los elementos DOM de invocación. Podemos llamar a todos los métodos DOM en él. $() es un constructor de jQuery y en $(this) , solo lo estamos pasando como un parámetro para que podamos usar la función y los métodos de jQuery.
Ejemplo 1: el siguiente código no funcionará porque estamos llamando a un método jQuery en un elemento DOM. Consulte la salida para una mejor comprensión. El ocultamiento no sucede.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p class="div1">
Hello
</p>
<script>
$(".div1").click(function ()
{
// this refers to the DOM element
// so the following line would fail
this.hide();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este código funciona bien porque lo implementamos en $() y ahora se convierte en un objeto jQuery.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p class="div1">
Hello
</p>
<script>
$(".div1").click(function () {
// this refers to the DOM element
//so the following line would fail
$(this).hide();
});
</script>
</body>
</html>
Producción:
Diferencia entre esto y $(este)
|
este |
$(esto) |
|---|---|
| Se refiere a elementos DOM. | También se refiere a elementos DOM. |
| esto se usa de forma nativa. | esto se pone en $(), se convierte en un objeto jQuery. |
| Podemos llamar a todos los métodos DOM pero no a los métodos jQuery. | Podemos llamar a todos los métodos y funciones de jQuery, pero no a los métodos DOM. |
| esto solo tiene una funcionalidad genérica de JavaScript. | Al usar $(this) , habilitó la funcionalidad jQuery para el objeto. |
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA