Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

Introdución a jQuery

05 Mai 2011 por Jose

Comentarios: 4

jQuery

Javascript é unha linguaxe de programación moi controvertido desde a súa creación, principalmente pola súa incompatibilidade cos distintos navegadores e as súas versións. Nos seus comezos javascript só se usaba para a modificación de sinxelos efectos desde o lado do cliente ou validación de formularios, pero ca aparición do AJAX esta linguaxe empezou a adquirir unha gran importancia no uso de aplicacións web. A dificultade que ten javascript para crear códigos complexos freaba a total expansión da linguaxe, ata a aparición dos frameworks de javascript.

Os frameworks de javascript son librerías de código que fan máis sinxela a compatibilidade entre navegadores (cross-browser), manexo do DOM ou xestión de eventos. O framework que máis se popularizou nos últimos tempos é jQuery e sobre el falaremos a continuación.

Que é jQuery?

Como xa dixemos jQuery é un conxunto de utilidades e funcións de javascript que facilita a produción de código, modificando a forma de escribilo. As súas principais características son:

É javascript non obstructivo
Separa o código (X)HTML das funcións javascript, o que produce un código máis limpo, eficiente e accesible.
É moi lixeiro
Menos de 30Kb na versión 1.5.2.
Extensible
Debido á súa popularidade cada día aparecen novas extensións que aumentan as posibilidades de jQuery, sobre todo en canto a efectos gráficos.

Instalación

jQuery non necesita instalación, simplemente teremos que incluír a librería base no noso código. Podemos obtela desde a páxina oficial de jQuery.

<script type="text/javascript" src="jquery.js"></script>

Tamén podemos enlazar este ficheiro remotamente desde os servidores de Google Code do seguinte xeito:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

Como usalo

A selección de elementos en jQuery faise a través da función jQuery([selector]), que tamén podemos chamar usando o símbolo $([selector]). A esta función pasarémoslle un selector válido, e devolveranos un obxecto desde o cal manexaremos as propiedades do DOM. jQuery admite como selectores válidos os seguintes:

  • Unha cadea de texto compatible coa definición de selector válido para CSS. ($("#id") indica un id, $(".clase") indica unha clase)
  • Elemento de DOM ($("body"), $("p"))
  • Un conxunto de elementos do DOM ($("div, span, p.clase"))
  • Un obxecto jQuery; créase un clon do obxecto que terá os mesmos obxectos do DOM

Podemos dicir que esta asignación vén corresponderse ca que antes faciamos coas funcións document.getElementById("id_elemento"), document.getElementByClass("clase").

E da mesma forma que accediamos ós atributos con elemento.atributo agora usaremos as funcións definidas en jQuery para este fin. Aquí van algúns exemplos:

  • Obter o valor dun atributo: $([selector]).attr("nome_atributo")
  • Establecer o valor dun atributo: $([selector]).attr("nome_atributo", "valor_atributo")
  • Engadir unha clase a un elemento: $([selector]).addClass("clase")
  • Modificar estilos de CSS: $([selector]).css("propiedade_css", "valor")
  • Obter o contido dunha etiqueta: $([selector]).html()
  • Manexar eventos: $([selector]).click([función])
  • Efectos definidos nas librería de jQuery como slide, fadeIn, fadeOut, slideUp

Vexamos un exemplo funcionando. Con este script poderemos mostrar e ocultar a imaxe e manexar a velocidade á que fai o efecto.

O (X)HTML:

<div>
	<p>
		<input type="button" id="fadeOut" value="Ocultar imaxe" />
		<input type="button" id="fadeIn" value="Mostrar imaxe" />
	</p>
	<p>
		<img id="image" src="jquery.png" alt="jQuery" />
	</p>
</div>

O javascript:

$("#fadeOut").click(function() {
	$("#image").fadeOut("slow");
});
$("#fadeIn").click(function() {
	$("#image").fadeIn("fast");
});

jQuery

En próximas entradas profundaremos máis en como aplicar os beneficios que jQuery nos proporciona así como o uso e creación de funcións.

Segue en introdución a jQuery (parte 2).

Máis infomación

Comentarios

4 comentarios. Comentar.

1. Julio o 05 Set 2012 ás 17:18:03

Me parece perfecto el articulo

2. Anónimo o 28 Out 2012 ás 02:52:46

Excelente articulo

3. pepito o 04 Ago 2014 ás 23:43:47

Saludos

4. Anonimo o 21 Xuñ 2015 ás 00:23:39

me gusta el diseño de tu pagina deverias hacer mas grandes las letras ..o ponerle negrita

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?