JQuery library

jQuery is a library that extends your ability to use Javascript to include many more features. jQuery is written in Javascript and you can use the jQuery library simply by adding the code in your head (please note the version does change);

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

Versions of jQuery are published here – https://code.jquery.com/ . The link above loads the library from a CDN, you can also put the js file on your server and load locally.

Once you have the ability to load jQuery you need to know how to use it. The most pervasive and useful part of jQuery is the selector. The selector is a shortcut method to be able to select an element or object from the DOM. For example;

var anElement = getElementById("elementID");
// same as
var anElement = $("#elementID");

Getting elements by ID is not all jQuery can do, but an understanding of the Selector methods is the first step to understanding the capabilities of jQuery. See https://www.w3schools.com/js/js_jquery_selectors.asp to see some examples of these selectors.

You can learn jQuery pretty easily by following the tutorial at https://www.w3schools.com/jquery/default.asp . jQuery syntax is abbreviated, but a little bit of looking at the code and you will find it pretty easy.

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

At first, this looks complex, but a little bit of looking at it and we are able to determine what it does.

$(document).ready – The Selector is on the document and the .ready is an event, so in English, it says when the document is ready execute the following code. Note that the definition of “is ready” means that the ready event has been triggered – we are talking to a computer.

So what code gets executed? Well we define a function to wrapper this code and that function is;

function(){
  $("p").click(function(){
    $(this).hide();
  });
};

So this function is going to get called when the document ready event is triggered. It in turn selects all p tags and says that when they are clicked (click event) execute the following function;

function(){
    $(this).hide();
  };

So in this last level the “this” refers to the paragraph tags – and the selector selected all, but the click event would respond to the one paragraph tag from the collection of tags that was clicked. So $(this) would be the selector for that one p tag that was clicked and the .hide() function (a jQuery function) would hide it.

To see this for yourself – try it https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide

There is much more to learn with jQuery, but this little bit will get you started, from there it is simply having a simple reference to the jQuery functions. Here is one to bookmark – https://htmlcheatsheet.com/jquery/