Understanding jQuery

Sep 10, 2014


In this first post of the series of blog posts, we will start looking at jQuery and how it is making Web a much more interactive place. This series assumes that you have a basic understanding of JavaScript and how it runs inside your browser along with CSS and HTML. With that assumption, let's dive into understanding what jQuery is and some basics of jQuery framework.

What is jQuery

So, what exactly is jQuery ?

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

-From WikiPedia

As the definition says, it is a framework written on top of existing JavaScript to simplify client-side scripting during web development process. It is a pure JavaScript technology and can be used in conjunction with any other server side technology. Let's quickly go through some common usages of jQuery.

Usages of jQuery

Selecting

  • Selecting an Element on your page by it's ID
  • Selecting an Element on your page by a Class
  • Selecting an Element on your page by it's Type [Button,RadioButton,Checkbox,Label]

Actions on the Elements

  • Attaching Events To Selected Element(s) [Click,MouseIn,MouseOut]
  • Changing CSS classes, attribute values for Selected Element(s)
  • Adding/Removing HTML elements from the Selected Element(s)

These are some of the most common use cases you will find while working with jQuery. However you can do many other advanced stuff like Validation,Ajax operations etc. using jQuery.

Basic jQuery Concepts

$(document).ready()

From the usages it seems, almost anything you do with jQuery is tightly attached to your DOM. So before the DOM is loaded you can not really do anything. And that is where you will find the first jQuery function $(document).ready().

What this function essentially doing is, selecting the document and when it is ready, executing rest of your JavaScript. So the code included inside this function will only be executed when the page is downloaded and ready to be acted upon. This guarantees that whatever HTML elements your JavaScript manipulates, are available.

Creating A Simple Application

There is no server side code involved in the sample we are creating here, so you do not have to have a VisualStudio. Any HTML editor will be just fine. I am more comfortable using VisualStudio as the editor for my HTML pages. So Let's go ahead and create an Empty Asp .Net Web application.

Create Asp .Net Empty Web Application

Now, let's go ahead and add a jQuery file into our application. For the purpose of this tutorial we will be using jQuery 1.9.1.

  • Download the file from this URL
  • Create Script folder in your project
  • And add the downloaded jQuery file to that folder

Download jQuery

Add jQuery

Next, add a new HTML file in our project, in this case index.html.

Add jQuery

Add a reference of the jQuery .js file to our HTML page(In the Head section).

Reference jQuery

Writing Our First jQuery

Now that we have our basic infrastructure in place, let's go ahead and write following script. What this code does is, it waits for the document to be ready and then displays an alert.

jQuery Show Alert

Let's view our page in the browser and see how it all works together.

VisualStudio Browse With

jQuery Alert

Shorthand for $(document).ready()

Instead of using full statement you can also write *$(function () *.

jQuery document ready shorthand

If you run the page again you will see the same result.

Now that you have basic understanding of jQuery and how to integrate it in your HTML pages,we will start looking at different selectors demo in next few posts.