2.1 El selector $(this).

Para hacer referencia al elemento sobre el cual se esta llevando a cabo un evento, pero sin usar  un selector largo y complejo podemos usar el selector $(this). Para ilustrar un poco mejor su funcionamiento vamos a ver el siguiente ejemplo.Supongamos que tenemos un campo de texto con una clase “campoTexto”  el cual se encuentra ubicado dentro de un div con la clase “contenedor” y este último a la vez se encuentra dentro de un div con la clase “encabezado”, de tal forma que el código HTML sería el siguiente:

<div class=”encabezado”>
    <div class=”contenedor”>
      <form>
     <input type=”text” size=”30” class=”campoTexto”/>
     </form>
      </div>
</div>

Ahora supongamos que deseamos que cada vez que el usuario introduzca un carácter en el campo de texto, deseamos que se muestren todos los caracteres en el campo de texto en una ventana emergente, entonces el código en Jquery sería el siguiente:

$(document).ready(function(){
       $(“.encabezado .contenedor .campoTexto”).keypress(function(){
                 var cadenaTexto=$(.encabezado .contenedor .campoTexto).attr(“value”);
                   alert(cadenaTexto);
       });
});

Como podemos ver en la variable cadenaTexto se han guardado todos los caracteres, que hasta ese momento, están dentro del campo de texto y podemos observar  que para hacer referencia al campo de texto hemos usado el selector  $(.encabezado .contenedor .campoTexto), sin embargo también podemos usar $(this) para hacer referencia al campo de texto, y el código quedaría como sigue:

$(document).ready(function(){
       $(“.encabezado .contenedor .campoTexto”).keypress(function(){
                 var cadenaTexto=$(this).attr(“value”);
                   alert(cadenaTexto);
       });
});

De tal forma que podemos concluir que el selector $(this) sirve para hacer referencia al elementos de la página web sobre el cual se esta aplicando un evento en un momento determinado.