Jquery Learning Series for Beginners part 1:

This is a learning series for jQuery, In this series each article will have information related to jQuery that I feel every developer should know. Now a days, I have seen that many developers want to learn jQuery but they don’t know how to start. I would say if you are one of them or you want to know basics of jQuery then this learning series will be most helpful for you.

Following are the list of tutorials, which I will be posting on this blog:

In this article I will explain what is jQuery, why we use jQuery and why jQuery works well. If you already know all these things, you can skip this article and directly move into the second one.

What is jQuery and why we use jQuery?

Today’s world Wide web is a dynamic environment. To build interesting, interactive sites, developers are turning to Javascript libraries as jQuery, to automate common tasks and simplify complicated tasks. jQuery is a powerful javascript library that can enhance your website regardless of your background.

What jQuery Does:

Access parts of a page: Without a Javascript library, many lines of code must be written to traverse the Document Object Model (DOM) tree. jQuery offers a robust and efficient selector mechanism for retrieving exactly the piece of the document that is to be inspected.

Modify the appearnce of a page: jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered. Alter the content of a Page: jQuery can modify the content of a document itself, like text can be changed, images can be inserted or swapped, list can be reordered etc. The most important things is jQuery library removes the browser specific complextity.

Why jQuery Works Well:

Always work with sets: When we instruct jQuery, For example, find all the elements with the class “collapsible” and hide them, there is no need to loop through each returned element. Instead methods such as .hide() are designed to automatically works on set of objects instead of individula ones.

Allow multiple actions in one line: To avoid overuse of temporary variables or wastful repetition, jQuery follow a programming pattern called chaining for the majority of its methods. This means that the result of the most operations on an object is the object itself, ready for the next action to be applied to it.

So now you know why jQuery is so important, let me give you one glimpse of jQuery with this example.

For example: If I write: $(‘p’).addClass(’emphasized’);

This will find all parts of the document that have the p tag  attached with them and will add ‘emphasized’ class to selected elements.

How does it work:

The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. The $() function is actually a factory for the jQuery Object. Typically it takes a string as a parameter, which can contain any css selector expression, like “id name”, “class name” etc.

Injecting the New Class:

addClass method adds a css class to the part of the page that we have selected and removeClass method removes a class.

That’s it for now. Thanks for reading this article. In my next article I will write, how to get anything from HTML page by using jQuery and how to modify them.

Advertisements

About learningtechstuffs

I'm Ansu Jain. I have 1.5 years of experience in iPhone development and 1.5 years of experience in web technology. I have worked on a number of web framework including Drupal, Django, Moodle, Pinax, NodeJs. This blog is dedicated to things I feel that each developer must know.
Gallery | This entry was posted in Jquery, things that every developer must know and tagged , , , , , , , , , , . Bookmark the permalink.

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