Getting Started JQ Home  <<  JQ Basics  <<  Getting Started

In this lesson we find out where to download jQuery from, how to use the library in our pages and then create the standard 'Hello World' program. This will get us started on our sojourn into the eventful world of jQuery usage.

Ok, the first thing we need to do is download the latest version of jQuery from the jQuery site. At the time of writing, the current release is version 3.5.1 and is the release used in the lessons for this website.

You have the choice of a minified version, which has a file size of just 88 kilobytes which we will be using for the lessons and can be used for your production code. Other versions include an uncompressed version which has a file size of 281 kilobytes and can be used in development and investigated to see how jQuery works and a slim version, which has a file size of just 71 kilobytes which excludes the ajax and effects modules and an be used for your production code if you don't reuire these two modules. Right-click the link you require and select "Save Link As..." from the menu to save the file of your choice.

With jQuery downloaded place the file in a directory of your choosing for use in your programs. The following code snippet is an example of importing the minified version of jQuery into a HTML file and assumes the file exists in the current directory.


<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

The links to the HTML Doctor website below give a full explanation of URLs and a discussion on importing files respectively. The lessons are helpful if you are unsure of where to place your files and how to access them from within your web pages.

HTML Doctor Website - Intermediate Lesson 1 - Metadata.

HTML Doctor Website - Intermediate Lesson 5 - More About Links.

Running the 'Hello World' Program


With jQuery downloaded and ready for use lets look at a complete webpage that displays the 'Hello World' message. In future code examples we will skip the majority of the HTML and just show the jQuery, we are just showing it here so you can see code placement and how it fits into the overall page structure.


<!DOCTYPE html> 
<html lang="en">
  <head>
    <title>Getting started with jQuery</title>
  </head>
  
  <body>
    <p>Press the button below to action the jQuery code:</p>
    <input id="btn" type="button" value="Run Hello World">
    
    <!-- For efficiency import minified jQuery -->
    <!--  library just before closing body tag -->
    <script src="jquery-3.5.1.min.js"></script>

    <!-- Our jQuery to action the button click -->
    <script>
      jQuery(document).ready(function(){
        jQuery("#btn").click(function(){
          alert("Hello World!");
        });
      });
    </script>
  </body>
</html>

Reviewing the Code

When you click on the 'Run Hello World' button the sample Javascript code is run and the alert box appears with the code we entered for the alert.

If you look at the HTML markup for the button creation notice there is no onclick attribute and thus we are not contaminating the structure (HTML) with the behaviour (our jQuery script).

We will cover the .ready() and .click() functions in more depth in lessons JavaScript Advanced - Lesson 1: Browser & Loading Events and  JavaScript Advanced - Lesson 4: Event Handler Attachment Methods respectively. For now it's worth mentioning that the .ready() function is similar to window.onload handler, but whereas the latter waits until all resources are loaded including all external resources, the .ready() function is fired after the document is fully parsed and converted into the DOM tree. This can lead to significantly faster loading of our behaviour and therefore a richer experience for our users. The other advantage that the .ready() function has over the window.onload handler, is that it can be used multiple times within the same HTML document and the functions are executed in the order they are declared.

The jQuery(document) acts as a wrapper for the entire document and can be streamlined to select the elements within the DOM we require. In fact we are using formal syntax here and we can use the &() function as an alias for jQuery(document) and you can also use shorthand for the .ready() function as follows:




// Formal syntax
jQuery(document).ready(function(){
});

// Shorthand version (we will use this from now on)
$(function(){
});

Code Conventions

jQuery syntax rules are the same as JavaScript and are covered in: JavaScript Basics - Lesson 2: JavaScript Syntax so we won't go over syntax again here but we will mention a few code conventions we adhere to throughout the coding examples. Don't worry about what the code does, as it's purely for demonstration.




$(function(){
  $('#btna').on('click', function(){
    var $listitem = $('li .list1');
    $('li #list1a').find( $listitem )
                   .css('backgroundColor', 'orange'); // method lined up underneath
  });
});
  1. When we end a function call we wil always place the closing }); on its own line for readability.
  2. We will always indent code within a function.
  3. Whenever we are creating a variable from a jQuery call as with the $listitem variable, we will always prefix it with a $ so we can recognize that this is a jQuery object.
  4. When we chain jQuery methods within the same statement we will line up the methods underneath each other.

Code placement is shown in: JavaScript Basics - Lesson 4: Applying JavaScript and application is the same for jQuery, so for the various ways to enter jQuery into programs, read this lesson.

Lesson 1 Complete

In this lesson we created a simplistic HTML page which popped up an alert window, as a gentle introduction to the jQuery library.

Related Tutorials

jQuery Advanced - Lesson 1: Browser & Loading Events
jQuery Advanced - Lesson 4: Event Handler Attachment Methods

JavaScript Basics - Lesson 2 - JavaScript Syntax
JavaScript Basics - Lesson 4: Applying JavaScript

Reference

Methods

Events - .on() event method
Events - .ready() event method