JQuery is an open source JavaScript library, which can be integrated with any web technology. JQuery is been there around for more than 3 years. I thought of coming up with a series of articles, which can explain JQuery in depth. I start this series with history of it followed by benefits offered. JQuery version 1.0 in 2006 is the first release of it with support to CSS selectors, Ajax support. Later, 1.1, 1.2 versions released with support to event delegation, namespaced events etc. A new plug-in called as JQuery UI got released, which includes widgets like modal dialog, tabs, accordions and effects like shake, slide etc. Current stable version of JQuery is 1.4 and JQuery UI is 1.7. We can download JQuery fromhttp://jquery.com/ . It comes in two formats one is minified and other is uncompressed. Minified version is Gzipped and minified by removing spaces, comments and reducing names of lengthy variables. Minified version is used for production deployment, since it will reduce the time to download the JQuery .js file to browser. Uncompressed version is used in development environment. In the same way, we can download JQuery UI plug-in fromhttp://jqueryui.com/download by selecting the theme along with components needed. JQuery UI comes with four components:
- Core UI - It is mandatory for working with widgets, interactions, effects properly.
- Interactions - It will help to make elements draggable, droppable, selectable etc.
- Widgets - It provides UI elements like tabs, dialogs, slider etc.
- Effects - It adds effects like slide, shake, highlight etc to an element.
We can selectively download the required components from JQuery UI. There are lot more plug-ins available, which can be downloaded from http://plugins.jquery.com/.
Now, let's move our focus towards benefits offered by JQuery. As we know, JQuery is light weight, open source, cross-browser javascript library. It works on variety of browsers like IE, Firefox, Opera, Chrome. The MIT license for JQuery allows us to integrate it in our proprietary software.
Benefits of using JQuery:
- Allows to manipulate elements in DOM in an efficient manner using selector syntax.
- Allows to alter the HTML document content dynamically like element insertions.
- Adds effects like fading, shaking to DOM elements.
- Can retrieve information from server without a postback or refreshing the page by using $.get(), $.post(), $,ajax() methods.
- Cross-browser support makes it to work consistently on all browsers. JQuery provides this feature by an abstraction layer.
- JQuery works on sets. It means, there is no need of iteration statements or loops for applying a style or action on a set of elements.
- Reduces lines of code by using chaining. Chaining allows a method to return an object itself as a result all the time, reducing usage of temporary variables.
- It is extensible. We can write our own plug-in, which will work on top of JQuery.
- Its syntax is based on CSS selectors. This feature makes designers to learn JQuery quickly.
Before start writing JQuery, we need to know few things about structure of HTML document. Since, JQuery uses CSS selectors to access elements in a DOM.
Refer below HTML document's structure:
<html>
<head>
<title>JQuery Sample HTML Page</title>
</head>
<body>
<span>
<div>This is a Section.</div>
<div>This is next Section.</div>
<div>This is Last Section.</div>
<span>
</body>
</html>
Here, <html> is parent of all other elements. In other words, all other elements are descendants of <html>. <body> and <head> are descendants as well as children of <html>. <div> are siblings of other <div> under <span> element.
I am ending the things here. In next article, we will write some sample JQuery selectors. I hope this article will be helpful for all.
- Core UI - It is mandatory for working with widgets, interactions, effects properly.
- Interactions - It will help to make elements draggable, droppable, selectable etc.
- Widgets - It provides UI elements like tabs, dialogs, slider etc.
- Effects - It adds effects like slide, shake, highlight etc to an element.
- Allows to manipulate elements in DOM in an efficient manner using selector syntax.
- Allows to alter the HTML document content dynamically like element insertions.
- Adds effects like fading, shaking to DOM elements.
- Can retrieve information from server without a postback or refreshing the page by using $.get(), $.post(), $,ajax() methods.
- Cross-browser support makes it to work consistently on all browsers. JQuery provides this feature by an abstraction layer.
- JQuery works on sets. It means, there is no need of iteration statements or loops for applying a style or action on a set of elements.
- Reduces lines of code by using chaining. Chaining allows a method to return an object itself as a result all the time, reducing usage of temporary variables.
- It is extensible. We can write our own plug-in, which will work on top of JQuery.
- Its syntax is based on CSS selectors. This feature makes designers to learn JQuery quickly.
This blog is very useful for Students , Learned a lot of new technonologies and thanks for sharing
ReplyDelete.Net Online Training Hyderabad
I am glad to read this. Thank you for this beautiful content, Keep it up. Techavera is the best MCSA Windows Server training course in Noida. Visit us For Quality Learning.Thank you
ReplyDeleteNice article . Thank you for this beautiful content, Keep it up. Techavera is the best
ReplyDeleteTally Training in Noida.
Visit us For Quality Learning.Thank you
This comment has been removed by the author.
ReplyDeleteThank you. Truly appreciate all your hardwork, especially your down-to-earth attitude. Also Visit this site for jQuery Certification
ReplyDeleteSuch an ideal piece of blog. It’s quite interesting to read content
ReplyDeletelike this. I appreciate your blog
.Net Online Course Hyderabad
Nice information thank you for posting.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you for excellent article..
ReplyDeleteUI Development Training
UI Development Training in Hyderabad
UI Development Online Training
Hi there,I enjoy reading through your article post. Thank you for sharing.
ReplyDeleteFull Stack Developer Online Training
full stack training in hyderabad
Full Stack Training in Ameerpet
Excellent blog, really awesome and informative content. Useful to many people. Keep sharing more blogs like this, thank you.
ReplyDeleteUI Development Training in Hyderabad
RPA Training in Hyderabad
Python Training in Hyderabad
Mern stack Training in Hyderabad