UT2 DESARROLLO DE APPS MEDIANTE LENGUAJES DE SCRIPT

jQuery

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

  • jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
  • Página oficial de jQuery: https://jquery.com/

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

  • jQuery es software libre y de código abierto. Al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Text

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Text

Se trata de entender conceptos básicos de jQuery

¿Curva de aprendizaje...?

Le dedicaremos 3 clases -> sintaxis, selectores y uso

Otros usos:

  • Llamadas AJAX a la parte del servidor
  • Validaciones en el cliente (formularios...)
  •  

 

 

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Text

ENTORNO CLIENTE

Le dedicaremos 3 clases -> sintaxis, selectores y uso jQuery

1 clase -> taller de Frameworks JavaScript

1 clase -> comunicación mediante formularios HTML5

1 clase -> llamadas AJAX al servidor mediante jQuery

1 clase -> Proyecto integrador 

ENTORNO SERVIDOR

 

 

 

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Text

  • Toda las aplicaciones llevan JavaScript
  • JavaScript se suele utilizar en forma de librería
  • La librería más utilizada es jQuery
  • Al final se trata de "aprender" tecnologías que forman parte de un TODO -> no son tecnologías "aisladas"

 

 

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Text

  • jQuery es MUY demandado en la empresa
  • Pero además de otras tecnologías de desarrollo web como PHP (Symfony)
  •  
  • NO SON INDEPENDIENTES, SON COMPLEMENTARIAS

 

 

clase 1

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

jQuery consiste en un único fichero JavaScript.

¿Qué ventajas supone frente a Javascript?

  • La cantidad de código que necesitas escribir es menor.
  • Solventa problemas en la compatibilidad de navegadores.
  • Ofrece una fácil manipulación del DOM.
  • Te proporciona una gran variedad de efectos/utilidades sobre los elementos HTML.

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

FUNCIÓN $()

La forma de interactuar con la página es mediante la función $(), un alias de jQuery(), que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los nodos (elementos) que concuerden con la expresión.

$("#tablaAlumnos"); // Devolverá el elemento con id=”tablaAlumnos”
$(".activo");  //Devolverá una matriz de elementos con class=”activo”

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

FUNCIÓN $()

Una vez obtenidos los nodos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca.

 

 

O por ejemplo, efectos gráficos:

 

// Se elimina el estilo con removeClass() y se aplica uno nuevo con addClass() 
// a todos los nodos con class=”activo”
$(".activo").removeClass("activo").addClass("inactivo");
// Anima todos los componentes con class=”activo”
$(".activo").slideToggle("slow");

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

FUNCIÓN $()

Antes de realizar cualquier acción en el documento con jQuery(), debemos percatarnos de que el documento esté listo. Para ello usamos $(document).ready():

 

 

El código que pongamos dentro de esta función se ejecutará una vez que la página se ha terminado de cargar.

$(document).ready(function() {
    //Aquí van todas las acciones del documento.
});

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

En el propio sitio Web de jQuery puedes encontrar una extensa documentación, tutoriales, descargas, etc. Aquí tienes el API: http://api.jquery.com/

 

 

Lo primero que debes hacer es descargar la librería de su página Web:  http://jquery.com/download/

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Existen 2 maneras de utilizar jQuery:

  • Descargar la librería de su página Web:  http://jquery.com/download/ e incluyéndola como un JS.
    • De esta forma siempre la tendrás disponible.
  • Haciendo referencia a su CDN online.
    • Es más rápido...

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

EMPEZANDO CON JQUERY

a) Referenciando el fichero en local:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <p>jQuery</<p>
    <script src="js/jquery.js"></script>
  </body>
</html>

En el atributo src tienes que indicar la ruta en la que se encuentra el fichero js de jquery.

 

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

EMPEZANDO CON JQUERY

b) Referenciando un recurso online:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <p>jQuery</p>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

A continuación, vamos a hacer que al pulsar en el enlace, se nos muestre un alert. Para ello, pega este código en unas etiquetas <script> dentro del head:

<a href="http://www.google.es">Click me</a>

<script type="text/javascript">
    $(document).ready(function(){
       $("a").click(function(event){
          alert("Thanks for visiting!");
       });
     });
