Intro to JQuery, Part I


Before we begin, it’s important to note that this article assumes basic knowledge of HTML, CSS, and Javascript. If you haven’t already, it may be beneficial to review some of these concepts before proceeding.

JQuery – What is it?

JQuery is a fast, flexible, and powerful Javascript library that will make things like DOM traversal, element animation, and dynamic content management a breeze- the library’s slogan is literally “write less, do more”. Consider the following Javascript snippet:

var divBox = document.getElementById('divBox');
divBox.innerHTML = 'We just added text to this box!';

as opposed to this:

$("#divBox").text('We just added text to this box!');

We’ll get into the specifics of this later, but for now we can definitely see the convenience of JQuery’s easy-to-use syntax.


Getting Started

Getting started with JQuery is fairly simple- just download the source code from JQuery’s website and link it in your header file. If you don’t want to host the file on your servers, Google Hosted Libraries┬áis a service that will host the JQuery source code for you and allow you to link to it in your scripts. At the time of this writing, the current stable version of jQuery is 2.1.3- you can paste the code snippet below directly into your scripts and start using JQuery.

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

Starting use of JQuery is as simple as this:

$(document).ready(function() {

       //code to run on page load here


The call to $(document).ready signifies that all code inside of the call should be run on page load.

The Basics

Selecting an element by its tag is fairly straightforward. Let’s say you have a simple page with a single div tag in it. The following code stores a reference to the div element in question in a variable, called divTag:

var divTag = $("div");

From here, we can manipulate several attributes of the element, including its text, attributes, CSS properties, and more. Examine the following:

//add text to our div
divTag.text("This is how we add text to the div!");

//give our div tag an ID of "divTag"
divTag.attr('id', 'divTag');

//give our div tag a CSS border, colored red
divTag.css('border', '1px solid red');

As you can see, JQuery makes modifying DOM elements on-the-fly easier than ever. However, there’s much more to it than that. JQuery supports element selection by class, by ID, and by name as well, which will become crucial- selecting by tag can be too general at times, considering the fact that you’ll probably have many of the same tag in a single page. Let’s say we have the following element:

<div class="divClass" name="divName" id="divID">This is a div!</div>

We would be able to select our element in the following ways:

//selection by name
var divByName = $("[name='divName']")

//selection by class
var divByClass = $(".divClass");

//selection by ID
var divByID = $("#divClass");

As you can see, JQuery’s conventions for selecting elements by identifiers were derived from those of CSS, making them simple and easy to remember. Assuming we’re using the ID selection, we can now manipulate our element in any of the ways listed above and more!


Final Remarks

After reading this article I think it’s easy to see that using JQuery over vanilla Javascript will cut down on coding and debugging time and produce results that are much easier to refactor. Besides these benefits, JQuery also has many built-in functions for doing simple operations like fading an element out or moving its position on the page. Keep an eye out for part two of this series on JQuery, where we’ll delve into some of the real power of the library: click-based actions and simple animations.

Related Articles

  • Verifying the .crt and .key

    Verifying the .crt and .key Everybody had that panic moment when apache refusing to start saying ‘private key doesn’t match while installing SSL certificate. Here is how to check whether...
  • SSL Certificate Installation for Courier IMAP and POP

    This guide will provide you information on how to setup and configure SSL certificates for the courier IMAP mail server.   Prior to the installation you will need to purchase...
  • Nmap Basic commands and review of ports,port scanners, and more.

    Introduction to Nmap: Port Scans, ping sweep, and monitor for open Ports on your Local Host and/or VPS In this day and age networking is being used in almost every...
  • Intro to jQuery, Part II – Events

    Introduction Welcome! In the first part of the series, we went over some basic jQuery syntax and concepts- however, now that you’ve got your bearings, I’m sure you’re ready to...