¿Qué es?

• Una librería de JavaScript open source que nos facilita el desarrollo de código en ese lenguaje
• Gran ventaja: independiente del navegador
• Versión actual: 2.2.3
• Sin soporte para IE 6/7/8 (Una pena...)

¿Qué hace?

Entre otras cosas es especialmente popular por facilitar:

• Manipulación elementos del HTML/DOM
• Manipulación elementos CSS
• Gestión eventos HTML
• Crea efectos y animaciones
• Uso de AJAX
• Otras utilidades

Comparación JavaScript estándar / jQuery

Manipular elementos del HTML/DOM

Usando JavaScript estándar:

                        
                          document.getElementById("nombre") = "Germán";
                        
                      

Usando jQuery:

                        
                          $("#nombre").val("Germán);
                      
                    

Manipular elementos del CSS

Usando JavaScript estándar:

                        
                          document.getElementById("cuadro").style.background-color = "red";
document.getElementById("cuadro").style.border-color = "black";
                        
                      

Usando jQuery:

                        
                          $("#cuadro").css({"background-color":"red", "border-color":"black"});
                      
                    

Gestionar eventos HTML

Usando JavaScript estándar:

                        
                          
     OR
document.getElementById("github").addEventListener('click', cargarJSON);
                        
                      

Usando jQuery:

                        
                          $("#github").click(function() {
  ...
});
                      
                    

Crea efectos y animaciones

Usando JavaScript estándar:

                        
                          function fadeOutEffect() {
    var fadeTarget = document.getElementById("cuadro");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity < 0.1) {
            clearInterval(fadeEffect);
        } else {
            fadeTarget.style.opacity -= 0.1;
        }
    }, 200);
}
                        
                      

Crea efectos y animaciones

Usando jQuery:

                        
                          $("cuadro").click(function(){
    $("#cuadro").fadeOut(200);
});
                      
                    

Usar AJAX (Ej: recuperar archivo JSON)

Usando JavaScript estándar:

                        
                          function cargarJSON() {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var objeto = JSON.parse(http_request.responseText);
        document.getElementById("nombre") = objeto.login;
      }
    };

    xhttp.open("GET", "https://api.github.com/users/germaaan", true);
    xhttp.send();
}
                        
                      

Usar AJAX (Ej: recuperar archivo JSON)

Usando jQuery:

                        
                          $.getJSON("https://api.github.com/users/germaaan", function(data) {
    $("#nombre").val(data.login);
});
                      
                    

Escribir menos, hacer más

Genial, ¿eh?

Uso

ejemplo.html

codigo.js

                    
                      $(document).ready(function(){
     ...
});
                    
                  

                    
                      $(function(){
     ...
});
                    
                  

Sintaxis

Seleccionamos un elemento y realizamos sobre él la acción que queramos.

                    
                      $(selector).action()
                    
                  

• $: símbolo que indica que usamos jQuery
• selector: selecciona el elemento
• action: acción que ejecuta

Selectores

Eventos

                    
                    $("form").submit(function(event){
    event.preventDefault();

    ...
});
                  
                

Manipulación de DOM

Usando los selectores, manipulamos elementos DOM siguiendo una metodología GET/SET.

Manipulación de DOM / GET

                    
                      
Estoy aquí obligado para firmar


$("#cosa").html();
$("#cosa").text();
$("#nombre").val();
$("#nombre").attr("type");
                    
                  

Manipulación de DOM / GET

• html(): obtiene el html del elemento

                          
                            
  Estoy aquí obligado para firmar
                          
                        

• text(): obtiene el texto del elemento

                          
                            Estoy aquí obligado para firmar

• val(): obtiene el valor del elemento

                          
                            Cualquiera
                          
                        

• val(): obtiene el valor del atributo del elemento

                            
                              text
                            
                          

Manipulación de DOM / SET

                    
                      
Estoy aquí obligado para firmar
                      


$("#cosa").html("
Estoy aquí MUY INTERESADO
");
$("#cosa").text("Estoy aquí MUY INTERESADO");
$("#nombre").val("Nadie"));
$("#nombre").attr("type", "textarea");
                    
                  

Manipulación de CSS

                    
                      .alerta {
     font-weight: bold;
     color: red;
}


$("h1").addClass("alerta");
$("h1").removeClass("alerta");
$("h1").toggleClass("alert");
$("h1").css({"font-weight":"bold", "color":"red"});
                    
                  

Crear efectos

Crear animaciones

                    
                      $("cosa").animate({
     left: '250px',
     opacity: '0.5',
     height: '150px',
     width: '150px'
});
                    
                  

Efectos encadenados

                    
                      $("#cosa").css("background-color", "red").slideUp(2000)
     .slideDown(2000);
                    
                  

AJAX

Método $.ajax()

                    
                      $.ajax({url: "https://api.github.com/users/germaaan",
  success: function(result){ $("#nombre").text(result.login); },
  error: function(xhr){ alert("ERROR: " + xhr.status + " "
    + xhr.statusText); }
});
                    
                  

AJAX

Método $.get() / $.post()

                    
$.get(URL,data,function(data,status,xhr),dataType)
$.post(URL,data,function(data,status,xhr),dataType)

$.get("https://api.github.com/users/germaaan",
  data: {"dato": 43},
  function(data, status){
     $("#nombre").text(data.login), "json";
});
                    
                  

AJAX

Método $.load()

                    
$(selector).load(URL,data,function(response,status,xhr))

$("#texto").load("nombres.txt");
                    
                  

AJAX

Método $.getJSON()

                    
$().getJSON(URL,data, sucess(data,status,xhr))

$.getJSON("/API", function(result){
  $.each(data, function(clave, valor) {
    $("#listado").append("" + valor.nombre + "");
  });
});
                    
                  

AJAX

Método $.getScript()

                    
$().getScript(URL, success(response,status))

$("#boton").click(function(){
    $.getScript("prueba.js");
});
                    
                  

noConflict()

HTML

JavaScript

  
jq(document).ready(function(){
    jq("button").click(function(){
        jq("#aviso").text("Disuélvanse, aquí no ha pasado nada.");
    });
});

each()

                    
                      $("li").each(function(){
     alert($(this).text())
});
                    
                  

toArray()

                    
                      var x = $("li").toArray()

for (i = 0; i< x.length; i++) {
     alert(x[i].innerHTML);
}
                    
                  

Mucha teoría ya, ¿no?

Aplicación de ejemplo

Referencias