What is the difference between Javascript, jQuery, jQuery UI, jQuery mobile?

What is the difference between Javascript, JQuery, JQuery UI, JQuery mobile?

Javascript

Javascript is a programming language with its own syntax, functions, data structures and loops. Javascript is the most popular language used in web development.
According to Stack overflow 2018 survey results Javascript is the most popular programming language. It has become an ubiquitous in web development.

USing javascript and jquery

What is the difference between JQuery and Javascript

JQuery is a Javascript library. It is built on top of Javascript and makes use of its functions. Jquery carries the motto “write less; do more”. JQuery is an extensive library making use of Javascript features and function within its library. JQuery framework is useful for

1) Manipulating DOM elements
2) CSS Selectors manipulation
3) Handling AJAX data for communicating with servers perform actions on specific events.
4) AJAX communication with servers
5) Animation effects
6) HTTP requests

JQuery is said to have poor backwards compatibility with Internet Explorer.

What is the difference between JQuery and jQuery UI


jQuery UI is the library built upon JQuery. It is a ready-to-work framework which contains collective set of web elements like
1) Interactive elements
2) Widgets which are generally used
3) Effects
4) Utilities

Instead of creating our own elements like date picker or sortable or auto complete we can make use of this library. It consumes less development time.
jQuery UI provides its own theming and it has its own stylesheets. JQuery UI supports both desktop and mobile. As we mentioned already jQuery has low backward compatibility to IE and so jQuery UI too. jQuery UI is not seeing growing updates.
The latest version of jQuery UI is 1.12.0 and released in 2016.
JQuery UI is jQuery and nothing to compare.





To include jQuery UI in projects,

jQuery UI

JQuery mobile


JQuery mobile is an exclusive framework built for mobile upon JQuery library. It is custom made framework for mobile platform thinking mobile experience with touch screens. Features like Drag and drop and Sortable has been redesigned for mobile with better user experience.
JQuery mobile is a plugin devoted for mobile devices with its own theming and stylesheets ensuring quick development time and handling navigations and interactions. When using JQuery UI, JQuery library has to be included. JQuery mobile not only redesigns UI components but also API functionalities.

To use JQuery mobile

1) Doctype in Head tag

2) Reference to JQuery library, JQuery mobile and JQuery mobile CSS
Theme roller has a custom builder for creating UI components and it can be downloaded as a zip file.

jquerymobile

JQuery mobile and JQuery UI Vs Bootstrap JS

“There can’t be a one man show always. “

Bootstrap is considered to be a much sought after library which can be an alternative to JQuery UI and JQuery mobile. Bootstrap is a fast growing library with update UI proving a professional look.
It also includes JQuery and built on top of it providing extensive set of UI components and guidelines in its documentation.





Summing up,

1) Javascript is a programming language

2) JQuery is built in top of Javascript

3) JQuery UI and JQuery mobile are built in top of JQuery.

4) Bootstrap is built in top of JQuery.

We may use JQuery for functionality and use Bootstrap for changing look and feel and theming of the components. When we need to customize appearance to that of Bootstrap we need not avoid it.

javascript and Jquery

Comments

Post a Comment

Popular posts from this blog

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu
Read more >>

How to initialize Datatable plugin?

Image
How to initialize Datatable plugin? Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities. The assets file can be downloaded From the website, CDN From website: https://datatables.net/download/index CDN Links: https://cdn.datatables.net/ Basic Implementation of Datatable Write the basic markup of the table with data Add a class name to the table Include all the assets As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables Sites Followers Rank Country SitePoint 11456 5 Canada Learnable 123449 3 USA Flippa 143567 1 Brazil $(function(){ $("#example").dataTable(); }) You may continue th
Read more >>

Datatables.net - Plugin options

Image
Datatables jquery plugin options In PART i of this series we have discussed the basics of datatables.net plugin Datatables.net has a wide set of options which gives extensive interface support and browser compatibility. The following article clearly explains how to utilize the options provided by the plugin. The datatables.net CDN links for style sheet reference https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css The datatables.net CDN links for script reference https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css To disable all options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” at the bottom of the data table $('.promo-pricing-table').dataTable({ "dom": 'frtlip' }); }) To display “Show entries” at the
Read more >>