jQuery 101 – The Basics

Saturday, July 16, 2011

What you should already know

Before you start using jQuery, you should have a basic knowledge of:

HTML
CSS
JavaScript

What is jQuery?

jQuery is a lightweight 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. jQuery simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

jQuery usage

This chart represents jQuery web usage queried by BuiltWith

Why using jQuery?

The best added value for jQuery is the effects you can accomplish, with less code than what it would take with JavaScript. jQuery is important because it includes the following features:

HTML element selections
HTML element manipulation
HTML event functions
HTML DOM traversal and modification
Works with AJAX
CSS manipulation
JavaScript effects and animations

The downloadable library

You can download the jQuery file from the jQuery official website : http://www.jquery.com

Getting started with jQuery

The jQuery library is a single js file and it can be included within your web page by adding the following markup:

This markup should be added inside the head tag (<head></head>) of your web page and the src should point to the path of your jQuery file. In case you have added the jQuery reference in your master page/ base page then you do not need to add a reference to the jQuery file in the content page, in other words there should be one <script> tag with jQuery file reference in the HTML source code of your web page.

Note that the jQuery file can be a local copy of the js file or one of the copies that are available on the public servers such as google or Microsoft. So the markup can be one of the following:

NB: make sure you are linking the minified version of jQuery (jquery.min.js) because it is the compressed version of jQuery file which allows you to have a significantly smaller file size, in contradiction with the uncompressed version wich is larger in file size (the uncompressed version is used only for debugging the code)

Facts about public CDN usage

Why loading jQuery file from a public server such as Google or Microsoft?The answer is by doing this you will optimize the load time of the webpage and this will guide to improve the user experience and the performance of your website. I will summarize the benefits of using CDN (Content Delivery Networks) hosted version of jQuery:

The browser will locate the jQuery file from a public server and not the server where you are hosting your website, by fetching the jQuery file from CDN your server is less loaded and will consume less bandwidth
The majority of the browsers have a limit of concurrent HTTP requests to the same server, so loading the jQuery file from CDN will be in parallel with other requests and this will improve the loading time of the webpage (Parallelize downloads across hostnames).
The majority of the page load time is spent in executing different HTTP requests for images, javascript and stylesheets, each time you visit a web page the browser store the related files (such as javascript, images, css files) in the browser history and next time when you visit this webpage again the browser will load the related files from the browser history. Say that you visits site1.com which has the jQuery linked to CDN. If you visits another site site2.com which also has jQuery linked to CDN, the browser will notice that the jQuery file was already downloaded for site1.com and will not download it again.

jQuery plug-ins

jQuery plug-ins are set of components/modules (javascript files) that adds specific abilities/functionalities to your website. There are thousands of jQuery plug-ins available on the web that cover a wide range of functionalities and easily support adding features and reduce the development time of the website. Browse jQuery plug-ins under the following link: http://plugins.jquery.com/

jQuery “Hello World” example

Create a simple HTML page and include the jQuery library

<html>

<head>

<title>jQuery Hello World</title>

$(document).ready(function () {

$("#divID").html("Hello world from jQuery!");

});

</script>

</head>

<body>

</div>

</body>

</html>

Run the page, you should be able to see a message on the page : "Hello world from jQuery!"

References

http://jquery.com/
http://docs.jquery.com/Tutorials
http://trends.builtwith.com/javascript/JQuery

1 Comment