jQuery Introduction and Hello World

jQuery is a popular JavaScript library that is very useful with JavaScript development. It contains many benefits and features, including:

• It’s cross-browser
• It has selectors
• It works with events
• Ajax support
• 3rd party plugins from developers

To install, go to https://jquery.com/ and select the version you would like to download:

If you need support for Internet Explorer versions 6-8, Opera 12.1x, or Safari 5.1x you will need jQuery 1.x. Otherwise, you can use later versions:

Note the options for download. There is the compressed version and uncompressed version:

The compressed version is minified for a production environment:

And the uncompressed version is more human readable, if you want to step through the code:

We will download the human readable version. Right click the link and select Save link as:

Rename the file to jquery.js and save:

We can now use the file in our solution.

Now, create a new HTML page and add the script line to include the jQuery library (ensure the file is accessible, e.g. by copying the file to the same location as the HTML page):

There are also various jQuery CDNs you can use.

Now for our Hello World. We can use $(document).ready() to determine when the DOM has loaded. We will add a div that we will populate with a Hello World message, and we will populate it using .html.

Running this, our jQuery will execute and display our message:

Note instead of downloading the jQuery library, you can use hosted libraries and add a reference to them. One of these is Google, located at: https://developers.google.com/speed/libraries/:

Here you will see links to jQuery, that you can use in your code, e.g:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.com | LinkedIn | Twitter | YouTube

Facebook

Twitter

Linkedin