Web basics
Apr 1st, 2015
AGENDA
Who am I?
What is jQuery?
Installing
DOM Manipulation
Animation
Ajax
Event Handling
Awesome, isn't it?
Learn More
______________________________________________
Web Basics - jQuery
Thiago Oliveira Bonfim
Graduation - 2010
Web applications since 2009
UI Engineer - Avenue Code
______________________________________________
Web Basics - jQuery
PRE-REQUISITES
Javascript
CSS
______________________________________________
Web Basics - jQuery
What is?
Javascript library
Created in 2006
Write less, do more
Currently used by almost every website
Open Source project
______________________________________________
Web Basics - jQuery
What is?
DOM manipulation
Animation
Ajax
Event handling
______________________________________________
Web Basics - jQuery
Installing
Go to jquery.com and download
<script src="jquery-x.xx.x.min.js"></script><script src="yourScript.js"></script>
______________________________________________
Web Basics - jQuery
Dom manipulation
Change the content of the page
// html() method $("#elementId").html("Good Morning Coltec!"); // append $(".elementsClass").append("<div>Inserted After</div>");// prepend $("#elementId div").prepend("<div>Inserted before</div>");
Access attributes
______________________________________________
Web Basics - jQuery
Dom manipulation
Access classes
// Has Class $("#elementId").hasClass("className"); // Add/Remove Class $(".elementsClass").addClass("class"); $(".elementsClass").removeClass("class");// Toggle $("#elementId div").toggleClass("selectedClass");
Data access
<div class="product" data-product-code="123">...</div>
//accessing product code
$("elementId").data("product-code");
______________________________________________
Web Basics - jQuery
ANIMATION
Change the look'n'feel
// css method $("#selector").css({ 'display': 'block', 'top': '2px'}); // width and height $("#selector").width([value]);$("#selector").height([value]);// Visibility $("#selector").fadeIn(); $("#selector").fadeOut();$("#selector").toggle();// Animate$("#selector").animate({height: "100px"}, 5000);
______________________________________________
Web Basics - jQuery
Ajax
Make async requests
$.ajax({ url: "test.html"})
.done(function(data) { $(body).html( data ); })
.fail(function() { $(body).html( "Something is wrong" ); })
.always(function(){ // do something });
______________________________________________
Web Basics - jQuery
Ajax
JSON ready functions
$.getJSON( "/project.json", function(data){ // ... });
______________________________________________
Web Basics - jQuery
Event Handling
You can bind functions for events
Track and respond user experience
______________________________________________
Web Basics - jQuery
event handling
______________________________________________
Web Basics - jQuery
// Mouse events $("#selector").click(function(e){}); $("#selector").mouseenter(function(e){}) $("#selector").mouseleave(function(e){}); $("#selector").hover( function(e){// enter}, f unction(e){// leave} ); // Click $("#selector").click(function(e){});// Document$(document).ready(function{// DOM is loaded});// On$("#selector").on("click", function(){});
______________________________________________
Web Basics - jQuery
Awesome, isn't it?
jQuery solves the most common problems with interfaces
Easy to learn
Awesome community - Open source
Extensible - Plugins
______________________________________________
Awesome, isn't it?
Well, not everything are flowers :(
Some aspects we have to bear in mind:
SIZE - Mobile Experience
Modularity, Cohesion and Coupling
______________________________________________
Web Basics - jQuery
Learn More
______________________________________________
Web Basics - jQuery
Questions?
______________________________________________
Web Basics - jQuery
What is the present?
