La libreria jQuery soporta casi todos los selectores incluidos en Cascade Style Sheet (CSS) las especificaciones de la 1 a la 3 como se indica en el sitio de la World Wide Web Consortium. Con el uso de la libreria jQuery puede mejorar sus sitios web sin tener que preocuparse acerca de los navegadores y sus versiones, siempre que los navegadores tengan habilitado javascript. La mayoria de los metodos jQuery CSS no modifican el contenido del objeto y se utilizan para aplicar las propiedades CSS en los elementos DOM.
Aplicar propiedades CSS
Es muy facil aplicar cualquier propiedad CSS utilizando el metodo de jQuery css(propiedadNombre, propiedadValor), aqui esta la sintaxis del metodo:
selector.css(propiedadNombre, propiedadValor);
Aqui puede pasar propiedadNombre como una cadena javascript y en funcion de su valor, propiedadValor podria ser una cadena o un entero.
Ejemplo:
A continuacion se presenta un ejemplo que añade color de fuente para el segundo elemento de la lista.
<html>
<head>
<title>El ejemplo de jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(1).css("color","red");
});
</script>
</head>
<body>
<div>
<ul>
<li>Elemento 1 de la lista</li>
<li>Elemento 2 de la lista</li>
<li>Elemento 3 de la lista</li>
<li>Elemento 4 de la lista</li>
<li>Elemento 5 de la lista</li>
<li>Elemento 6 de la lista</li>
</ul>
</div>
</body>
</html>
Aplicar multiples propiedades de CSS
Puede aplicar multiples propiedades CSS utilizando un unico metodo css de jQuery css({clave:valor,clave:valor,clave:valor...}). Puede aplicar tantas propiedades como desee en una sola llamada. Aqui es la sintaxis del metodo:
selector.css({clave:valor,clave:valor,claveN:valorN})
Aqui puede pasar la clave y el valor como se describio anteriormente. Ejemplo: A continuacion se presenta un ejemplo que añade un color de la fuente, asi como el color de fondo al segundo elemento de la lista.
<html>
<head>
<title>El ejemplo de jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(1).css({"color":"red","background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>Elemento 1 de la lista</li>
<li>Elemento 2 de la lista</li>
<li>Elemento 3 de la lista</li>
<li>Elemento 4 de la lista</li>
<li>Elemento 5 de la lista</li>
<li>Elemento 6 de la lista</li>
</ul>
</div>
</body>
</html>
Estableciendo el ancho y alto de un elemento
Los metodos width(val) y height(val) pueden utilizarse para establecer la anchura y altura, respectivamente de cualquier elemento, ejemplo: A continuacion se presenta un ejemplo sencillo que define la anchura del primer elemento de division en la que el resto de los elementos su ancho ha sido establecido por la hoja de estilos css.
<html>
<head>
<title>El ejemplo de jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:first").width(100);
$("div:first").css("background-color","blue");
});
</script>
<style type="text/css">
div{
width: 70px;
height: 50px;
float: left;
margin: 5px;
background: red;
cursor: pointer;
}
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>
jQuery metodos CSS
Siguiendo la lista de la tabla de abajo de todos los elementos de todos los elementos que pueden utilizar para jugar con las propiedades CSS.
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | Metodo | Descripcion | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | css(nombre) | Devuelve una propiedad de estilo en el primer elemento que coincida. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | css(nombre,valor) | Establece una sola propiedad de estilo a un valor en todos los elementos coincidentes. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | css(propiedades) | Establece un objeto clave/valor como propiedades de estilo a todos los elementos coincidentes. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | height(valor) | Ajusta la altura CSS de cada elemento que coincida. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | height() | Obtiene el actual computado, pixel, altura del primer elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | innerHeight( ) | Obtiene la altura interior (excluye el border e incluye el padding) para el primer elemento que coincide. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | innerWidth( ) | Obtiene la anchura interior (excluye el border e incluye el padding) para el primer elemento que coincide. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | offset( ) | Obtiene el desplazamiento del primer elemento coincidente actual en pixeles, en relacion con el documento. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | offsetParent( ) | Devuelve una coleccion jQuery con el padre posicionado del primer elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | outerHeight( [margen] ) | Obtiene la altura exterior (incluye el border y padding por defecto) para el primer elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | outerWidth( [margen] ) | Obtiene el ancho exterior (incluye el border y padding por defecto) para el primer elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | position( ) | Obtiene la posicion superior e izquierda de un elemento con respecto a su offsetParent() | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | scrollLeft( valor ) | Cuando un valor es pasado, al desplazarse hacia la izquierda se establece el valor de todos los elementos coincidentes. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | scrollLeft( ) | Obtiene el desplazamiento izquierdo del primer elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | scrollTop( valor ) | Cuando un valor es pasado, al desplazarse hacia la arriba se establece el valor de todos los elementos coincidentes. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | scrollTop( ) | Obtiene el desplazamiento superior del primer elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | width( valor ) | Ajusta el ancho CSS de cada elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+ | width( ) | Obtiene el actual computado, pixel, ancho del primer elemento coincidente. | +-------------------------+-------------------------------------------------------------------------------------------------------------------------+
Fuente: http://www.tutorialspoint.com
No hay comentarios:
Publicar un comentario