En este tutorial aprenderemos acerca de this una función de JavaScript, que mayormente se usa en conjunto con jQuery mediante el selector $(this), al seleccionar a this lo que se hace es seleccionar al elemento que activo el evento, puede sonar confuso por eso para explicarlo usare un ejemplo sencillo.
Ejemplo
Supongamos que tenemos un documento como este:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Ejmplo This</title>
</head>
<body>
<button>Hazme clic</button>
<button>Hazme clic</button>
<button>Hazme clic</button>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script>
$(function() {
});
</script>
</body>
</html>
Tenemos 3 botones y queremos que cuando se haga clic en cada uno de ellos corra un evento de jQuery, como por ejemplo cambiar el texto que esta dentro, entonces lo común que haríamos seria lo siguiente:
$(function() {
$('button').click( function (){
$('button').text("Hola!");
});
});
Pero si vemos el resultado, notamos que el evento esta afectando a todos los botones:
Para solucionar problemas de este tipo, se usa a this como elemento seleccionado, de esta manera hacemos que el evento corra de forma individual en cada uno de los botones, lo que tendriamos que cambiar en el codigo anterior seria:
$('button').click( function (){
$(this).text("Hola!");
});
Y el resultado:
Lo que hemos hecho es decirle a jQuery que cuando se haga clic en el elemento button corra un evento, pero que este evento corra unicamente en este/this elemento (el elemento que provoco el evento).
Este es solo un ejemplo de los cientos de usos que le podemos dar a this, espero os haya servido este corto tutorial.