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
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 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
Formularios HTML
Formularios HTML5
Actividad en clases
UNAB: DW06 / jQuery
By Miguel Cantillana
UNAB: DW06 / jQuery
Clase 6
