Introduction

We know that JavaScript is one of the three main components in front-end web development. It is, therefore, available in the form of many libraries and frameworks. Each of these frameworks provides several options to power-up the front-end experience on various platforms. Thus we have JQuery, a cross-platform JavaScript library that simplifies JavaScript code in the form of queries.

The fascinating thing about jQuery is its selector engine called ‘Sizzle’. It’s famous for its DOM traversing, selecting elements and manipulating them. In this way JQuery simplifies the whole JavaScript experience making it much easier and fast to code the programs.

How is jQuery different from JavaScript?

jQuery uses the ‘$’ dollar sign followed by a selector to manipulate DOM elements. I.e. on executing query $(‘.TestEle’), it will return DOM elements with the class name TestEle. You can manipulate the element calling some method to this returned query.

$(“.TestEle”).css(“Background”,”black”);

The above snippet will take each element having class TestEle and change its background color to Black using the css() method.

jQuery Mobile

It was initially released in 2010 but it got its first stable release version 1.4.5 in 2014 and since then it has become the first choice of most of the front-end developers. It is mainly due to its understand-ability and the fact that it follows the “write less, do more” logic.

JQuery Mobile is similar to basic jQuery but has mobile friendly methods. It’s a jQuery web framework which supports smartphones, tablets and desktop touch devices. This framework is compatible with all major mobile operating systems i.e. Android, iOS, Windows Phone, etc. Several cross-platform application development services like PhoneGap & Worklight are based on jQuery mobile for their application’s mobile support.

Working with jQuery

jQuery Mobile makes use of the semantic HTML5 elements e.g. article, sections, aside, footer etc. The section defines the main page of the website by using the data-role attribute. The page can also have a header and a footer respectively. Other than data-role, we have data-theme, data-position, data-transition and data-icon attributes which define the design theme, elements position, built-in transitions and built-in icons respectively.

Example usage:

According to this above code, Whenever a user taps on a div having class Sample, a function triggers which triggers an alert showing some message. Likewise, there are several other options that jQuery mobile offers like fluid responsiveness therefore making it much more easier and fast to develop mobile-friendly websites.