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?
- 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.
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.
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,
Minified version is also hosted at Microsoft CDN .You can use jQuery file from CDN as below,
Essentially with reference of jQuery file hosted at Microsoft CDN, your will have structure of HTML file as following,
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.
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
A complete example can be given as following;
$(document).ready() is one of the most important function and denotes all the HTML elements in DOM has been loaded.
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.