Client-Side Development with JQuery

jQuery clearly a library.It is official defined as a library in its own documentation.However, depending on the interpretation it also meets for criteria to be classed as a framework.

jQuery offers many advanced features such as ,

  • reveal GUI elements
  • change content
  • change CSS
  • delta-communication.

There are lot of advantages of jQuery. 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.Another advantage of jQuery over its competitors such as flash and pure CSS is its excellent integration with AJAX.

In summary:

  • 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

One of the main disadvantages of jQuery is the large number of published versions in the short doesn’t matter if you are running the latest version of jQuery you will have to host the library yourself, or download the library from Google.

Other disadvantages are:

  • jQuery is easy to install and learn instantly. But it is 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 are one of the most important parts of the jQuery library.

jQuery selectors allow you to select and manipulate HTML elements.

jQuery selectors are used to find or select HTML elements based on their name, ID, classes, types, attributes, values of attributes and much more.

All selectors in jQuery start with the Dollar sign and parentheses : $().

The element selector:

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this: $(“p”)

The #ID selector:

The jQuery #id selector uses the ID attribute of an HTML tag to find the specific element.

An id should be unique within a page so you should use the #id selector when you want to find a single unique element.

To find an element with specific ID, write a hash character, followed by the ID of the HTML element: $(“#test”)

The .class selector:

jQuery class .selector find elements with a specific class

To find elements with a specific class, write a period character, followed by the name of the class. $(“.test”)

jQuery provides a method .on() to respond to any event on the selected elements. This is called an event binding. Although .on() isn’t the only method provided for event binding.

.on(<event>,<event handler>)

The .on() method provides several useful features:

  • Bind any event triggered on the selected elements to an event handler
  • Bind multiple events to one event handler
  • Bind multiple events and multiple handlers to the selected elements
  • Use details about the event in the event handler
  • Pass data to the event handler for custom events
  • Bind events to elements that will be rendered in the future

Advanced features provided by jQuery

this object refers to the current object within the scope.

Inside event handlers, this refers to the element, the event has triggered on.

  • Data attributes
  • Refactoring with DOM objects
  • Target specific elements with generic names
  • Filters
  • CSS manipulation
  • Animation

References :