1. Reason for use – jQuery is a widely used JavaScript library because it ‘closes the gap’ with common cross-browser compatibilty in JavaScript. It simplifies many functions that are already available in JavaScript and also adds it’s own ones that are easily used.

2. Chaining – If you have ever been reccomended jQuery by someone else, I am sure they used the term ‘chaining’ somewhere in their persuasive speech. Why? Because chaining is the most useful advantage the jQuery library gives you. Here is an example of chaining:

$(“#submenu”).html(“Hello World”).remove();

In the above ‘snippet’, I have changed the innerHTML of the element with the ID ‘submenu’ to ‘Hello World!’ and then removed it from the page.
The plain JavaScript variation of this is as follows:

var submenu = document.getElementById(“submenu”);
submenu.innerHTML = “Hello World!”;
submenu.parentNode.removeChild(submenu);

Now that’s a noticeable difference. When using jQuery effects like sliding and fading, the difference does become a lot greater, which we will work on later.

3. Basic Functions – As you have seen in the example I gave, I used 3 different functions.

1. $(“”);
2. .html(“”);
3. .remove();

1. This is what starts the jQuery. From here on out, I’ll call it the selector. This nifty thing allows you to grab either one element from the page, or an array of elements and then reference it to any functions that follow in the chain. If you were to use:
   

   $(“.CSSclass”);

   That would select every element on the page that has the class CSSclass, notice the period ( . ).

   $(“#CSSid”);

   That selects every element on the page that has the ID CSSid although it should be noted that you should only use the same ID once, i.e no repititions of IDs. Notice the hash ( # ).

   So we’ve looked at the jQuery alternatives to document.getElementById() and document.getElementsByClassName() (which is not in the DOM actually). The only other one is document.getElementsByTagName(). This also has an alternative in jQuery, much like the ID selector and the className selector, but you only use the name of the element. For example, if I wanted to grab all instances of the paragraph element, I would use:

   $(“p”);

   Notice that there is no period, hash, or anything else added, just the element name.

2. This is the innerHTML function. It works exactly as the plain JavaScript, .innerHTML.
3. This doesn’t have it’s own function in JavaScript, but it is normally referenced like so:
   

   var element = document.getElementById(“id”);
   element.parentNode.removeChild(element);

   This was also shown before, but just a little recap.

Recap on everything learned :

1. $(“”)
2. .html(“”);
3. .remove();