#css jquery

Nueva noticia publicada en https://amdisenoweb.es/curso-jquery-9-aplicando-estilos-anadiendo-componentes/

Curso jQuery: 9 Aplicando estilos y añadiendo componentes

Vamos a ver como podemos cambiar los estilos css de un componente web, así como recuperar su valor, también vamos a ver como podemos añadir más contenido a la página web.

jQuery tiene una función que nos permite ver el valor de un estilo css o cambiar el valor de dicha propiedad, para ello usamos la funcion .css(), la cual entre parentesis se la pueden pasar distintos parametros dependiendo de lo que queramos hacer.

Si queremos que nos devuelva el valor css de un componente utilizaremos

.css(‘nombre’)  y nos devolverá el valor de la propiedad nombre del elemento seleccionado.

Si queremos añadir una propiedad a un elemento lo haremos como sigue:

.css(propiedad, valor)

Si por el contrario queremos añadir mas de una propiedad css a un elemento dichas propiedades van encerradas entre llave y cara pareja propiedad : valor va separada por una coma, siendo algo similar a:

.css(‘propiedad1′:’valor1′,’propiedad2’:’valor2’…..)

Por ejemplo si queremos que todos los div tengan un mismo color de fondo y un mismo color de letra usaremos:

$("div").css("bakcground-color":"red","color":"white");

En otras ocasiones lo que nos puede interesar es añadir, quitar o comprobar si un elemento tiene un estilo css, en este caso podemos utilizar una de las siguientes funciones.

.addClass(clasecss); añade la clase al componente seleccionado

.removeClass(clasecss); quita la clase al componente seleccionado

.hasClass(clasecss); comprueba si el elemento seleccionado tiene la clase o no, devolviendo true o false

.toggleClass(clasecss); si el elemento seleccionado no tiene la clase se la añade y si la tiene se la quita.

Por ejemplo, si tenemos una clase que se llama border-rojo podemos añadirsela a todos los div con la orden

$(“div”).addClass(“borde-rojo”);

Añadir o cambiar contenido

Para cambiar el contenido de un elemento usaremos la función

.html(“contenido nuevo”)

De esta manera cambiamos el contenido del elemento seleccionado por el “contenido nuevo”, pero si lo que queremos es añadir mas contenido a un elemento usaremos la funcion

.append(“contenido añadido”)

De esta forma se añade “contendio añadido” al elemento seleccionado.

Supongamos que tenemos un div  cuya clase es caja1 y queremos añadirle dos párrafos, lo haríamos como sigue:

$(".caja1").append("<p>parrafo 1</p>"); $(".caja1").append("<p>parrafo 2</p>");

Con la función remove nos sirve cuando queremos quitar todos los elementos seleccionados, por ejemplo si queremos borrar la caja1 pondríamos:

$(".caja1").remove();

Atributos

Cuando queremos podemos acceder a la manipulación de los atributos de las etiquetas de html mediante la función attr, con dicha función nos permite recuperar el valor de un atributo o cambiar el valor de un atributo por el que nosotros queramos.

.attr(nombre); nos devuelve el valor de atributo nombre de los elementos seleccionados

.attr(nombre,valor); cambia el atributo nombre del elemento seleccionado por valor

.removeAttr(nombre); elimina el atributo nombre del elemento seleccionado

Por ejemplo si queremos que al situarnos encima de una imagen cambie por otra podríamos usar lo siguiente

<img src="manuel.jpg" width="200" height="200" class="foto"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".foto").hover(function(e) $(".foto").attr("src","maria.jpg"); ); ); </script>

Nueva noticia publicada en https://amdisenoweb.es/animando-componentes/

Curso jQuery: 8 Animando componentes

En esta entrada vamos a ver como podemos hacer desparecer o que aparezcan diferentes componentes, ademas de hacerlos que se desvanezcan o aparezcan lentamente.

jQuery tiene muchas funciones y ademas muchas de estas se pueden anidar unas dentro de otras. Cuando queremos que desaparezca o mostrar un componente utilizaremos las funciones:

.hide(); esta función sirve para ocular los elementos seleccionados

.show(); esta función sirve para mostrar los elementos seleccionados

Además estas funciones se pueden modificar, o utilizar sus variantes en las que les pasamos una velocidad o una función que se ejecutará cuando se termine de realizar la operación en concreto.