</script>

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Con este código estamos indicando lo siguiente:

  1. Espera a que termine de cargarse totalmente la página.
  2. Selecciona todos los enlaces que haya en la página.
  3. Implementa su evento onclick.
  4. Cuando se pinche en cualquier enlace, muestra un alert.

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Si quieres cancelar el comportamiento por defecto de un control al realizar una acción sobre él, puedes utilizar el método preventDefault.

$(document).ready(function(){
  $("a").click(function(event){
     alert("As you can see, the link no longer took you to google.es");
     event.preventDefault();
   });
 });

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

3 MANERAS DE SELECCIONAR ELEMENTOS

 

En el siguiente enlace tienes algunos selectores especiales que puedes necesitar en el futuro:  http://docs.jquery.com/Selectors

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

SELECTORES

En jQuery,  también puedes utilizar todos los selectores CSS que hasta ahora utilizabas para definir estilos en una CSS. Por ejemplo, dado el siguiente enlace:

<a id="link" class="linksClass" href="http://jquery.com/">jQuery</a>
$("#link"); //utilizando el id
$(".linksClass"); //utilizando la clase CSS

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

SELECTORES

 

<a id="link" class="linksClass" href="http://jquery.com/">jQuery</a>
alert($("#link").text()); // Obtengo el contenido
$("body").append($(".linksClass").text()); //Añado el contenido dentro de la página

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

EJEMPLO

Alineación horizontal de los contenidos:

  • Nos descargamos el fichero de ejemplo.
<style type="text/css">
    .horizontal {
        float: left;
        list-style: none;
        margin: 10px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $('#selected-media > li').addClass('horizontal');
    });
</script>

Hijos de primer nivel

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

Se puede incluir la referencia a jQuery y el código anterior::

    <script src="js/selectors.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
$(document).ready(function () {
    $('#selected-media > li').addClass('horizontal');
});

js/selectors.js

Si quito el >, entonces lo hace sobre 

todos los li

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

SELECTORES DE ATRIBUTOS

Nos permite seleccionar los elementos que tienen un determinado atributos

Ejemplo: seleccionar todas las imágenes que tienen atributo alt

$('img[alt]')
$('a[href]')
$('body').append($('a[href]'));
 $('body').append($('a[href="http://www.harrypotter.co.uk/jkrowling.htm"]'));

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

SELECTORES DE ATRIBUTOS

La notación utilizada tiene similitudes con las expresiones regulares:

  • ^= para comprobar el comienzo de una cadena
  • $= para el final
  • *= para comprobar contenido en cualquier parte de la cadena
  • != para la negación

 

$('a[href^="http://"]')
$('a[href$=".doc"]')
$('a[href^="mailto:"]')

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

SELECCIÓN DEL PRIMER Y ÚLTIMO ELEMENTO

También podríamos acceder de manera directa al primer y último elemento de una lista de elementos mediante :first y :last.

 

 $('body').append($("#selected-media li:first ul li:last").text());

jQuery sólo debe ser utilizada para añadir comportamiento o contenido dinámico. El contenido estático debe ser especificado en el HTML

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

crea un proyecto...

... Y copia y pega cada fragmento a continuación, para ejemplificar el uso de los atributos en jQuery.

 

UT 2: lenguajes de scripting

JQuery

eugeniaperez.es

atributos

