jQuery esta palabra clave
-
jQuery
estapalabra clave como elemento DOM -
Use jQuery
estapalabra clave como elemento DOM dentro de una devolución de llamada -
Use jQuery
estapalabra clave como elemento DOM dentro de la devolución de llamada del métodocada () -
Utilice jQuery
estapalabra clave como elemento DOM en el métodoload()de AJAX -
Use jQuery
estapalabra clave como elemento DOM en la devolución de llamada al métodofiltro () -
Use jQuery
estapalabra clave como objeto general -
Use jQuery
estapalabra clave como objeto jQuery dentro de un complemento
La palabra clave jQuery this permite a los desarrolladores usar métodos y propiedades del objeto actual sin realizar nuevas búsquedas o búsquedas. Este tutorial muestra varios casos de uso de la palabra clave this en diferentes contextos.
jQuery esta palabra clave como elemento DOM
El uso más común de la palabra clave jQuery this es cuando se refiere a un elemento DOM. Incluso puede tener una regla general de que, si no está creando específicamente complementos de jQuery, lo más probable es que use este caso de uso.
La palabra clave jQuery this puede confundirlo al principio. jQuery (y otros lenguajes de programación) proporcionan la palabra clave this como una herramienta útil y, en la mayoría de los casos, el valor de la palabra clave this de jQuery es fácil de averiguar: apunta al objeto, clase o entidad que intuitivamente debe referirse a.
Use jQuery esta palabra clave como elemento DOM dentro de una devolución de llamada
La entidad más probable a la que debe hacer referencia el código dentro de su devolución de llamada es el elemento DOM en el que escucha la devolución de llamada. Entonces, jQuery establece la palabra clave this en este caso en el elemento DOM que llama. (Puedes ver que nuestra regla del pulgar funciona bastante bien).
Código - JavaScript + jQuery:
// this as a jQuery DOM button element inside a callback
$("#DOM_button").on("click",function(){
$("p").html(`The value of 'this' keyword inside the DOM button element is ${$(this).attr('id')}`);
//use case - you can deactivate the button easily without another DOM search call
$(this).prop("disabled",true);
});
Código - HTML:
<body>
<div id="triggers">
<!-- Button DOM element -->
<button id="DOM_button">I am a DOM button element</button>
</div>
</body>
Nuestro código registra el valor de la palabra clave this dentro de la devolución de llamada al controlador de eventos click que escucha en el elemento DOM_button. Es posible que desee cambiar algunas propiedades del elemento DOM que escucha el controlador de eventos.
Por ejemplo, deshabilitamos el elemento DOM_button. Este es un caso de uso común de la palabra clave this en este contexto.
Producción:
Use jQuery esta palabra clave como elemento DOM dentro de la devolución de llamada del método cada ()
Cuando itera sobre una colección jQuery con el método cada (), querrá acceder a cada elemento DOM dentro de la devolución de llamada. jQuery establece la palabra clave this dentro de la devolución de llamada del método each al elemento DOM actual.
Código - JavaScript + jQuery:
//this as each DOM element inside a jQuery collection
$("#div_button").on("click",function(){
$("p").html(" ");
$("#div_container>div").each(function(idx){
$("p").append(`The value of 'this' keyword inside child div ${idx + 1} is ${$(this).attr('id')} <br>`);
});
});
Código - HTML:
<body>
<div id="div_container">
<button id="div_button">
"each" Method Demo
</button>
<div id="first_div">
I am the First Div <br>
</div>
<div id="second_div">
I am the Second Div <br>
</div>
<div id="third_div">
I am the Third Div <br>
</div>
</div>
</body>
Producción:
jQuery asigna la palabra clave this al elemento div actual en cada iteración.
Utilice jQuery esta palabra clave como elemento DOM en el método load() de AJAX
Cuando realiza una llamada AJAX con el método load() en jQuery, apunta la palabra clave this dentro de la devolución de llamada al elemento DOM en el que ejecuta el método load().
Nuevamente, el valor de la palabra clave jQuery this está en línea sin la regla del pulgar; en la mayoría de los casos, la palabra clave this apunta al objeto, clase o entidad a la que necesitaría acceder de forma natural.
Código - JavaScript + jQuery:
// //ajax request with the load method
$("#ajax_btn").on("click",function(){
$("#ajax_this").load("http://127.0.0.1:5500/code_files/test.html",
function(){
$("p").html(`The value of 'this' keyword inside the 'load' method to send the AJAX request is ${$(this).attr('id')}`);
//use case - you want to style it when a successful data fetch completes
$(this).css("color","green");
})
});
Ejecutamos el método de carga jQuery AJAX para obtener datos del archivo test.html en el mismo servidor. Enviamos el valor de la palabra clave this dentro de la devolución de llamada al método load(), que se ejecuta cuando se completa la solicitud AJAX.
Código - HTML:
<div id="ajax_this">
<button id="ajax_btn">
AJAX Call Demo
</button><br>
<br>
<div id="ajax_text">
I demo the use of this as DOM element with an AJAX call
</div>
</div>
Producción:
Un caso de uso común es cuando queremos codificar con color la salida en verde en una llamada AJAX exitosa. Por ejemplo, en nuestra demostración de salida anterior, mostramos la salida en verde.
En este ejemplo, hicimos una llamada AJAX al recurso test.html en el mismo servidor.
Código - prueba.html:
<title>Test HTML Page</title>
</head>
<body>
<div id="main">
<div id="top">
<h3>
We dish out a test page for our AJAX request on localhost.
</h3>
</div>
<div id="mid">
<h3>
The request completes and returns the data that displays on the page.
</h3>
</div>
</div>
</body>
</html>
Use jQuery esta palabra clave como elemento DOM en la devolución de llamada al método filtro ()
Cuando usa el método filter() en una colección jQuery para seleccionar un subconjunto, desea acceder rápidamente al elemento DOM actual en la colección en cada iteración. jQuery establece la palabra clave this dentro de la devolución de llamada al método filter al elemento actual.
La palabra clave este se refiere al objeto que más intuitivamente esperamos que sea.
Código - JavaScript + jQuery:
//this as the current DOM element inside the filter function in each iteration
$("#filter_this").on("click",function(){
let $filterSet = $("div").filter(function(){
return $(this).attr("id") == "selection_filter_this";
});
$("p").html(`The filtered set of div elements with the use of 'this' keyword are those with ID = : ${$filterSet.first().attr('id')}`);
});
Código - HTML:
<body>
<div id="selection_filter_this">
<div id="filter_text">
I demo the use of this as DOM element with a selector filter
</div>
<button id="filter_this">
This keyword with the filter method
</button>
</div>
</body>
Producción:
Vemos que filtramos los elementos div para seleccionar solo aquellos que coincidan con el ID, selection_filter_this con la palabra clave this en la devolución de llamada. Luego mostramos la ID del elemento filtrado.
Use jQuery esta palabra clave como objeto general
Los métodos jQuery como el método each() pueden iterar sobre cualquier objeto similar a una matriz. No solo se limitan a recorrer elementos DOM.
Si usamos un método jQuery como each() para recorrer cualquier estructura similar a una matriz, naturalmente necesitaríamos acceso a la entidad actual en la iteración. Entonces, jQuery establece la palabra clave this en el objeto actual en tales situaciones.
Código - JavaScript + jQuery:
// this as the current object in each iteration of the 'each' method
let objEachArr = ["First","Second","Third"];
$('#object_each_btn').on("click",function(){
$("p").html("");
$.each(objEachArr,function(curr){
$("p").append(`The value of 'this' keyword in the current iteration of the 'each' method is ${this} <br><br>`);
});
});
Código - HTML:
<body>
<div id="object_each_div">
<div id="object_each_text">
I demo the use of 'this' as the current object in every iteration of the 'each' method.
</div>
<button id="object_each_btn">
'This' in 'each' Method
</button>
</div>
<div id="results">
<p>
We will display the results here.
</p>
</div>
</body>
Enviamos el valor de la palabra clave this en cada iteración del método each sobre la matriz objEachArr.
Producción:
Vemos que la palabra clave this se refiere al elemento de matriz actual en cada iteración del método each().
Use jQuery esta palabra clave como objeto jQuery dentro de un complemento
Hay un caso especial para la palabra clave this de jQuery. Cuando usamos la palabra clave this dentro de un complemento, se refiere al objeto jQuery.
Código - JavaScript + jQuery:
/this as the jQuery Object inside a jQuery Plug-In
$.fn.plugInDemo = function(){
this.html(`The 'this' keyword inside my plug-in is the jQuery Object and we output the jQuery Version
from this jQuery Object : ${this.jquery}`);
return this;
};
$("#plugin_btn").on("click",function(){
$("p").plugInDemo();
});
Código - HTML:
<body>
<div id="plugin_div">
<div id="plugin_text">
I demo the use of 'this' inside a jQuery Plugin.
</div>
<button id="plugin_btn">
'This' inside a Plug-In
</button>
</div>
<div id="results">
<p>
We will display the results here.
</p>
</div>
</body>
Generamos la versión de jQuery accediendo al objeto jQuery a través de la palabra clave this dentro de nuestra función de complemento simple plugInDemo.
Producción:
La palabra clave this de jQuery es una herramienta poderosa para acceder rápidamente al objeto, la clase o la entidad actual sin realizar búsquedas DOM nuevas y es un excelente método para aumentar el rendimiento de la aplicación.