jQuery

Clase 6

Miguel Cantillana F

<miguel@ewok.cl>

jQuery

Características

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX

jQuery

Get Started

Downloading jQuery

<head>
<script src="jquery-1.11.3.min.js"></script>
</head>

jQuery CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

jQuery Syntax

Basic syntax is: $(selector).action()

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

jQuery Selectors

The .class Selector
The #id Selector
The element Selector

http://www.w3schools.com/jquery/jquery_selectors.asp

The Document

Ready Event

$(document).ready(function(){

   // jQuery methods go here...

});

jQuery addClass() Method

$("button").click(function(){
    $("p:first").addClass("intro");
});

$(selector).addClass(classname,function(index,oldclass))

Prototipo

Ejemplo

jQuery removeClass() Method

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

$(selector).removeClass(classname,function(index,currentclass))

Prototipo

Ejemplo

jQuery toggleClass() Method

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

$(selector).toggleClass(classname,function(index,currentclass),switch)

Prototipo

Ejemplo

jQuery Event Methods

jQuery Event

$("p").click(function(){
  // action goes here!!
});

$("p").dblclick(function(){
    $(this).hide();
});

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});

The on() Method

$("p").on("click", function(){
    $(this).hide();
});


$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

jQuery Effects

jQuery hide() and show()
jQuery toggle()
jQuery Fading Methods
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

jQuery Sliding Methods

jQuery Sliding

slideDown()
slideUp()
slideToggle()


$("#flip").click(function(){
    $("#panel").slideToggle();
});

$("#flip").click(function(){
    $("#panel").slideUp();
});

$("#flip").click(function(){
    $("#panel").slideDown();
});

Ejercicio

Ejercicio DOM

A partir de la página web proporcionada y utilizando las funciones DOM, mostrar por pantalla la siguiente información:

Número de enlaces de la página
Dirección a la que enlaza el penúltimo enlace
Numero de enlaces que enlazan a http://prueba
Número de enlaces del tercer párrafo

Descargar página HTML

Formularios HTML

https://www.w3schools.com/html/html_forms.asp

Formularios HTML5

http://octuweb.com/formularios-html5/

Actividad en clases

https://jsfiddle.net/1fk5fyLc/7/