#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