.show(velocidad, función callback);   .hide(velocidad, función callback)

Existe otra función con las mismas variantes que es:

.toogle() esta función muestra un elemento si esta oculto o le oculta si esta visible.

Para hacer desvanecer o aparecer componentes se utiliza la función fade en una de sus variante

.fadeIn(velocidad, función callback); aparece gradualmente con una función que se ejecutara al finalizar el evento

.fadeOut(velocidad, función callback); desaparece gradualmente con una función que se ejecutara al finalizar el evento

.fadeTo(velocidad, función callback); cambia la opacidad de los elementos gradualmente con una función que se ejecutara al finalizar el evento.

Otra forma de que se oculte o muestren los elementos es mediante el “deslizamiento” de los mismos utilizando las funciones

.slideDown(velocidad, función callback); se desliza hacia abajo lo que hace que se muestren los elementos y al finalizar ejecuta la función de vuelta.

.slideUp(velocidad, función callback); se desliza hacia arriba lo que hace que se oculten los elementos y al finalizar ejecuta la función de vuelta.

.slideToggle(velocidad, función callback); se desliza hacia abajo o hacia arriba dependiendo del estado en el que se encuentre los elementos y al finalizar ejecuta la función de vuelta.

Supongamos que tenemos un div “caja1” el cual cuando pinchemos en un texto efectos nos aplique los efectos vistos hasta ahora.

<style type="text/css"> .caja1 background-color: blue; height:400px; width:400px; position:relative; left:400px; border: 2px solid #ffff00; padding:10px; margin:10px; </style> </head> <body> <div class="caja1"></div> <div style="position:absolute; top:0px;"> <a href="javascript:void(0);" class="efectos">Efectos</a> </div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".efectos").click(function (e) $(".caja1").hide("slow"); $(".caja1").show("fast"); $(".caja1").fadeOut(1000); $(".caja1").fadeIn(800); $(".caja1").slideUp(1000); $(".caja1").slideDown(800); ); ); </script>

Otra forma de  crear animaciones o que aparezcan y desaparezcan las cosas es mediante la función animate, a esta función se le pueden pasar 4 parámetros, el primero son los estilos css que queremos cambiar encerrados entre llaves, a continuación la duración del efecto, el tercero es el tipo de función para efectuar la animación que puede ser linear o wing y el ultimo es una función de callbak o de vuelta, los dos últimos son opcionales con lo que se pueden poner o no.

.animate(estilos css, duracion, aesing, función callback);

Siguiendo el anterior ejemplo podría quedar algo como lo siguiente en el cual le cambiamos el ancho, alto y opacidad:

Tutorial Belajar jQuery Part 14: Cara Mengubah Class CSS elemen HTML dengan jQuery

Dalam tutorial belajar jQuery sebelumnya kita telah membahas cara mengambil dan mengubah property CSS secara dinamis. Materi kali ini juga masih berkaitan dengan CSS, yakni cara mengubah class CSS elemen HTML dengan jQuery. Kita akan mempelajari 3 method jQuery, yakni addClass(), removeClass(), dan toggleClass().

[stextbox id=”info”]Untuk dapat mengikuti tutorial ini sebaiknya anda juga sudah…

Tutorial Belajar jQuery Part 13: Cara Menambahkan Kode CSS Dinamis dengan jQuery

Dalam lanjutan tutorial belajar jQuery di Duniailkom kali ini saya akan membahas cara menambahkan kode CSS dinamis dengan jQuery. Method yang akan kita gunakan adalah css().

Mengambil Nilai Property CSS Dengan jQuery

Kemampuan memanipulasi kode CSS secara dinamis setelah halaman tampil membuka banyak kemungkinan. Kita bisa merancang berbagai interaksi menarik, hal ini hanya bisa dibuat…

WordPress Designer / Frontend Developers at Cicime Trading Company

Cicime Trading Company is recruiting to fill the position of:

Job Title: WordPress Designer / Frontend Developer

Location: Lagos Job Description

We are looking for an experienced frontend developer / WordPress Designer.

Your duties will include laying out sites for clients, writing custom CSS, jQuery, PHP, and HTML.

A strong eye for design and development is a must!

Experienced with…