Let's Get Started

jQuery - Adding to pages.

Let's add jQuery to our pages and start learning. There are several ways to include jQuery to our pages. jQuery can either be donwloaded in system or accessed via CDN [ Content Delivery Network ].

jQuery can be download from jQuery.com. However, we have already downloaded and copied jQuery. Download by click below urls.

Production jQuery

Development jQuery


Accessing from CDN.
Google CDN
Microsoft CDN
Advantage of using jQuery from Google or Microsoft CDN

Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.


Downloading jQuery using npm

jQuery is registered as a package on npm. You can install the latest version of jQuery with the command:

npm install jquery

This will install jQuery in the node_modules directory. Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.


How jQuery looks like?

With jQuery we can select HTML elements and get desired results by performing actions on them.

Syntax:

jQuery is easy to use library. Basic syntax of jQuery is: $(selector).action()

  • $ [ dollar ] sign to access/define jQuery.
  • $(selecotor) to find/select/query HTML elements.
  • .action() or operations to be performed on selected elements.
In Action:

$("p").hide(); - hides all <p> elements

$("div").append("<p>Child elements</p>"); - Append HTML element to <div> element.

$(this).addClass('jquery-pro-demo'); - Add .jquery-pro-demo class to current element.


The Ready Event.

This is to load jQuery code after the document finished loading and it's a good practice. When jQuery code runs before pages load/document ready, it call errors.

For example, hiding elements before it is created.

$(document).ready(function(){
  //javascript function.
 });

Thanks to jQuery team for creating even shorter method for document ready event.

$(function(){
  //jQuery methods further
 });

So, let's start our boat and start the jQuery tour.