Ing de Sistemas

1. Integrantes: Yosira Atencio, Neyer Landines,
Manuel Navarro ,Rafael Diaz, Washintong Bello.
Electiva II
Ing: Yair Romero.

2. ¿Qué es jQuery?
• Es una librería libre y abierta en JavaScript.
• Simplifica la tarea de creación de páginas web altamente
sensibles.
• Funciona en todos los navegadores modernos.
• Resume las características específicas del navegador, lo que
permite concentrarse en el diseño.

3. Introducción a JavaScript

4. ¿Qué es un lenguaje scripting?
 No se puede comunicar con el sistema operativo
 No se puede acceder a los archivos locales
 No se puede acceder directamente a la base de datos
 No se puede acceder al hardware
 El lenguaje del lado del cliente
 Funciona en DOM

5. DOM = DOCUMENT OBJECT MODEL
DOCUMENTO – OBJETO

6. DOM = DOCUMENT OBJECT MODEL
MODELO

7. JavaScript vs jQuery
• Ejemplo 1 - Oculta un elemento con id "textbox“
//javascript
document.getElementById('textbox').style.display = "none";
//jQuery
$('#textbox').hide();

8. JavaScript vs jQuery
• Ejemplo 2 – Crea una etiqueta <h1> con "mi texto“
//javascript
var h1 = document.CreateElement("h1");
h1.innerHTML = "mi texto";document.getElementsByTagName('body')[0].appendChild(h1);
//jQuery
$('body').append( $("<h1/>").html("mi texto") ;

9. Habilitar jQuery en tu página
jQuery se puede habilitar en tu página incluyendo la referencia al
archivo de la librería jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
Introduce una función jQuery utilizando de esta manera:
 $(document).ready(function(){
 //El Script va aquí
 });
 OR
 $(function(){
 // El Script va aquí
 });

10. Selectores básicos
• TagName
document.getElementsByTagName("tagName");
$("tagName")-$("div"), $("p"), $("div"),.....
• TagID
document.getElementById("id");
$("#id") -$("#name"), $("#address")
• TagClass
document.getElementsByClassName("className");
$(".className") -$(".comment"), $(".code")
• To select all elements -$("*")

11. Selectores combinados
Sintaxis
$("tagName.className")
$("tagName.className#tagId")
Ejemplos
$("h1.mainTitle")
$("h1.mainTitle#firstHeading")

12. Filtros Índex
Sintaxis:
• $("selector:first")
• $("selector:last")
• $("selector:odd")
• $("selector:even")
• $("selector:eq(i)")
• $("selector:gt(i)")
• $("selector:lt(i)")
Ejemplos:
• $("p:first")
• $("p:last")
• $("p:odd")
• $("p:even")
• $("p:eq(1)")
• $("p:gt(1)")

13. Condición Filtros - Filtros de Formularios
Sintaxis:
• $("selector:visible")
• $("selector:hidden")
• $("selector:disabled")
• $("selector:enabled")
• $("selector:checked")
• $("selector:selected")
• $("selector:header")
• $("selector:animated")

14. Relación de Filtros - Filtros de contenido
Sintaxis:
• $("selector:parent")
• $("selector:first-child")
• $("selector:last-child")
• $("selector:only-child")
• $("selector:nth-child(i)")
• $("selector:nth-child(odd)")
• $("selector:nth-child(even)")
• $("selector:nth-child(Xn+M)")
• $("selector:content('text')")
• $("selector:empty")
• $("selector:has(selector)")

15. Filtro con Atributo
Sintaxis:
• $("selector[attribute]")
• $("selector[attribute=value]")
• $("selector[attribute!=value]")
• $("selector[attribute^=value]")
• $("selector[attribute$=value]")
• $("selector[attribute*=value]")
Ejemplos:
• $("p:[name]")
• $("p:[name=para]")
• $("p:[name!=para]")
• $("p:[name^=para]")
• $("p:[name$=para]")
• $("p:[name*=para]")

16. Recuperar, configurar y eliminar atributos
Sintaxis:
• $("selector").attr("name")
• $("selector").attr("key", "val")
• $("selector").attr("key", fn())
• $("selector").attr(properties)
• $("selector").removeAttr(attr)
Ejemplos:
• $("img").attr("src")
• $("p").attr("class", "source")
• $("img").attr("height", calHt())
• $("img").attr({"src" : "/path/","title" :
"My Img"});
• $("div").removeAttr("class“)

17. Clase , HTML , Texto, Valor - Funciones
 $("selector").hasClass("className")
 $("selector").addClass("className")
 $("selector").removeClass("className")
 $("selector").toggleClass("className")
 $("selector").html()
 $("selector").html("html code")
 $("selector").text()
 $("selector").text("text content")
 $("selector").val()
 $("selector").val("value")

18. Otras funciones
Sintaxis:
 $("selector").length
 $("selector").size()
 $("selector").get()
 $("selector").get(index)
 $("selector").find("selector")
 $("selector").each(function(){
 $(this).xxxx();
 });
Ejemplos:
 $("h1").length
 $("h1").size()
 var h1_list = $("h1").get()
 var h1 = $("h1").get(2)
 $("select").find("
 option[value='india']")
 $("selector").each(function(){
 $(this).addClass('title');
 });

19. Eventos
 bind()
 unbind()
 ready()
 toggle()
 hover()
 trigger()
 $("selector").bind(event,
data,handler)
 $("selector").unbind(event,
handler)

20. Ejemplo - Bind
 $(function(){
 $("#myButton").bind("onclick", validate);
 $("#myButton").click( validate);
 });
 function validate(){
 if( $("#myText").val().length== 0 ) {
 alert("Error")
 } else {
 $("#myForm").submit();
 }
 }

21. Animaciones
 show()
 hide()
 fadeIn()
 fadeOut()
 slideUp()
 slideDown()

22. Características Adicionales
• jQuery UI
• Funcionalidad AJAX