Client-side development 1 - jQuery

What is JQuery ?

          jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

Advantages and Disadvantages of JQuery

Advantages 

The main advantage of jQuery is that it is much easier than its competitors.
You can add plugins easily, translating this into a substantial saving of time and effort.

The open source license of jQuery allows the library to always have constant and fast support, constantly publishing updates. The jQuery community is active and extremely hardworking.

Another advantage of jQuery over its competitors such as Flash and pure CSS is its excellent integration with AJAX.

jQuery is flexible and fast for web development

It comes with an MIT license and is Open Source

It has an excellent support community.

It has Plugins

Bugs are resolved quickly

Excellent integration with AJAX

Disadvantages

One of the main disadvantages of jQuery is the large number of published versions in the short time.

jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS

If jQuery is improperly implemented as a Framework, the development environment can get out of control.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

Here are some examples for jQuery Selectors

DOM jQuery

jQuery DOM Manipulation. One very important part of jQuery is the possibility to manipulate the DOM. jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes

DOM stands for Document Object Model and is a mechanism for representing and interacting with your HTML, XHTML or XML documents. It allows you to navigate and manipulate your documents through a programming language, which in the browser will almost always be JavaScript.

jQuery Event Handlers

jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the end user's interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.

jQuery offers convenience methods for most native browser events. These methods — including .click(), .focus(), .blur(), .change(), etc. — are shorthand for jQuery's .on() method. The on method is useful for binding the same handler function to multiple events, when you want to provide data to the event handler, when you are working with custom events, or when you want to pass an object of multiple events and handlers.

 Example Methods for event handlers :-

.bind() - Attach a handler to an event for the elements.

.blur() - Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. .change() - Bind an event handler to the “change” JavaScript event, or trigger that event on an element.