This is first part of Learn jQuery series. In this post we will see,

  • What is jQuery
  • How to start using jQuery
  • Understanding document.ready function

What is jQuery?

jQuery is a succinct and concise way to write JavaScript. It is a single JavaScript file and it is having cross browser support.

image

In simple terms we can say jQuery is simplified way of writing JavaScripts. It is a single file library with very smaller size. It helps in following

  • It eases the task of HTML elements traversing. Using jQuery elements can be traversed by tag name, id, and class name.
  • It simplifies the task of nested HTML elements traversing. With very readable syntax nested child elements can be traversed.
  • It helps in handling several events across browsers.
  • It provides many plugins for animations, sorting, searching etc.
  • It helps is making Service and Ajax call.
  • It adheres to CSS 3.0 and helps to applying them with minimal code on the HTML elements.

There are many other advantages are features are available in form of plugins. As a developer jQuery makes task of writing scripts and creating web based applications simpler and easier.

How to start using it?

To work with jQuery you need to download it and make a reference of the file on the HTML page. jQuery library can be downloaded From official site of jQuery. There are two versions of files to download there.

image

Production version is minified version and its size is 32 KB. Whereas Development version is uncompressed version and its size is 247KB. You need to be very careful while choosing the file because this file needs to be loaded at the client side. And larger file size may cause the performance loss.

Locally downloaded jQuery file saved in Scripts folder can be referred as below.

image

Other way of working with jQuery is refer the file from CDN of Microsoft or Google. In this case you do not need to download the file and add it locally. The other advantage of using file from CDN is, you will have always updated copy of the jQuery file. There is one disadvantage that your application will be dependent network always.

Link for Microsoft CDN is as below,

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js

Minified version is also hosted at Microsoft CDN .You can use jQuery file from CDN as below,

image

Essentially with reference of jQuery file hosted at Microsoft CDN, your will have structure of HTML file as following,


<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" > </script>

</head>
<body>
<h2>HTML Goes here</h2>
</body>
</html>

Understanding document.ready() function

Document.ready function is get executed when all the elements in DOM gets loaded. After all the DOM elements completes loading document.ready() function gets executed. Usually you call all the scripts from this function.

image

If you want to write some jQuery on click event of HTML element button then in that case, you may want to write code in some other function rather than ready function.

In above example we are calling an anonymous function in the ready function. In some cases you may want to call a named function. You can call a named function as following. However in the majority places you will find anonymous function being called in the document.ready

image

A complete example can be given as following;


<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript"
src="/scripts/jquery-1.4.1.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
alert('Other scripts goes here');
alert('Hello jQuery');
});
</script>
</head>
<body>
<h2>HTML Goes here</h2>
</body>
</html>

$(document).ready() is one of the most important function and denotes all the HTML elements in DOM has been loaded.

Conclusion

In this post we got an introduction of jQuery. We also looked into usage and importance of ready function. I hope first post of the series was useful to you. Thanks for reading.

Advertisements

6 thoughts on “Learn jQuery Part1: Introduction to jQuery

  1. Great post! Looking forward to the next articles in the series.
    I’m starting as a Web developer in a small company and jquery is used a lot. So learning the basics is a most for me.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s