jQuery: Introduction

This entry is part 1 of 33 in the series jQuery Tutorial

jQuery is a Javascript framework written in Javascript.

It is the most common libraries available for Javascript and it is the most popular Javascript library.

jQuery is easy to learn, there are other tools such as jQuery UI and jQuery Mobile that are built on top of it.

Other frameworks that are similar to jQuery are Prototype JS and Mootools.  Even Yahoo has its own set of library called the YUI.

jQuery is what make coding in Javascript fun and it is the first Javascript framework that we should learn.

jQuery: Set up the source file

This entry is part 2 of 33 in the series jQuery Tutorial

We first look at a simple jQuery program.

To use jQuery, we need to include a source (src) link to a hosted jQuery file.  Source file is usually put in between the <head> tag.

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#demo').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<h4 id='demo'>Document Not Ready</h4>
</body>
</html>

Try The Code

If you visit Google Hosted Libraries, it provides an exact link like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

To get the latest version, we can always remove the 10.2 from the link:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

This is also an advantage of using hosted code from Google as it provides a simple way to always use the latest jQuery code.

jQuery: Document ready event

This entry is part 3 of 33 in the series jQuery Tutorial

In this simple jQuery program, we have a document ready event.

$(document).ready()

The $ tells us that document is a jQuery object and it accesses a jQuery method called ready().

This ready() method is a way to check that the document we are accessing has all its elements (h1, body, p, span etc) loaded.

For example, we need to ensure that <h1> is ready before changing the text wrapped inside the heading tags.

Ready() is only one of the jQuery methods and this method is associated with document object.

Its been said that this document ready method is so common that the jQuery team develops a shorter method to write it.

$(function(){})

Look also at how we update <h4> using a jQuery method.  This line here will execute after the document is fully loaded.

$('#demo').html('Document is ready and loaded');

 

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('#demo').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<h4 id='demo'>Document Not Ready</h4>
</body>
</html>
Try The Code

jQuery: Document.ready vs windows.load

This entry is part 4 of 33 in the series jQuery Tutorial

The ready() event occurs after the HTML document has been loaded, while the load() event occurs later, when all content (e.g. images) also has been loaded.

The load() event is a standard event in the DOM, while the ready() event is specific to jQuery.

The purpose of the ready() event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn’t have to wait for all content to load.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#doc').html('Document is ready and loaded');
        });

        $(window).load(function() {
            $('#win').html('Window is ready and loaded');
        });
    </script>
</head>
<body>
<h4 id='doc'>Document Not Ready</h4>
<iframe src="https://codecrawl.com"></iframe>
<h4 id='win'>Window Not Ready</h4>
</body>
</html>

Run the code above and you will find that document will get ready first.

As for window, it will be ready after codecrawl.com is loaded inside the frame.

Try The Code

jQuery: Selectors

This entry is part 5 of 33 in the series jQuery Tutorial

JQuery selectors, together with handling of events in a page, are probably the most important components of jQuery.

The core of the jQuery library allows you to find DOM elements using CSS selector syntax and run methods on that collection.

The format of the jQuery selector is:

$(selector).html()

jQuery selectors can be based on:

  1. The HTML elements such as p, h1, h2, div.
  2. The id as in the demo id used in the earlier example.
  3. Class

An example selector based in a HTML element:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('p').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<p>I will be changed</p>
<h4>I will not be changed</h4>
<p>I will be changed</p>
</body>
</html>

Try The Code

An example based in class:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.demo_class').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<p class='demo_class'>I will be changed</p>
<h4 class='demo_class'>I will be changed</h4>
<p>I will not be changed</p>
</body>
</html>
Try The Code