a JavaScript library

write less, do more.

makes it easy

• to find the elements in a document
• manipulate elements
• event handling
• animations
• Ajax

download

to use jQuery from a CDN, just reference the jQuery file in the script tag directly from the CDN domain

• jQuery CDN
• Google CDN
• Microsoft CDN

basics

• single global function named jQuery()
• global symbol $ shortcut for jQuery

jQuery() function

heavily overloaded

four different ways to invoke it

• pass a css selector
• pass an Element or Document or Window object
• pass a string of HTML text
• pass a function

selectors

  
  $("#myDiv");
  $(".myClass");
  $("tr:first");
  $("div:has(p)");
  $("td:parent");
  $("td:empty");
  ...
  
  

manipulation

  
  $("#myDiv").addClass("myClass");
  $("#myDiv").removeClass("myClass");
  $(".inner").append("<span>Test</span>");
  $(".inner").attr('id', 'newId');
  $("#myDiv").css('border', '1px solid red');
  $("#myDiv").html();
  ...
  
  

events

  
  $("#myDiv").on("click", function() {
    console.log($(this).text());
  });

  $(".myClass").trigger("click");
  ...
  
  

effects

  
  $("#myDiv").fadeIn();
  $(".target").show();
  $(".target").hide();
  $("#someDiv").slideDown(500);
  $(".target").toggle();
  ...