Advanced jQuery


  • will add to all the elements if don't specify
  • can't use this to refer to the element with the listener --- must use $(this) becasue must be running on a jQuery object


  • select and use .click(callBackFunction) to add a click listener


  • select and use .keypress(callBackFunction) to add a keypress listener
    • fires midway between .keydown and .keyup
    • this indicates which character was entered
  • .keydown() fires when press key and .keyup() fires when release key
    • these provide a code indicating which key is pressed
    • examples:
      • 'a' will be reported as 65 by these methods, while it will report 97 from a keypress
      • 'A' will be reported as 65 by all three methods
      • that makes these better choices when catching special keystrokes such as arrow keys
  • if look at the event, 'which' will tell you which key was pressed


  • select and use .on(typeOfListener, callBackFunction) to add an on listener
  • very similar to vanilla JS's .addEventListener() because you specify what kind of event
  • Why USe .on()?
    • .click() only adds listeners for existing elements
    • .on('click') will add listeners for all potential future elements
      • must add the listener to an element that already exists and then add an extra argument that is the type of element you will be adding
        • example: $('ul').on('click', 'li', function() {...`
          • add to lis of the existing parent ul, then when add new lis to the ul they will get listeners as well


  • see 'jqueryEffects.js'/'jqueryEffects.html' for examples of the following methods


  • .fadeOut(optionalDuration, optionalCallBackFunction)
  • .fadeIn(optionalDuration, optionalCallBackFunction)
  • .fadeToggle(optionalDuration, optionalCallBackFunction)


  • .slideDown(optionalDuration, optionalCallBackFunction)
  • .slideUp(optionalDuration, optionalCallBackFunction)
  • .slideToggle(optionalDuration, optionalCallBackFunction)

Copyright © 2022