jQuery

write less, do more

  • Traversing
  • Manipulation
  • Events
  • Ajax
  • Animation
  • Deferred

  • infrastructure framework
  • cross-browser CSS3 selectors
  • tiny wrapper over DOM with sugar
  • events
  • fluent API (dot dot dot)



  • jQuery 1.x
    • IE 6-8
  • jQuery 2+
    • IE 9+
  • jQuery vs $
  • AMD ready

Traversing

Manipulation

  • addClass() removeClass() toggleClass() hasClass()
  • attr() css()
  • html() text() val()
  • height() width()
  • offset() position()
  • DOM Insertion Inside, Outside
  • remove() detach()

Events

AJAX

  • $.ajax("data.json")
  • GET - ONLY to read
  • POST/PUT/DELETE - change
  • Code example
  • ServiceAgent pattern

ANIMATION

  • .animate()                                                                                              
    $( ".scene" )
        .animate({opacity: "0"}, 1000, "linear")
        .promise().done(function(){
            // animations are finished, run code
        });
  • ease functions
  • css transition first (IE10+)

Deferred


  • prevent callback hell
    • demo
  • name convention (continuous tense)
    • loading, saving, confirming, showing, rotating...
  • event difference

  • complex animation
    • demo



Home Task

  • Product list
    • build list from the model by string template
    • click on product should open alert("clicked")
    • double click should remove the item
  • Complex animation
    • rect moves from left top to right top, then to right bottom then returns back to left top (use different ease functions) with changing background color.

jQuery

By Vladimir Gaevoy