martes, 2 de septiembre de 2014
Jquery - Filtrando selectores
Como he comentado en el post de Selectores de jquery, se pueden seleccionar elementos del DOM, para realizar acciones sobre ellos, como por ejemplo cambiar el texto de un div, o de un label, o añadir css a un elemento, entre otras cosas.Aparte de pueden realizar otras acciones con los elementos de DOM, como por ejemplo, saber si posee elementos <p>, o incluso saber si un cierto elemento posee una clase.
$('div.foo').has('p'); // el elemento div.foo contiene elementos <p> $('h1').not('.bar'); // el elemento h1 no posse la clase 'bar' $('ul li').filter('.current'); // un item de una lista desordenada // que posse la clase 'current' $('ul li').first(); // el primer item de una lista desordenada $('ul li').eq(5); // el sexto item de una lista desordenada $('div.foo').length // devuelve la cantidad de elementos que posee
Selección de Elementos de un Formulario
jQuery ofrece varios pseudo-selectores que ayudan a encontrar elementos dentro de los formularios, éstos son especialmente útiles ya que dependiendo de los estados de cada elemento o su tipo, puede ser difícil distinguirlos utilizando selectores CSS estándar.
:button Selecciona elementos <button> y con el atributo type='button' :checkbox Selecciona elementos <input> con el atributo type='checkbox' :checked Selecciona elementos <input> del tipo checkbox seleccionados :disabled Selecciona elementos del formulario que están deshabitados :enabled Selecciona elementos del formulario que están habilitados :file Selecciona elementos <input> con el atributo type='file' :image Selecciona elementos <input> con el atributo type='image' :input Selecciona elementos <input>, <textarea> y <select> :password Selecciona elementos <input> con el atributo type='password' :radio Selecciona elementos <input> con el atributo type='radio' :reset Selecciona elementos <input> con el atributo type='reset' :selected Selecciona elementos <options> que están seleccionados :submit Selecciona elementos <input> con el atributo type='submit' :text Selecciona elementos <input> con el atributo type='text' Utilizando pseudo-selectores en elementos de formularios $('#myForm :input'); // obtiene todos los elementos inputs // dentro del formulario #myForm
Encadenamiento
Si en una selección se realiza una llamada a un método, y éste devuelve un objeto jQuery, es posible seguir un “encadenado” de métodos en el objeto.
$('#content').find('h3').eq(2).html('nuevo texto para el tercer elemento h3');
Por otro lado, si se está escribiendo un encadenamiento de métodos que incluyen muchos pasos, es posible escribirlos línea por línea, haciendo que el código luzca más agradable para leer.
Formateo de código encadenado $('#content') .find('h3') .eq(2) .html('nuevo texto para el tercer elemento h3'); Si desea volver a la selección original en el medio del encadenado, jQuery ofrece el método $.fn.end para poder hacerlo. Restablecer la selección original utilizando el método $.fn.end $('#content') .find('h3') .eq(2) .html('nuevo texto para el tercer elemento h3') .end() // reestablece la selección a todos los elementos h3 en #content .eq(0) .html('nuevo texto para el primer elemento h3');
aa
Suscribirse a:
Enviar comentarios
(
Atom
)
Sígueme en las Redes Sociales
Donaciones
Datos personales
Entradas populares
-
En este apartado vamos a explicar como ejercutar archivos PHP a través del terminal de Ubuntu. Lo primero que tendríamos que hacer es inst...
-
En este blog voy a comentar un tema que se utilizan en casi todas las páginas web que existen, y es el tema de la paginación. La paginaci...
-
Este post trata de la integración de la librería PHPExcel en Codeigniter, aunque se podría aplicar a cualquier librería, como por ejemplo mP...
-
Ejemplo para añadir o sumar un número determinado de hora/s, minuto/s, segundo/s a una fecha en php. Con la función strtotime se puede ...
-
Este tema es uno de los temas primordiales sobre el framework Codeigniter, ya que en alguna ocación nos hemos visto obligados a recoger dato...
© Espacio Daycry - Espacio de programación 2013 . Powered by Bootstrap , Blogger templates and RWD Testing Tool
No hay comentarios :
Publicar un comentario