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

No hay comentarios:

Publicar un comentario