jQuery - "Write Less Do More": Day 1

“jQuery is an open source JavaScript library that simplifies the interaction between an HTML document, or more precisely the Document Object model and JavaScript.”

jQuery makes Dynamic HTML (DHTML) and simplifies HTML document traversing and manipulation, DOM animation and cross-browser JavaScript development.

This is the simple explanation of jQuery. Now let's learn why you should choose to learn jQuery.

• It normalizes the difference between web browsers so that you don't need to, it's intentionally a lightweight footprint with a simple yet clever plugin architecture
• Its development is steady and consistent, that is to say, the development team is not afraid of releasing updates
• Its learning curve is approachable because it builds upon concepts that most developers and designers already understand (CSS and HTML)
• It is intentionally designed to facilitate unobtrusive JavaScript practices

These are some of the main reasons behind "Why jQuery?" as per the jQuery CookBook. We prefer jQuery because it works on a Write Less Do More Philosophy. Three concepts for this philosophy:

• Finding some elements via CSS selectors and doing something with them via jQuery methods.
• Chaining multiple jQuery methods on a set of elements.
• Using the jQuery wrapper and implicit iteration.

Implementation

Now let's implement the given three concepts.

Find Element and do something with them

Assume you want to hide a <div> element from the user. Load some new content into the hidden <div>, then change an attribute of the selected <div>, then make the hidden <div> visible again.

The following is the code:



So here in this code we are finding some elements and then doing something. Finding an element <div> from HTML using a (jQuery()) function and then did something with them, such as hid(), text(), addClass() and show().

Chaining

jQuery is constructed in a manner that will allow jQuery methods to be chained. Chaining can be understood by a rewrite of the previous code using a single JavaScript statement using chaining.



This can be written like:



And the third concept is Wrapped.

jQuery wrapped set

You will be selecting DOM elements from an HTML page that will be wrapped with jQuery functionality. It is a "wrapped set" because it is a set of elements wrapped with jQuery functionality. Let's experiment with the previous code.



Here jQuery will scan the page and place all <div> elements in the wrapper.

So these are the three concepts of this philosophy. We will learn more in the next chapter. Thanks for today.

Comment below if you have any query on today's session.