JQuery
Mississippi College
Computer Science
Dr. Bennet
  1. jQuery is a Javascript support library.
  2. Use by simply sourcing the file.
    1. You can use the one from jQuery at
      <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      Or maybe just copy it from there.
    2. Or use ours:
      <script src="https://sandbox.mc.edu/jquery/current.js"></script>
      which should be a copy the current one.
    3. The min section of the file name refers to a version with the spaces and comments removed for faster transmission. If you want a human-readable version, try without the min.
  3. Wraps the DOM elements in jQuery objects which add methods and capabilities.
  4. Everything happens through $.
  5. Getting DOM elements.
    1. Select elements $(s), where s is any CSS selector. $('p'), $('.area').
    2. Create elements $(h), where h an HTML tag. $("<div>"), $("<a>"). These are created, but must still be added to the document.
    3. The above return wrapped DOM elements. If you have an un-wrapped one, say e, from some native call, $(e) will wrap it.
  6. The select/create constructions make collections, to which modifiers are applied.
    1. $("<a>").attr("href","http://some.place.com")
    2. $("div.ooble:first-child").css('background-color','green');
    3. $("<div>").addClass('wombat');
    4. $("button.clear").on("click", () => $('#indic').css('color','red')
    5. The modifiers return the object, so can be chained. $("<div>").attr('id','divie').css('width', '20px')
    6. The modifiers apply to all selected items. $('div.area p').css('border-top', '2pt solid green')
  7. Newly created items are not attached to the DOM. Selected ones may also be attached, which moves them.
    1. z.append(x) Append x to z. $('div.bigpart').append('<p>')
    2. z.appendTo(x) Append z to x. $("<a>").appendTo('body')
    3. These also chain, $('body').attach($("<div>").attr('id','divie').css('width', '20px'))
  8. The call $(f) sets the function f to run when the page is ready to be loaded. The function f can then generate the page.
  9. jQuery is an older library. It contains a number of things which were more important in the past.
    1. An ajax function which is a nice improvement over XMLHttpRequest, but current standard fetch is better.
    2. Covering of browser differences so the same code can be run more generally.
      1. Browsers are much more consistant these days.
      2. Could still be handy if you need to support old clients.
      3. It's kind of amazing what won't go away.