En la entrada Jquery anterior veíamos como habilitar nuestra web usar jQuery en ella, en esta entrada vamos a ver cómo podemos acceder desde jQuery a los diferentes elementos de nuestra web.

Jquery y la programacion

Una vez que hemos seguido la entrada anterior ya solo nos queda empezar a utilizar jQuery en nuestra web. Todas las prueba que vamos a realizar las meteremos dentro de la función “$(document).ready(function){“.

Podemos acceder a cada uno de los componentes de nuestra web usando el atributo que le define, por ejemplo si queremos acceder a los enlaces usaremos $(“a”), si queremos acceder a los párrafos $(“p”) y así con todos los componentes, por ejemplo si queremos que todos los párrafos tengan color rojo, y todos los enlaces tengan color verde, fondo rojo y texto tamaño 20, usaremos un código similar al siguiente, el cual cambiara los estilos de los párrafos y los vínculos:

$("p").css("color","#ff0000");
$("a").css({color:"#00ff00",
	  "background-color":"#ff0000",
	  "font-size":"20px"});

Si nos fijamos la primera línea cambia solo un estilo con lo que basta con ponerlo entre los paréntesis indicando el estilo y el valor del estilo, en la segunda línea es en la que indicamos el nuevo estilo para el enlace, en este caso vamos a cambiar varias propiedades css con lo que utilizamos una llave para indicar cuales son las propiedades que vamos a cambiar, indicando la propiedad: y el nuevo valor.

Si bien esta es una opción también podemos utilizar las funciones addClass(nombreclase) y removeClass(nombreclase) para añadir o quitar estilos a los componentes de mi web, pero antes tendríamos que definir la clase que queremos añadir y quitar. Pudiendo ser un ejemplo el siguiente

<style type="text/css">
.estilocss {
    font-weight: bold;
    color: #0C0;
    background-color: #CF0;
}
</style>
<body>
    
<script type="text/javascript">
$(document).ready(function(){
 	$("a").addClass("estilocss");
});	
</script>
</body>

En este caso hemos añadido la clase  estilocss a todos los enlaces.

Si bien esta es una forma de acceder a los componentes de mi web, no es la más idónea debido a que cambia todo sin hacer distinción, si queremos cambiar un enlace solo o un párrafo o una capa entonces este debería tener definida o una clase o un id para poder acceder a él, si tenemos definida una clase accederíamos mediante $(“.nombreclase“) y si tenemos un id mediante $(“#nombreid“), por ejemplo si quiero cambiar solo un párrafo lo haríamos de forma similar a la siguiente:

<p class="parrafo">Esto es una prueba</p>
<script type="text/javascript">
$(document).ready(function(){
     $(".parrafo").addClass("estilocss");
});	
</script>

Podéis ver un ejemplo aquí debajo:

 

Pin It on Pinterest