#7 – jQuery & jQuery UI
TA: Henrique Pereira
▪ JavaScript framework▪ https://jquery.com
▪ Widely used
▪ Open source
▪ 1.0 in August / 2006
▪ 3.3 in January / 2018
▪ DOM Selection (and manipulation)
▪ Events
▪ Animations
▪ Ajax
▪ Multi-browser suport
▪ Download and add to your website using a script tag
▪ Use it from a CDN
▪ New JS function jQuery( );
▪ Or $(); as a shortcut.
▪ Element ID
▪ $(“#id”)
▪ Class
▪ $(“.class”)
▪ Tag Name
▪ $(“tag name”)
▪ Everything
▪ $(“*”)
https://jsfiddle.net/n7ed7m9m/
▪ Multiple selectors (or)▪ $(“ selector1, selector2”);
▪ $(“.class1, #id2”);
▪ $(“#id1, #id2”);
▪ $(“.class1, .class2”);
▪ First and Last elements▪ $(“selector:first”);
▪ $(“selector:last”);
▪ Even and Odd▪ $(“selector:even”);
▪ $(“selector:odd”);
https://jsfiddle.net/n7ed7m9m/1/
▪ Element2 is a child of Element1
▪ $(“element1 > element2”)
▪ Element2 is a descendant of Element1
▪ $(“element1 element2”)
▪ Element2 is a sibling of Element1
▪ $(“element1 ~ element2”)
▪ Full list of selectors?
▪ https://api.jquery.com/category/selectors/
https://jsfiddle.net/brqfx18b/
1. Select elements
2. Call functions
3. ???
4. Profit!
▪ Adding Classes
▪ addClass
▪ Removing Classes
▪ removeClass
▪ Activating/Deactivating Classes
▪ toggleClass
https://jsfiddle.net/8qjf18am/
▪ Changing the CSS
▪ .css( property, value)
▪ Changing the height of an element
▪ .height()
▪ Changing the width of an element
▪ .width()
▪ Get the position of an element
▪ .position()
https://jsfiddle.net/8qjf18am/1/
▪ Toggle
▪ .toggle()
▪ Fade
▪ .fadeIn()
▪ .fadeOut()
▪ .fadeToggle()
▪ Slide
▪ .slideUp()
▪ .slideDown()
▪ .slideToggle()
https://jsfiddle.net/8qjf18am/2/
▪ Attaching an event handler function
▪ .on( event, handler )
▪ i.e. “Just hide the div when clicking the button”
▪ List of events?
▪ https://api.jquery.com/category/events/
https://jsfiddle.net/8qjf18am/4/
▪ Different Framework
▪ https://jqueryui.com
▪ Ready to use widgets
▪ Effects
▪ Interactions