jQuery - Métodos de selectores CSS
La biblioteca jQuery admite casi todos los selectores incluidos en las especificaciones 1 a 3 de la hoja de estilo en cascada (CSS), como se describe en el sitio del World Wide Web Consortium.
Al usar la biblioteca JQuery, los desarrolladores pueden mejorar sus sitios web sin preocuparse por los navegadores y sus versiones, siempre que los navegadores tengan JavaScript habilitado.
La mayoría de los métodos CSS de JQuery no modifican el contenido del objeto jQuery y se utilizan para aplicar propiedades CSS en elementos DOM.
Aplicar propiedades CSS
Esto es muy simple para aplicar cualquier propiedad CSS usando el método JQuery css( PropertyName, PropertyValue ).
Aquí está la sintaxis del método:
selector.css( PropertyName, PropertyValue );Aquí puede pasar PropertyName como una cadena de JavaScript y, según su valor, PropertyValue podría ser una cadena o un entero.
Ejemplo
A continuación se muestra un ejemplo que agrega color de fuente al segundo elemento de la lista.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Aplicar varias propiedades de CSS
Puede aplicar múltiples propiedades CSS usando un solo método JQuery CSS( {key1:val1, key2:val2....). Puede aplicar tantas propiedades como desee en una sola llamada.
Aquí está la sintaxis del método:
selector.css( {key1:val1, key2:val2....keyN:valN})Aquí puede pasar la clave como propiedad y val como su valor como se describe arriba.
Ejemplo
A continuación se muestra un ejemplo que agrega color de fuente y color de fondo al segundo elemento de la lista.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Configuración del ancho y la altura del elemento
los width( val ) y height( val ) El método se puede utilizar para establecer el ancho y el alto respectivamente de cualquier elemento.
Ejemplo
A continuación se muestra un ejemplo simple que establece el ancho del elemento de la primera división, donde el resto de los elementos tienen el ancho establecido por hoja de estilo
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div:first").width(100);
$("div:first").css("background-color", "blue");
});
</script>
<style>
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>Esto producirá el siguiente resultado:
Métodos CSS de JQuery
La siguiente tabla enumera todos los métodos que puede usar para jugar con las propiedades de CSS:
| No Señor. | Método y descripción |
|---|---|
| 1 | css (nombre) Devuelve una propiedad de estilo en el primer elemento coincidente. |
| 2 | css (nombre, valor) Establezca una propiedad de estilo única en un valor en todos los elementos coincidentes. |
| 3 | css (propiedades) Establezca un objeto de clave / valor como propiedades de estilo para todos los elementos coincidentes. |
| 4 | altura (val) Establezca la altura CSS de cada elemento coincidente. |
| 5 | altura () Obtiene la altura actual calculada en píxeles del primer elemento coincidente. |
| 6 | innerHeight () Obtiene la altura interior (excluye el borde e incluye el relleno) del primer elemento coincidente. |
| 7 | innerWidth () Obtiene el ancho interior (excluye el borde e incluye el relleno) del primer elemento coincidente. |
| 8 | compensar( ) Obtenga el desplazamiento actual del primer elemento coincidente, en píxeles, en relación con el documento. |
| 9 | offsetParent () Devuelve una colección jQuery con el padre posicionado del primer elemento coincidente. |
| 10 | externalHeight ([margin]) Obtiene la altura exterior (incluye el borde y el relleno de forma predeterminada) del primer elemento coincidente. |
| 11 | externalWidth ([margin]) Obtenga el ancho exterior (incluye el borde y el relleno de forma predeterminada) para el primer elemento coincidente. |
| 12 | posición( ) Obtiene la posición superior e izquierda de un elemento en relación con su padre de desplazamiento. |
| 13 | scrollLeft (val) Cuando se pasa un valor, el desplazamiento de desplazamiento a la izquierda se establece en ese valor en todos los elementos coincidentes. |
| 14 | scrollLeft () Obtiene el desplazamiento de desplazamiento a la izquierda del primer elemento coincidente. |
| 15 | scrollTop (val) Cuando se pasa un valor, el desplazamiento de la parte superior del desplazamiento se establece en ese valor en todos los elementos coincidentes. |
| dieciséis | scrollTop () Obtiene el desplazamiento superior de desplazamiento del primer elemento coincidente. |
| 17 | ancho (val) Establezca el ancho de CSS de cada elemento coincidente. |
| 18 | ancho () Obtiene el ancho de píxeles calculado actual del primer elemento coincidente. |