[jQuery] What is it?

OK, 2 buzz words? MVC and jQuery!!! You have heard of them a lot, right?

Let’s talk about the small one first. What is jQuery anyway?

 

1. What is jQuery?

jQuery is a “JavaScript library” to simplify the client-side scripting.

If you have ever experienced client script programming, you know how cumbersome it can be. You need to take care of different browsers, even different versions of the same browser. Also traversing DOM elements in the document is not an easy task either. Wouldn’t it be nice to have some frameworks that encapsulate all those browser specifics and provide easy-to-use navigation interfaces?

Yup. There are people who care our needs and provide the solutions. There are a couple of frameworks ever developed. jQuery is one of them. jQuery is here to make our lives easier as developers.

jQuery provides more than just cross-browser navigation features. It provides:

  • Cross-browser support
  • DOM traversal
  • DOM element selection
  • Events
  • CSS manipulation
  • Ajax
  • Add animations and effects to elements
  • Plug-ins (Extensibility)

 

2. How do I get started?

The jQuery library is a single JavaScript file. So you need to reference it on your web page.

There are 2 ways to add jQuery to your site. You can download a file from jQuery home page (http://jquery.com/) and use it as a local copy. Or you can reference it from public servers.

2.1 Use a Local Copy

  • Download the latest version of jQuery from jQuery(http://jquery.com/) site.
  • Choose the production version
  • You can modify the name of the file. (Remove the version if you want)
  • Put the file in your site
  • Add the script tag
<script src="jQuery.js"></script>

2.2 Use the copy from public servers

A number of large enterprises provide hosted copies of jQuery on existing CDN (Content Delivery Network) networks, which are available for public use.

jQuery can be linked to one of the available public servers. This approach has the following benefits:

  • It can bypass the limit of the number of downloads per domain.
  • The file is on a so-called CDN, so the file is spread across the world. A user will download the file from the nearest server.
  • Many sites link to this public location, so the file might be already cached in the local computer.

jQuery CDN

//code.jquery.com/jquery-2.1.3.min.js  Minified version
//code.jquery.com/jquery-2.1.3.js   Source version

Google Ajax API CDN

//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

Microsoft CDN

//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js

Tip: You do not need to specify the protocol (http: or https:). The browser will figure it out for you.

 

3. CDN fallback

When public CDN fails, you can provide the local backup.

<script src="//CDN/jquery.js"></script>
<script>
window.jQuery || document.write(
  '<script src="~/Scripts/jquery.min.js"></script>'
);
</script>

If CDN fails the “window.jQuery” object does not exist.

 

4. What’s Next?

Now, you just added the jQuery script file in your web page. How can we use it?

Well, think about what you’re going to do with JavaScript? Generally, you want to make your site interactive and dynamic, right? That means you are writing code to handle the events such as button clicks or timers.

In jQuery, you need to register event handlers when the page is loaded and this is done inside the document’s “ready()” function.

Write the script block after the jQuery.js reference tag. Any jQuery code should be after the “jquery.js” script.

$(document).ready(function() {
  $('#myButton').click(function() {
    alert('Hello, World!');
  }
}

The code says everything in itself. You need to add a button whose id is ‘myButton’ on the body. When the button is clicked, the “Hello, World!” message will be prompted.

You are thinking you have seen ‘#‘ somewhere. You are right. It’s CSS selector. jQuery uses CSS selector syntax to select the elements. It will minimize the learning curve of jQuery.

That’ all for now.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s