Categoría: Diseño Web

  • Telegram ya soporta juegos en HTML 5

    En la dura lucha por convertirse en la aplicación de mensajería instantánea de Smartphone preferida del gran público, Telegram acaba de incluir la posibilidad, a partir de la versión 3.13, de poder jugar dentro de la aplicación con juegos programados en HTML 5. Además estos juegos funcionan como aplicaciones externas siendo los dos bots más…

  • Selectores JQUERY por atributos

    Los atributos son las diferentes ‘configuraciones’ de los elementos HTML, por ejemplo para img tenemos: alt, src, alt, class, style, etc, para un enlace: title, href, class, id, etc. Vamos a ver como podemos usar JQUERY para filtrar en función de los diferentes atributos. Selector por atributo :[atributo] Se accede a los elementos que tienen…

  • Selector JQUERY elementos ocultos

    Vamos a ver como podemos seleccionar elementos en función de su visibilidad. Podemos elegir los elementos que estén visibles con el comando :visible o los que estén ocultos :hidden. Selectores :visible y :hidden <!DOCTYPE html> <html> <head> <title>Selectores de visibilidad</title> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js»></script> <script type=»text/javascript»> $(document).ready(function() { $(‘#miId’).click(function(){ $(‘ul:visible’).hide(); }); $(‘h2’).click(function(){ $(‘ul:hidden’).show(); }); }); </script> <style> *{…

  • Selector JQUERY de un texto :contains

    Aparte de poder acceder al DOM mediante las etiquetas HTML: ul, p, section, etc. Podemos acceder en función de una serie de filtros, por ejemplo un texto dado. Vamos a ver como podemos acceder a los elementos en función de un texto usando :contains, acceder a elementos sin texto con :empty, elementos que son padres :parent…

  • Selector JQUERY de hijos únicos :only-child

    Seguimos con un nuevo ejemplo de un selector JQUERY de elementos DOM de un documento HTML, en esta ocasión vemos como seleccionar un hijo único de un padre. En este caso se le indica que busque elementos únicos dentro de un elemento padre, si hay varios no se seleccionan. Ejemplos, selector :only-child <!DOCTYPE html> <html>…

  • Selectores par e impar JQUERY de un hijo :nth-child(odd/even)

    En esta ocasión vamos a ver como podemos seleccionar solo los elementos pares e impares de un elemento padre.  Ejemplos, selector :nth-child(even / odd) <!DOCTYPE html> <html> <head> <title>Selectores pares e impares del hijo de un padre</title> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js»></script> <script type=»text/javascript»> $(document).ready(function() { $(‘#miId’).click(function(){ $(‘li:nth-child(even)’).css({«border»:»1px solid red»}); }); $(‘h2’).click(function(){ $(‘ul.uno li:nth-child(odd)’).css({«border»:»1px solid red»}); }); });…

  • Selector JQUERY enésimo hijo :nth-child

    Vamos a ver como podemos seleccionar el enésimo elemento hijo de su padre, con el comando :nth-child(X). En este caso se selecciona el hijo pasado como parámetro dentro del padre indicado, teniendo en cuenta que el parámetro comienza con el 1, hay muchas funciones de JQUERY que empiezan por 0, ya que respetan el funcionamiento nativo de…

  • Selectores del primer y último hijo :first-child y :last-child

    Vamos a ver como podemos seleccionar el primer y último elemento hijo de su padre, con los comandos :first-child y :last-child. En este caso se seleccionan el primer y último elemento de cada padre, no como el comando :first que selecciona el primero de todo el documento, puedes ver un ejemplo aquí. Ejemplos, selectores :first-child…

  • Selector con mismo nombre de etiqueta :first-of-type, :last-of-type y :only-of-type

    Desde la versión JQUERY 1.9 existen nuevos selectores para facilitar el acceso a los elementos del DOM. En este caso vamos a ver como podemos acceder a los elementos que son el primero con un nombre determinado de etiqueta, el último, y a los elementos que tengan una etiqueta única. Ejemplos, selectores :first-of-type, :last-of-type y :only-of-type…

  • angularjs 2 tutorial: Instalación

    Voy a empezar a a documentar las pruebas que voy haciendo con angularjs 2, y la mejor forma es ir creando este tutorial. Angularjs es un framework de javascript, es un proyecto de código abierto que esta mantenido por Google y muchos más, y es por eso que esta cogiendo un gran impulso. El proyecto acaba…

  • Selector de elementos según tipo :nth-of-type y nth-last-of-type

    Desde la versión de JQUERY 1.9 surgieron nuevos selectores para facilitar el acceso a los elementos del DOM. Si queremos seleccionar el X elemento hijo de un padre que tenga un atributo concreto, podemos usar el atributo :nth-of-type. La otra versión es a la inversa que empiece a contar desde abajo :nth-last-of-type. Por ejemplo: queremos mostrar solo…

  • Excluir un elemento de una selección JQUERY

    En esta ocasión vamos a ver un método que sirve para excluir elementos de una selección con JQUERY, mediante el atributo :not(elemento). No de ja de ser otra forma de seleccionar pero excluyendo los que coinciden con el criterio indicado. Ejemplos, excluir con :not <!DOCTYPE html> <html> <head> <title>Excluir elementos en una selección</title> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js»></script>…

  • Selector de encabezados con JQUERY

    Vamos a ver un selector JQUERY especial, que solo se encarga de seleccionar todos los encabezados: h1, h2, h3, h4, h5, h6. Mediante el selector :header. Ejemplos, selector :header <!DOCTYPE html> <html> <head> <title>Selector de encabezados</title> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js»></script> <script type=»text/javascript»> $(document).ready(function() { $(‘#miId’).click(function(){ $(‘:header’).css({«border»:»1px solid red»}); }); }); </script> <style> *{ width: 100%; margin: 0 auto;…

  • Seleccionar elementos siguientes y anteriores con JQUERY

    Vamos a ver como seleccionar los elementos siguientes y anteriores con JQUERY,  en este caso queremos seleccionar los elementos (todos) a partir del que le indicamos como indice y anteriores al indicado. Mediante el selector :gt(x) podemos indicarle a JQUERY a partir de que elemento queremos que seleccione y con :lt(x) que seleccione los elementos anteriores al indicado. Ejemplos, selectores…

  • Seleccionar un elemento concreto con JQUERY

    Vamos a ver como seleccionar un elemento concreto con JQUERY,  un elemento que no sea el primero o el último por ejemplo el cuarto y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1). Mediante el selector :qr(x) podemos indicarle a JQUERY el número del…

  • Seleccionar los elementos pares e impares con JQUERY

    Vamos a ver como seleccionar todos los elementos pares e impares de una lista con JQUERY, y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1 seleccionaremos los pares y cuando hagamos clic en el h2 seleccionaremos los elementos impares). El selector :even es el encargado…

  • Seleccionar el último elemento con JQUERY

    Vamos a ver como seleccionar el último elemento de una lista con JQUERY, y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1). El selector :last es el encargado de seleccionar el último elemento indicado, solo selecciona un elemento, el último. Ejemplo, selector :last <!DOCTYPE html> <html>…

  • Seleccionar el primer elemento con JQUERY :first

    Vamos a ver como seleccionar el primer elemento de una lista con JQUERY, y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1). El selector :first es el encargado de seleccionar el primer elemento indicado, solo selecciona un elemento, el primero. Ejemplo, selector :first…

  • Seleccionar elementos con Filtros

    Aparte de poder acceder a los diferentes elementos del DOM mediante las formas corrientes (ver selectores básicos y selectores jerárquicos), muy similares a CSS, JQUERY enumera todos los elementos y por tanto podemos acceder a ellos de una forma sencilla mediante una serie de filtros como el primero, el último, elementos pares, etc. Filtros que facilitan el…

  • Selectores jquery: Jerárquicos

    Los selectores jerárquicos de JQUERY sirven para acceder a las notaciones de los hijos, padres, hermanos y descendentes del DOM, tal y como ocurre con HTML y CSS, en donde creamos estilos con la misma jerarquía. Selectores descendentes Podemos seleccionar todos los elementos que descienden de un elemento, exactamente igual que ocurre con CSS. $(‘#ejemplo p’) seleccionamos…