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.
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:
