Nowadays, the development of web technologies is strongly influenced by the constantly growing requirements and expectations of web users. Having an interactive, impressive and trendy website is a must for successful online presence.
During the early years of the Internet the information was mainly presented as plain text. Today, however, users demand more – images, animations, audio and video, online chats, infographics, slides, etc.
One of the web technologies by which you can make your website look trendy and create exceptional user experience is jQuery.
The idea behind jQuery is reducing the amount of JavaScript code while achieving better results. jQuery adds new features to JavaScript. jQuery allows the easy creation of interactive navigation menus, sliders, galleries and many more.
If we compare visualization of information online to a dancer, we can say that at the dawn of Internet he only had to perform simple steps for beginners, but nowadays he must participate in challenging tango and salsa dancing competitions. 🙂
Before introducing you to jQuery and its power we will first have a brief look at its base – JavaScript.
What is JavaScript?
JavaScript is a scripting programming language which makes a static web page dynamic.
JavaScript is used not only for creating interactive web pages, but also for developing games and scripts that are executed by the server. One of the technologies used is Node.js.
Have a look at the new blog platform Ghost powered by Node.js.
The dynamics of a certain website may consist in changing the content which is displayed on the webpage when a user performs an action.
JavaScript was developed by Brendan Eich.He is a co-founder of the Mozilla project as until recently he was also its CEO.
In 1995 the JavaScript web technology first appeared in the Netscape Navigator 2.0 browser.
When JavaScript is enabled in the browser the user can display and manage dynamic web content.
Normally, JavaScript is executed in the browser by files containing JavaScript code.
There are other web technologies such as Flash, Silverlight, etc. which are used for making a website dynamic, but JavaScript is still the most preferred one among developers.
About 87% of the most popular 10 million websites on the web are using JavaScript.
JavaScript Libraries
Javascript library is a pre-written JavaScript code. It can be used when it’s necessary to add a certain functionality to the website. Instead of starting from scratch, a previously created library which offers this functionality can be used.
Libraries reduce the time necessary for a web project development.
What is jQuery?
jQuery is one of the most popular and widely used JavaScript libraries. It was developed by John Resig and officially released on the web in 2006.
The library is designed to facilitate and simplify writing JavaScript code, while it is flexible and provides options for adding plugins.
The library is supported by all contemporary browsers.
For developing applications and websites for mobile devices, you can use jQuery Mobile. The jQuery mobile version is supported by multiple mobile platforms.
jQuery Mobile is also used for the webmail client Horde.
Some of the advantages of the specially developed jQuery mobile version are:
- It is widely supported by mobile devices and web browsers. With jQuery Mobile it is almost certain that anyone can access your website through their mobile devices. Thanks to some of the jQuery Mobile improvements now a mobile device which cannot process CSS and Ajax can handle a web document with the most basic HTML elements.
- Web page elements such as registration forms, radio buttons and sliders are now available for touchscreen devices. It is possible to select a single checkbox without zooming the page in order to tick the desired field.
- Responsive (adaptive) design. All of the website elements like tables and texts are designed in a flexible way so that they are perfectly displayed on different mobile device resolutions.
Examples for jQuery Mobile elements:
Transition effects
http://view.jquerymobile.com/master/demos/transitions
Forms: fields, menus, radio buttons, etc.
http://view.jquerymobile.com/master/demos/forms-gallery
Mobile design themes
http://view.jquerymobile.com/master/demos/theme-classic
jQuery and the other JavaScript libraries
There are many other libraries such as MooTools, Prototype, Ext Core, jsPHP, WinJS.
When it comes to website designing jQuery stands out among many other web technologies and JavaScript libraries. The percentage of websites around the web which are using this library is huge.
According to statistics, jQuery is the most preferred library over all the other ones in a considerable number of websites.
Some of the biggest websites using jQuery are: Microsoft.com, Amazon.com, Mail.ru, Tumblr.com, Yandex.ru, MediaWiki.org.
Some of the jQuery advantages when compared to the other Javascript libraries: It is easy to use, it achieves more functionality with less coding, it is a large library which performs a lot of functions, it has thousands of ready plugins and profound help information, it supports Ajax, etc.
How to use jQuery?
The library is practically one .js file, which can be downloaded from jQueryhttp://jquery.com website and saved in the web project folder. Then it has to be embedded in the website code:
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
Or it can be directly embedded in the website with a .js file link. You can see the link here: https://developers.google.com/speed/libraries
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
How jQuery works: http://learn.jquery.com/about-jquery/how-jquery-works
If you are now starting to use jQuery, do not miss the interactive game tutorial on: https://learn.jquery.com
jQuery Plugins
The plugins expand the options of the jQuery library. There are plugins, developed by the jQuery team or by other, independent developers.
With those plugins you can add different features and extras to your website or parts of it. Some of the most popular features are: forms, animations, image sliders, responsive design, etc.
Official plugin collection:https://plugins.jquery.com
When you are choosing a suitable plugin, pay attention whether there is profound help information for it and if there is support or contact with the developer offered.
The plugins are also embedded in the website, just like the jQuery library. You first have to download the file, save it in a folder and then embed it. For example:
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="plugins.jquery.js"></script>
</head>
Some of the most impressive plugins
Our team spent most of the time ordering elements
Slick – slider
https://plugins.jquery.com/slick (kenwheeler.github.io/slick)
Color picker sliders
virtuosoft.eu/code/jquery-colorpickersliders
Sorting, filtering and categorizing elements, etc.
vestride.github.io/Shuffle
Animated filtering and sorting elements
https://mixitup.kunkalabs.com
Image sliders
plugins.jquery.com/WOWSlider/
Tooltips
amsul.ca/shadow-ui/demos/tooltip
Do you use jQuery for your web projects? Which effects do you fancy the most?