Introduction to jQuery 3.5S2C Home « Introduction to jQuery 3.5

This section of the website is all about the jQuery library and how to use it. Though knowing JavaScript isn't a prerequisite of learning jQuery it will certainly make the journey easier. If you are completely new to the JavaScript and jQuery disciplines I recommend looking at JavaScript section of the site first. You need to have an understanding of HTML and CSS to get the most benefit from these tutorials and so looking at the in-depth tutorials on the HTML and CSS disciplines in the relevant sections will certainly help.

What is jQuery?

Written by John Resig, jQuery is a fast and compact JavaScript library that allows simplified usage of DOM traversal and modification, event handling and AJAX as well as giving us more selectors to work with and some nice effects and animations. With jQuery we can write concise powerful code which would take many lines of JavaScript code to achieve the same results. jQuery also positively encourages separation of concerns so there is no adulteration of the mark-up when using this powerful library. In these tutorials we will be using jQuery major release version 3.5.

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 can be used for your production code if you don't require 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 src="jquery-3.5.1.min.js"></script>

The links to the HTML section of the site 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 Intermediate Lesson 5 - More About Links
HTML Advanced Lesson 1 - Importing JavaScript

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 jQuery 3.5 Advanced - Lesson 1: Browser & Loading Events and  jQuery 3.5 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 3.5 Advanced - Lesson 1: Browser & Loading Events
jQuery 3.5 Advanced - Lesson 4: Event Handler Attachment Methods

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

What's Next?

In the next lesson we look at the jQuery Core and Internals methods and properties.