jQuery is a javascript library that allows you to get more things done while writing less code. It simplifies many JavaScript tasks, as well as CSS animation, event handling, DOM manipulation, and so on.
Table of Contents
Tutorials and Online Courses
If you are interested in this programming language, here are some of the top resources where you can learn jQuery:
- Youtube’s Learn jQuery in 15 Minutes by DevTips – Travis is a fast talker that gets to the point right away. His videos are free, and can get you on track to learn right away! There are a total of three videos that cover all the basic stuff. And yes, he somehow manages to squeeze all that in just 15 minutes.
- The Complete jQuery Course: From Beginner To Advanced! – Some people are comfortable with high-paced learning, similar to Travis’s style, while others not so much. Unlike Travis’s high-paced videos, this course includes 51 lessons, takes 6 hours, and it guides you through everything from the most fundamental stuff to the most advanced ones used by professional coders daily.
- W3Schools – W3School is a platform for learning, testing, and training programming languages. Their jQuery section guides you through the world of this programming language and allows you to learn at your pace for free. Each section is covered by a quiz where you can test what you’ve learned so far. When you are done learning, you can even take a shot at the certification program, get tested, and earn a degree. However, unlike their learning resources, the certification program is not free.
- Code Academy’s Introduction to jQuery – Code Academy is an online platform that offers jQuery training. All of their content is split into small lessons supported by interesting lessons that challenge what you’ve learned. Their jQuery course is so popular that it has been taken by employers from companies such as Facebook, Google, IBM, and even NASA.
- Learn.jquery.com – This is a learning center designed and run by jQuery programmers and enthusiasts. Not only that it hosts pretty much anything that you need to learn jQuery, but it is the home to a waste community of jQuery users. If you are stuck with something, you can always open a thread on their online forum. There will be always someone to help you out or direct you to the right place where you can find the answers to your problem.
- jQuery UI in Action – jQuery UI in Action is the go-to resource for learning how to develop projects with jQuery UI. The book walks you through interactive widgets and interactions, showcasing real-world demos that provide a walkthrough of cutting-edge UI technologies via jQuery. Already familiar with jQuery? You’ll deepen your knowledge by creating 11 different applications without having to spend hours building something from scratch.
- 1 hour jQuery – Learning how to code can give you the power of a master’s degree all from your keyboard! This step-by-step 1-hour tutorial covers everything you need to know about jQuery. You will start decently by looking at how HTML works, then learn the fundamentals needed for coding using JavaScript. After that, it will teach you some basics and get into a slightly more advanced section on jQuery with topics like Animation tricks.
UI Kits
- jQuery UI – jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
- Kendo UI – Quickly build eye-catching web apps using Kendo UI’s ultimate collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue.
Best jQuery Plugins
- pagePiling.js – A simple and easy to use library that creates fullscreen scrolling websites (also known as single page websites or onepage sites) and adds landscape sliders inside the sections of the site.
- Flickerplate – A module that lets you flick through content.
- RTO+P Video Player – Play HTML5 video across all browsers.
- Animsition – This is a simple plugin for adding page transitions with CSS animations.
- Focuspoint – jQuery plugin for ‘responsive cropping’. Dynamically crop images to fill available space without cutting out the image’s subject.
- rowGrid.js – A small, lightweight jQuery plugin for placing items in straight rows.
- jsGrid – jsGrid is a lightweight client-side data grid control based on jQuery. It supports basic grid operations like inserting, filtering, editing, deleting, paging, and sorting. jsGrid is flexible and allows to customize its appearance and components.
- Vide – Add a video as background.
- Dense.js – Dense is a jQuery plugin that offers an easy way to serve device pixel ratio aware images, bringing in retina support to your website.
- Face Detection – A jQuery/Zepto Face Detection plugin that works on images and videos.
- Slick – Slick’s a jQuery plugin that gives you fully responsive carousels of just about every kind you would think of thanks to its available settings.
- Simple jQuery Slider – A simple slider that does what a simple slider has to do: slide slides! The slider has been developed with the idea to provide a slider that can be used in all your projects. It provides you with the basic features you need from a slider.
- anoFlow – Responsive lightbox gallery based on jQuery.
- Justified.js – A jQuery plugin that creates a justified image grid of supplied images.
- Shuffle Images – Shuffle Images by Pete R. Shuffle Images lets you display and shuffle multiple images by moving the cursor around or several other ways to trigger.
- jQuery.fontFlex.js – a lightweight jQuery extension for dynamically changing font sizes according to container or browser width.
- t.js – Add typewriter-like text effects.
- Morphext – The simplest text rotator powered by jQuery and Animate.css.
- Muuri – Responsive, sortable, filterable, and draggable grid layouts.
- Labelauty – A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs.
- fontIconPicker – jQuery fontIconPicker is a small (
3.22KBgzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. - HideSeek – HideSeek is simple, yet customizable jQuery plugin for live search.
- ClockPicker – ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (and jQuery) is the only dependency(s).
- table-dragger – Easily add drag-and-drop sorting to your table without jQuery.
- Tilted page scroll – Create a beautiful 3D tilted effect on the scroll.
- SVGMagic – SVGMagic is a simple jQuery plugin that searches for SVG images (including background- and inline dataimages) on your website and creates PNG versions if the browser doesn’t support SVG.
Blog Posts
jQuery is a written JavaScript code that comprises of a concise and fast JavaScript library which is used to simplify the traversing of HTML documents, handling of events, animations as well as Ajax interactions for quick web development. So what...
Most of the websites that have been developed exist to offer their services or products to visitors. Website owners spend a lot of time updating the content and keeping the webpage active and exciting in order to promote their products...
JavaScript is a traditional language that can be used to create dynamic and interactive websites. jQuery is a JavaScript library that simplifies how you interact with the DOM. Its key features include event handling, animation, and Ajax interactions. jQuery has...
The jQuery find method is one of the most powerful tools in any developer's toolbox. It can be used to locate an element based on its ID, class name or tag name and has many other options for advanced searches....
select2 is a powerful drop-down library for jQuery with many features. It supports remote data source via ajax property. All parameters in ajax property of select2 will be directly passed to jQuery's $.ajax function. To use the following codes, you need to include select2...
jQuery is a fantastic JavaScript library for developing user interactions quickly. It has made web design faster, easier and more accessible. Following are the best jQuery plugins to save you time and effort. Developed in 2006 by John Resig, jQuery...
Data tables are an important part of any admin dashboard. It helps show data to webmasters and users. Creating a data table to enhance a website can be made simpler with the help of jQuery and JavaScript libraries. These libraries...
The modern web has made it easier than ever for users to input data into forms, but a datepicker plugin can make the process even smoother. A datepicker plugin allows users to select a date from a calendar-style popup, making...
jQuery is a popular JavaScript library that makes it easier for developers to create dynamic and interactive websites. With jQuery, you can manipulate HTML elements, handle events, and create animations with ease. But when it comes to creating plugins, things...
Basic animation can be performed by various methods such as animate(), fadeIn(), and fadeOut(). $(document).ready(function(){ $("button").click(function(){ $("p").fadeOut(); }); }); $(document).ready(function(){ $("button").click(function(){ $("p").slideUp(); }); }); $(document).ready(function(){ $("button").click(function(){ $("p").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); }); Best Animation...
jQuery has :checked selector which works for checkboxes, radio buttons, and options of select elements. It returns elements that havechecked attribute as true. In combination with val() method we can retrieve value of selected radio button. <h3>Your favorite aquatic sports:</h3>...
jQuery doesn't have a built-in function to carry out this task because JavaScript already had them. Convert string to int The JavaScript parseInt() function can convert any string with a number to int. parseInt("10") => 10 parseInt("10.1") => 10 Convert...
Fixed elements are an important part of web design as they help keep important information on the page, even when the user scrolls. jQuery plugins provide an easy way to create these fixed elements, allowing developers to quickly and easily...
File upload plugins are used to upload videos, photos, documents, and other files on your websites. Adding a file upload feature on your webpage is made easy with the use of jQuery file upload plugins. Features such as drag and...
Material Design is a comprehensive visual language created by Google that combines the classic principles of good design with the innovation and possibility of technology and science. The end result is a modern, intuitive, and visually striking design that focuses...
Floating elements on websites are the latest trend. It is a fun and entertaining way to enhance webpage navigation and also to display information and advertisements. Floating elements such as images, notifications, news, headers, footers, sharing buttons, text labels, etc....
Creating attractive and informative flip effects on websites is now easier than ever with the help of jQuery flip effect plugins and CSS. Flip effects are becoming increasingly popular, as they add a layer of interactivity and fun to web...
jQuery plugins allow developers to design and style buttons on the websites. To make the site stand-out and also look trendy and stylish, web developers often look for ways to make the buttons on the site look colorful, lively and...
Form validation is an essential part of any web application. It ensures that the data entered by the user is valid and in the correct format. jQuery is a powerful and popular JavaScript library that can be used to easily...
Increasing activity and engagement on one's website is the goal of every website owner. So how do you increase engagement and activity? One great way in which you can do so is by creating a popup on your site. Adding...
As of 2011, the EU has made a new law that every time a cookie is placed in a user’s device; the users have to give their consent. Many websites use cookies. These cookies are basically a sort of tracking system that...
A Parallax is a type of scrolling effect in which the background content which in many cases is an image moves at a different speed than the foreground content which in many cases is text. The Parallax effect gives your...
The rise of the digital economy has revolutionized e-commerce development. Today, web developers need to create a user-friendly and aesthetically pleasing website in order to make customers feel comfortable in a shopping environment. jQuery plugins provide web developers with the...
One-page websites, also known as single-page applications, have become increasingly popular amongst website developers. These websites often feature all of the content for a website on a single page, rather than breaking the content up over multiple pages. This makes...
Cropping images is an important part of any web page design. It ensures that images look the way you want them to and that they fit correctly in the space allotted. The right jQuery plugin can make this process much...
In order to make your websites, content, and projects more visually appealing, adding transitions can be a great way to make all the difference. Transitions are the process of changing from one content to another, featuring different web pages, images,...
We all know that responsive web design is a must nowadays. Here you have two options. The first one is to code it all by yourself, which may be complicated and time-consuming or you can use free jQuery plugins. Here...
Creating interactive maps can be a complicated process and having the right plugin can make all the difference. Fortunately, map plugins have made creating dynamic, interactive maps easier than ever before. There are many options available, and choosing the right...
Audio plugins are an inexpensive and convenient way to directly play music on your device or web page through internet access. Building your plugin is time-consuming and usually not worth the effort, which is why there are numerous audio plugins...
Autocomplete is a useful feature that is widely used for both front-end and back-end functions. It is a tedious task for users to browse through a list of available options. Autocomplete can help make this task easier by providing suitable...
When it comes to web page performance, there are a few techniques more important than lazy loading. Lazy loading is a process of loading content only when it is required, instead of preloading all of the content at once. This...
There are many situations in which a developer has to display HTML in the options of a dropdown box. They can be flag images in a country selection or descriptions in a currency selection. select2 provides templateResult and escapeMarkup to make this...
Normally when you choose a value of a select2 box, an option's text is displayed on the dropdown box. This post will show you how to display chosen value instead of the option's text. I often work with currency. Instead...
There are many situations a website has to display complex or lengthy tasks in a sequence of dialog boxes. The UI component which allows that present is called a wizard. Now we are going to talk about the top 5 jQuery...
There are situations when developers don't want their users to use the mouse's right-click despite it is not considered a best practice and user-friendly feature. Disabling the right click on a website can be a great way to ensure that...
Creating stunning galleries, slideshows and more for your website is now easier than ever with these top 9 free JavaScript and jQuery plugins. From beginners to experts, developers and designers can find something on this list to add eye-catching and...
Most PHP apps use parameters to query data. There are many cases you have to handle these parameters on the front end, hence JavaScript or jQuery is used. Actually, jQuery isn't necessary in this case. Below are small code snippets...
iframeTracker is a jQuery plugin that can track clicks on iframes embedded in a webpage on your website. Many famous services use an iframe to load their external content, they are Google Ads, Facebook Like button, Google+ button, Youtube embeds...
If you are running a service website like a restaurant or cafe, you will find this plugin comes in handy. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="openingTimes.jquery.min.js"></script> $('#business_time').openingTimes({ openingTimes: { 'Monday' : ['09:00′ , '18:00′ ], 'Tuesday' : true, 'Wednesday' : ['09:00′ ,...
Viewer Js is a powerful image viewer with many great features. It also supports player mode in which images are presented like in a slideshow. jQuery Viewer is a jQuery plugin wrapper for Viewer Js. How to Use jQuery Viewer...
nice list of tutorials and plugins, thanks.