.addClass(): añade una clase CSS al elemento

 

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { margin: 8px; font-size:16px; }
            .selected { color:blue; }
            .highlight { background:yellow; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>

        <p>Hello</p>
        <p>and</p>
        <p>Goodbye</p>

        <script>
            $("p:last").addClass("selected");
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.attr(): obtiene o establece un valor a un atributo determinado

<!DOCTYPE html>
<html>
<head>
    <style>
        em {
            color: blue;
            font-weight: bold;
        }

        div {
            color: red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
    The title of the emphasis is:<div></div>
    <script>
        var title = $("em").attr("title");
        $("div").text(title);
    </script>
</body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.hasClass(): determina si un elemento tiene asignado una clase CSS determinada

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            margin: 8px;
            font-size: 16px;
        }
        .selected {
            color: red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>This paragraph is black and is the first paragraph.</p>
    <p class="selected">This paragraph is red and is the second paragraph.</p>
    <div id="result1">First paragraph has selected class: </div>
    <div id="result2">Second paragraph has selected class: </div>
    <div id="result3">At least one paragraph has selected class: </div>
    <script>
        $("div#result1").append($("p:first").hasClass("selected").toString());
        $("div#result2").append($("p:last").hasClass("selected").toString());
        $("div#result3").append($("p").hasClass("selected").toString());
    </script>

</body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.html(): obtiene o establece el contenido HTML dentro de un elemento

<html>
<head>
    <style>
        p {
            margin: 8px;
            font-size: 20px;
            color: blue;
            cursor: pointer;
        }

        strong {
            text-decoration: underline;
        }

        button {
            cursor: pointer;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p><strong>Click</strong> to change the <span id="tag">html</span></p>
    <p>to a <span id="text">text</span> node.</p>
    <p>This<button name="nada">button</button> does nothing.</p>
    <script>
        $("p").click(function () {
            var htmlStr = $(this).html();
            $(this).text(htmlStr);
        });
    </script>
</body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.removeAttr(): borra un atributo de un elemento

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <button>Enable</button>
    <input type="text" title="hello there" />
    <div id="log"></div>

    <script>
        (function () {
            var inputTitle = $("input").attr("title");
            $("button").click(function () {
                var input = $(this).next();

                if (input.attr("title") == inputTitle) {
                    input.removeAttr("title")
                }

                $("#log").html("input title is now " + input.attr("title") +". Does not exist anymore");
            });
        })();
    </script>
</body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.removeClass(): borra una clase CSS de un elemento

<html>
    <head>
        <style>
            p { margin: 4px; font-size:16px; font-weight:bolder; }
            .blue { color:blue; }
            .under { text-decoration:underline; }
            .highlight { background:yellow; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p class="blue under">Hello</p>
        <p class="blue under highlight">and</p>
        <p class="blue under">then</p>
        <p class="blue under">Goodbye</p>

        <script>$("p:even").removeClass("blue");</script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.removeProp(): borra una propiedad de un elemento

<html>
<head>
    <style>
        img {
            padding: 10px;
        }
        div {
            color: red;
            font-size: 24px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p></p>
    <script>
        var $para = $("p");
        $para.prop("luggageCode", 1234);
        $para.append("The secret luggage code is: ",
        String($para.prop("luggageCode")), ". ");
        $para.removeProp("luggageCode");
        $para.append("Now the secret luggage code is: ",
        String($para.prop("luggageCode")), ". ");
    </script>
</body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.toggleClass(): dependiendo  de si la clase CSS ya estaba presente o no, añade o borra

una o más clases CSS sobre un elemento.

<!DOCTYPE html>
<html>
    <head>
        <style>

            p { margin: 4px; font-size:16px; font-weight:bolder;
                cursor:pointer; }
            .blue { color:blue; }
            .highlight { background:yellow; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p class="blue">Click to toggle</p>
        <p class="blue highlight">highlight</p>
        <p class="blue">on these</p>
        <p class="blue">paragraphs</p>
        <script>
            $("p").click(function () {
                $(this).toggleClass("highlight");
            });
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

atributos

.val(): obtiene o establece el valor de un

elemento. En el siguiente ejemplo se

pueden ver los valores seleccionados en

dos desplegables, uno de selección única

y otro de selección múltiple.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { color:red; margin:4px; }
            b { color:blue; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p></p>

        <select id="single">
            <option>Single</option>
            <option>Single2</option>
        </select>

        <select id="multiple" multiple="multiple">
            <option selected="selected">Multiple</option>
            <option>Multiple2</option>
            <option selected="selected">Multiple3</option>
        </select>

        <script>
            function displayVals() {
                var singleValues = $("#single").val();
                var multipleValues = $("#multiple").val() || [];
                $("p").html(" <b> Single: </b> " +
                        singleValues +
                        " <b> Multiple: </b> " +
                        multipleValues.join(", "));
            }
            $("select").change(displayVals);
            displayVals();
        </script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

actividades

Revisa la actividad 1, que es la misma que la 26, pero hecha con jQuery.

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

recorrido de colecciones

jQuery nos ofrece también una manera mucho más natural de recorrer colecciones de elementos con una sintaxis más simple que el clásico bucle for:

 

eugeniaperez.es

var enteros = [52, 97];
$.each(enteros, function (index, value) {
     alert(index + ': ' + value);
});

UT 2: lenguajes de scripting

JQuery

recorrido de colecciones

Vamos a recorrer lo que se conoce como array asociativo:

 

eugeniaperez.es

var persona = {
  "nombre": "Julen",
  "profesion": "programador",
  "aficion": "futbol"
};
$.each( persona, function( key, value ) {
  alert( key + ": " + value );
});

El each es aún más cómodo, ya que nos permite acceder tanto a la clave como al valor de cada posición del array.

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.after(): inserta contenido después del elemento seleccionado.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>p { background:yellow; }</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>I would like to say: </p>
        <script>$("p").after("<b> Hello </b>");</script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.append(): inserta contenido al final del elemento seleccionado.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { background:yellow; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>I would like to say: </p>
        <script>
            $("p").append("<strong> Hello </strong>");
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.before(): lo contrario a after().

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>p { background:yellow; }</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p> is what I said...</p>
        <script>$("p").before("<b>Hello</b>");</script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.prepend(): inserta contenido al principio del elemento seleccionado.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>p { background:yellow; }</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>there, friend!</p>

        <p>amigo!</p>
        <script>$("p").prepend("<b> Hello </b>");</script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.css(): obtiene o establece el valor de una propiedad CSS en el elemento seleccionado.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>
            div { width:60px; height:60px; margin:5px; float:left; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <span id="result"></span>
        <div style="background-color:blue;"></div>
        <div style="background-color:rgb(15,99,30);"></div>

        <div style="background-color:#123456;"></div>
        <div style="background-color:#f11;"></div>
        <script>
            $("div").click(function () {
                var color = $(this).css("background-color");
                        $("#result").html("That div is <span style='color:" +
                        color + ";'> " + color + " </span>.");
            });

        </script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.empty(): borra todos los nodos hijos del elemento seleccionado.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { background:yellow; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>
            Hello, <span>Person</span> <a href="javascript:;">and person</a>
        </p>

        <button>Call empty() on above paragraph</button>
        <script>
            $("button").click(function () {
                $("p").empty();
            });
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.height(): obtiene la

altura del elemento

seleccionado.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>
            body { background:yellow; }
            button { font-size:12px; margin:2px; }
            p { width:150px; border:1px red solid; }
            div { color:red; font-weight:bold; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <button id="getp">Get Paragraph Height</button>
        <button id="getd">Get Document Height</button>
        <button id="getw">Get Window Height</button>

        <div></div>
        <p>
            Sample paragraph to test height
        </p>
        <script>
            function showHeight(ele, h) {
                $("div").text("The height for the " + ele +
                        " is " + h + "px.");
            }
            $("#getp").click(function () {
                showHeight("paragraph", $("p").height());
            });
            $("#getd").click(function () {
                showHeight("document", $(document).height());
            });
            $("#getw").click(function () {
                showHeight("window", $(window).height());
            });

        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.remove(): borra el elemento seleccionado del DOM.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>p { background:yellow; margin:6px 0; }</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>Hello</p> 
        how are 
        <p>you?</p>
        <button>Call remove() on paragraphs</button>
        <script>
            $("button").click(function () {
                $("p").remove();
            });
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

manipulación del dom

.replaceAll(): reemplaza los elementos seleccionados con un elemento dado.

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>Hello</p>
        <p>cruel</p>
        <p>World</p>
        <script>$("<b>Paragraph.</b>").replaceAll("p");</script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

Hemos visto cómo manejar eventos en Javascript añadiendo un atributo al elemento HTML, como por ejemplo el onclick:

 

 

eugeniaperez.es

<a id=”link” href=”#” onclick=”hello()”>Clic aquí</a>

jQuery nos permite manejar los eventos de una manera mucho menos intrusiva con el código HTML de nuestra página.

function hello(){
    alert('Hola');
}

UT 2: lenguajes de scripting

JQuery

EVENTOS

Sólo debemos seleccionar el elemento aL que asignarle un manejador, e indicar qué tipo de evento y qué función será el manejador:

 

 

eugeniaperez.es

 $("#link").click(function () {
       alert("Hola");
 });

En la sentencia anterior primero seleccionamos el enlace, le indicamos que queremos manejar su evento onclick (en jQuery es sólo click) y a continuación implementamos la función. 

UT 2: lenguajes de scripting

JQuery

EVENTOS

.bind(): que sirve realmente es para asignar un evento a un manejador de eventos.

No obstante, acabamos de ver cómo se hacía eso en jQuery, y no hemos utilizado el bind(). Esto es por realmente click() es una manera corta de llamar a bind(“click”).

No obstante, bind() tiene sus ventajas...

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

EVENTOS

...bind() tiene sus ventajas, como la posibilidad de asignar múltiples eventos a la vez:

 

 

 

eugeniaperez.es

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

UT 2: lenguajes de scripting

JQuery

EVENTOS

.blur()Se lanza cuando un elemento pierde el foco de selección:

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <form>
            <input id="target" type="text" value="Field 1" />
            <input type="text" value="Field 2"/>
        </form>
        <div id="other">
            Trigger the handler
        </div>
        The event handler can be bound to the first input field:
        <script>
            $('#target').blur(function () {
                alert('Handler for .blur() called.');
            });
        </script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.change(): Se lanza cuando cambia el valor de un elemento. Este evento puede ser lanzado por los siguientes controles:

Input

Textarea

Select

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <form>
            <input class="target" type="text" value="Field 1" />
            <select class="target">
                <option value="option1" selected="selected">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </form>
        <div id="other">
            Trigger the handler
        </div>
        <script>
            $('.target').change(function () {
                alert('Handler for .change() called.');
            });
        </script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.click(): Se dispara cuando se hace click en el elemento indicado.

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="target">
            Click here
        </div>
        <div id="other">
            Trigger the handler
        </div>

        <script>
            $("#target").click(function () {
                alert("Handler for .click() called.");
            });
        </script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.delegate()similar al bind(), ya que no sirve para capturar eventos, sino para asignarlos a manejadores,

pero asigna eventos a

elementos que aún no

se encuentran en la

página HTML.

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { background:yellow; font-weight:bold; cursor:pointer; 
                padding:5px; }
            p.over { background: #ccc; }
            span { color:red; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>Click me!</p>
        <span></span>
        <script>
            $("body").delegate("p", "click", function () {
                $(this).after("<p> Another paragraph! </p>");
            });
        </script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

event.preventDefault(): estamos cancelando el comportamiento por defecto de una determinada acción.

Por ejemplo, cuando pinchamos en un enlace, el comportamiento por defecto será redirigirnos a la dirección que esté establecida en el atributo href.

Si lo que queremos es hacer otra cosa y cancelar esta redirección, deberemos llamar a este método.

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

EVENTOS

event.preventDefault(): estamos cancelando el comportamiento:

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>

        <a href="http://jquery.com">default click action is prevented</a>
        <div id="log"></div>

        <script>
            $("a").click(function (event) {
                event.preventDefault();
                $('<div/>')
                        .append('default ' + event.type + ' prevented')
                        .appendTo('#log');
            });
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.focus(): Al contrario que blur(), este evento se dispara cuando el elemento indicado recibe el foco.

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>span {display:none;}</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p><input type="text"/> <span>focus fire</span></p>

        <p><input type="password"/> <span>focus fire</span></p>
        <script>
            $("input").focus(function () {
                $(this).next("span").css('display', 'inline').fadeOut(1000);
            });
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.hover(): Se dispara

cuando el puntero

del ratón pasa por

encima del elemento

indicado.

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul { margin-left:20px; color:blue; }
            li { cursor:default; }
            span { color:red; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <ul>
            <li>Milk</li>
            <li>Bread</li>
            <li class='fade'>Chips</li>

            <li class='fade'>Socks</li>
        </ul>
        <script>
            $("li").hover(
                    function () {
                        $(this).append($("<span> ***</span>"));
                    },
                    function () {
                        $(this).find("span:last").remove();
                    }
            );

        //li with fade class
            $("li.fade").hover(function () {
                $(this).fadeOut(100);
                $(this).fadeIn(500);
            });

        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.on()Vincula manejadores de

eventos al elemento

seleccionado. Este método

es el recomendado a partir

de la versión 1.7 de jQuery.

Se puede revertir el efecto de

on() con el método off().

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>  
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <form>
            <input id="target" type="text" value="Field 1" />
            <input type="text" value="Field 2" />
        </form>
        <div id="other">
            Trigger the handler
        </div>
        <script type="text/javascript">
            //The event handler can be bound to the first input field:
            $("#target").blur(function () {
                alert("Handler for .blur() called.");
            });

            /*$("#target").on('blur', function() {
             alert("Handler for .blur() called.");
             });*/

            /*$(document).ready(function(){
             $("#target").on('blur', function(){callBlur();});
             });*/

            var callBlur = function () {
                alert("Handler for .blur() called.");
            };


        </script>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.ready(): Todo lo que codifiquemos dentro de ready() se ejecutará una vez que la página haya terminado de cargarse.

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>p { color:red; }</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("p").text("The DOM is now loaded and can be manipulated.");
            });
        </script>
    </head>
    <body>
        <p>Not loaded yet.</p>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EVENTOS

.submit(): Se dispara cuando se intenta enviar un formulario. Por tanto, este evento sólo puede ser asociado a elementos form. A su vez, los formularios sólo pueden ser enviados por los siguientes elementos:

  • <input type=”submit”>
  • <input type=”image”>
  • <button type=”submit”>

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

EVENTOS

.submit(): Se dispara cuando

se intenta enviar un formulario:

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <style>

            p { margin:0; color:blue; }
            div,p { margin-left:10px; }
            span { color:red; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>Type 'correct' to validate.</p>
        <form action="javascript:alert('success!');">
            <div>
                <input type="text"/>

                <input type="submit"/>
            </div>
        </form>
        <span></span>
        <script>

            $("form").submit(function () {
                if ($("input:first").val() == "correct") {
                    $("span").text("Validated...").show();
                    return true;
                }
                $("span").text("Not valid!").show().fadeOut(1000);
                return false;
            });
        </script>

    </body>
</html>

UT 2: lenguajes de scripting

JQuery

actividades

Realiza la Actividad 2: está relacionada con los eventos:

 

 

 

 

 

 

 

eugeniaperez.es

clase 2

UT 2: lenguajes de scripting

JQuery

EFECTOS

show(): Muestra uno o varios elementos seleccionados si en ese momento están ocultos:

 

 

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("p").show()
            });
        </script>
    </head>
    <body>
        <p style="display:none">Hello 1</p>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EFECTOS

hide(): Oculta un elemento que en ese momento se está mostrando.

 

 

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("p").hide();
                $("a").click(function () {
                    $(this).hide();
                    return true;
                });
            });
        </script>
    </head>
    <body>
        <p>Hello</p>
        <a href="#">Click to hide me too</a>
        <p>Here is another paragraph</p>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EFECTOS

toggle(): es una combinación de los dos anteriores. Toggle() oculta un elemento si está visible, y lo muestra si no está visible:

 

 

 

 

 

 

 

 

eugeniaperez.es

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {

                $("button").click(function () {
                    $("p").toggle();
                });

            });
        </script>
    </head>
    <body>
        <button>Toggle</button>
        <p>Hello</p>
        <p style="display: none">Good Bye</p>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EFECTOS

slideDown(): Hace aparecer un

elemento en la página mediante

un efecto de cortina descendente.

 

 

 

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {

                $(document.body).click(function () {
                    if ($("div:first").is(":hidden")) {
                        $("div").slideDown("slow");
                    } else {
                        $("div").hide();
                    }
                });
            });
        </script>
        <style>
            div { background:#de9a44; margin:3px; width:80px; 
                  height:40px; display:none; float:left; }
        </style>
    </head>
    <body>
        Click me!
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EFECTOS

slideUp():Consigue el mismo

resultado que slideDown(), pero

en este caso el efecto de cortina

es ascendente.

 

 

 

 

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {

                $(document.body).click(function () {
                    if ($("div:first").is(":hidden")) {
                        $("div").show("slow");
                    } else {
                        $("div").slideUp();
                    }
                });

            });
        </script>
        <style>
            div { background:#3d9a44; margin:3px; width:80px; 
                  height:40px; float:left; }
        </style>
    </head>
    <body>
        Click me!
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EFECTOS

fadeIn(): Hace aparecer un

element en la página poco a poco

ajustando su opacidad.

 

 

 

 

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {

                $(document.body).click(function () {
                    $("div:hidden:first").fadeIn("slow");
                });

            });
        </script>
        <style>
            span { color:red; cursor:pointer; }
            div { margin:3px; width:80px; display:none;
                  height:80px; float:left; }
            div#one { background:#f00; }
            div#two { background:#0f0; }
            div#three { background:#00f; }
        </style>
    </head>
    <body>
        <span>Click here...</span>
        <div id="one"></div>
        <div id="two"></div>
        <div id="three"></div>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

EFECTOS

fadeOut(): Similar a fadeIn(), pero

en este caso para hacer

desaparecer un element.

 

 

 

 

 

 

 

 

 

eugeniaperez.es

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {

                $("p").click(function () {
                    $("p").fadeOut("slow");
                });
            });
        </script>
        <style>
            p { font-size:150%; cursor:pointer; }
        </style>
    </head>
    <body>
        <p>
            If you click on this paragraph
            you'll see it just fade away.
        </p>
    </body>
</html>

UT 2: lenguajes de scripting

JQuery

jquery ui

jQuery UI nos proporciona la posibilidad de enriquecer nuestra interfaces de usuario con multitud de efectos, controles, etc., ya predefinidos.

A continuación veremos algunos de los más comunes, pero en el siguiente enlace tienes la lista completa:

http://jqueryui.com/

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

jquery ui

 

Es útil atraer la atención del usuario hacia algún lado de la página cuando ésta contiene información relevante

(si bien las normas de usabilidad aconsejan no abusar de este tipo de efectos). 

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

jquery ui

Por ejemplo, en algunos sitios Web se puede ver que cuando el usuario introduce incorrectamente sus datos de login, la página además de mostrarle un mensaje de error, hace moverse al componente que contiene los campos de usuario y contraseña.

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

jquery ui

En los EJEMPLOS, descarga el ejemplo de LoginShake:

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

jquery ui LoginShake :

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

<form id="loginSample" style="border: 3px solid rgb(153, 153, 153); width: 300px; padding: 6px;">
            <p>
                <label for="username">Username:</label>
                <input id="username" type="text">
            </p>
            <p>
                <label for="password">Password:</label>
                <input id="password" type="password">
            </p>
            <p>
                <input type="submit" value="Login">
            </p>
</form>
<p>
            <input type="button" id="bounce" value="Bounce">
            <input type="button" id="highlight" value="Highlight">
            <input type="button" id="pulsate" value="Pulsate">
            <input type="button" id="shake" value="Shake">
</p>
 <script type="text/javascript">
            $("#bounce").click(function () {
                $("#loginSample").effect("bounce");
            });

            $("#highlight").click(function () {
                $("#loginSample").effect("highlight");
            });

            $("#pulsate").click(function () {
                $("#loginSample").effect("pulsate");
            });

            $("#shake").click(function () {
                $("#loginSample").effect("shake");
            });
			
	   $.webshims.polyfill();
</script>

UT 2: lenguajes de scripting

JQuery

jquery ui

Para utilizar jQuery UI:

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

Incluir la CSS de la jquery ui

Incluir jquery y jquery ui

UT 2: lenguajes de scripting

JQuery

jquery ui

Puedes ver efectos de jQuery UI aquí:

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

jquery ui

Compatibilidad hacia atrás HTML5:

Verás que en el código anterior aparecen referencias a librerías JS como modernizr o polyfill. En este caso, ambas librerías están intentando llenar el hueco que tienen en cuanto a HTML5 navegadores antiguos.

Los atributos HTML5 no son reconocidos por versiones de IE8 o anteriores...

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

EFECTOS

Echa un vistazo a esta web:

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

Aquí tienes otro enlace interesante:

http://codylindley.com/blogstuff/js/jquery/#

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

revisa:

Los atributos

Métodos del DOM

Eventos

Efectos

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

actividades

Actividad 1

Actividad 2

Actividad 3

Actividad 4

 

 

 

 

 

 

 

 

 

eugeniaperez.es

Act. 3: Catálogo de Ikea

Act. 4: Animación de Pikachu

UT 2: lenguajes de scripting

JQuery

vamos a "aplazar" los contenidos

jQuery mobile -> pág. 37

Mashups -> pág. 37

jQuery validator -> validaciones en el cliente, pág. 45

 

 

 

 

 

 

 

 

 

 

 

eugeniaperez.es

clase 3

UT 2: lenguajes de scripting

JQuery

revisa:

Los atributos

Métodos del DOM

Eventos

Efectos

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT 2: lenguajes de scripting

JQuery

entregas:

  • Actividades 1 y 2 -> obligatorias
  • Actividad 3 -> voluntaria -> ¡inténtala!

 

 

 

 

 

 

 

 

 

eugeniaperez.es

UT2. JQuery

By eugenia_perez

UT2. JQuery

  • 1,310