EL jQuery, sin lugar a dudas, revolucionó la forma en que escribimos códigos en el lenguaje Javascript. No sólo por su facilidad, sino también por la gran variedad de recursos que podemos tener al utilizar este excelente framework de JavaScript, que van desde simples ediciones DOM hasta solicitudes Ajax y manejo de eventos.
Utilizado por la mayoría de los desarrolladores web hoy en día, este marco se ha actualizado y mejorado constantemente, pero una de las cosas que más impresiona es el tamaño del marco, que junto con GZip alcanza un tamaño de menos de 30 KB. Así es, puedes disfrutar de todas estas funciones y pesará tu proyecto en sólo 30 KB. Y para mejorar aún más las cosas, jQuery ahora está alojado en Google y su "súper caché".
Incluyendo el marco en el proyecto.
Para incluir esta biblioteca en tu proyecto, existen 3 formas diferentes:
- Descargue el archivo y alójelo localmente en su servidor.
- Utilice la API de Google para cargar la biblioteca:
donde "1.8.3" es la versión del marco que desea utilizar. Si ingresa '1' en este parámetro, la API de Google siempre devolverá la versión más reciente.<script src="http://www.google.com/jsapi?key=sua_chave_aqui" type="text/javascript"</script> <script type="text/javascript">google.load('jquery','1.8.3');</script> - Llamada API directa (mi favorita):
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
Introducción a los selectores
Uno de los grandes atractivos del equipo de desarrollo de jQuery fue pensar en la practicidad y facilidad de sus selectores. Los selectores son formas de agrupar y seleccionar múltiples objetos a través de Javascript y aplicar acciones y eventos a ese grupo de elementos o a un elemento específico. ¡Esta agrupación se puede realizar usando el #id, la clase del objeto, una característica CSS, el nombre del objeto, un atributo HTML en la página, elementos secundarios de un elemento principal y mucho más!
Ejemplos:
– Seleccionar todas las etiquetas
de
$("#teste p").css("color", "#fffffff");– Recupere todos los elementos cuya clase = 'testeClasse' y agregue la clase "outraClasse" a los elementos.
$(".testeClasse").addClass("outraClasse");– Recuperar todos los elementos de enlace () que no tengan la clase “producto”
$("a:not('.produto')")– Recuperar todos los elementos de enlace () que abren enlaces externos (destino=’_blank’)
$("a[target='_blank']")– Recuperar todos los elementos de enlace () que abren enlaces que contienen “facebook.com”
$("a[href*='facebook.com']")– Recuperar el primer, último y noveno elemento de enlace () de la página.
$("a:first");
$("a:last");
$("a:nth(8)"); // Índice inicia em 0
Ver más sobre todos los selectores accediendo este enlace.
Eventos
Otra gran revolución que trajo jQuery al desarrollo web fue la forma en que gestionamos los eventos en nuestras aplicaciones. Antes teníamos que “contaminar” nuestras páginas HTML con códigos onclick, onchage, onblur, etc. lo cual va completamente en contra del patrón de desarrollo por capas, separando las reglas de negocio de la interfaz (Sí, puedes programar orientado a objetos y usando MVC en Javascript).
¡Eso ahora ha cambiado! Con jQuery podemos aislar completamente páginas HTML y códigos Javascript.
Ejemplos:
– Imprimir en pantalla el valor seleccionado de un
$("#id_aluno").change(function() {
var valor_selecionado = $(this).val();
alert(valor_selecionado);
});– Validar un campo con id= “nome” antes de enviar el formulario cuyo id es “frmCadastroAluno”
$("#frmCadastroAluno").submit(function() {
if ($("#nome").val().length == 0) {
alert("Por favor, preencha o campo Nome");
return false;
}
});
– Imprimir la URL de un enlace () al hacer clic y no seguir el enlace:
$("a").click(function (e) {
e.preventDefault();
var elemento = $(this);
var link = elemento.attr("href");
alert(link);
});Ver todos los eventos accediendo a este enlace.
Complementos
Otra gran innovación que nos aportó este proyecto fue la creación y uso de complementos para la reutilización de código. Si busca en Google, encontrará miles de complementos que realizan las más variadas funciones en conjunto con jQuery. Galerías de imágenes, efectos visuales, nuevas funciones, mejoras de usabilidad, mejoras de interfaz…
A continuación se muestra mi lista de complementos esenciales.
- clasificador de mesa – Mejoras y mejoras en las tablas, como el pedido.
- SugerenciaSugerencia – Nueva interfaz para globos de ayuda, más elegante y amigable.
- sexyalertbox – Una forma más moderna y elegante de mostrar mensajes de alerta.
- Facilitando – Un complemento que proporciona varios efectos para sus aplicaciones.
- jCarrusel – Uno de los mejores complementos para crear un carrusel de imágenes.
- Caja de colores – Una galería de fotos súper ligera y elegante, con 5 temas diferentes.
- ciclo – El mejor y más completo complemento para crear un banner animado.
- Subir – La mejor solución para enviar múltiples cargas. Muy personalizable y se adapta bien a cualquier proyecto o necesidad.
- MáscaraDinero – Complemento que permite crear campos de tipo moneda de forma sencilla y sin complicaciones.
- Valor de entrada – Filtre qué tipos de valores serán aceptados por los campos de su formulario con este complemento.
- Entrada enmascarada – Crea una máscara para los campos más diversos de tu formulario, como teléfono, correo electrónico, CPF, etc.
- Bloque de interfaz de usuario – “Bloquear” su interfaz de usuario mientras se ejecuta un proceso en segundo plano o para enfocar otra ventana.
- MeioMáscara – Complemento brasileño que realiza diferentes tipos de máscaras y validaciones en formularios.
- Objeto jQuery SWFO – Inserta animaciones Flash en tus aplicaciones de forma dinámica y sin causar problemas de validación de HTML en el validador del W3C.
Comentários (0)
Carregando comentários…