Code has been added to clipboard!

jQuery Tutorial: Main Concepts and Principles Explained

Reading time 5 min
Published Feb 19, 2019
Updated Oct 1, 2019

If you start creating websites using JavaScript, you will encounter the jQuery tool at some point. It is a popular library, considered to be the top choice for interactivity and best user experience. It is used by approximately 74% of all websites. In our jQuery tutorial, you will learn how it simplifies programming using JavaScript language.

So, what is jQuery? It's one of the JavaScript libraries that store sets of pre-written JavaScript code. These sets help programmers complete tasks, add features and functionalities without having to write the entire code manually. Some tasks in JavaScript require many lines of code to implement. Therefore, jQuery is designed to help you save valuable time and write such tasks in fewer lines.

jQuery first appeared in 2006 and was created by John Resig. The library makes it easier to make scripting of the client-side HTML, helps to traverse and control HTML documents, and add animations.

It also simplifies event handling and development of AJAX applications. jQuery works with a user-friendly API that allows users to complete their daily tasks quicker. Because of this overall approach of making things easier for developers, jQuery is said to have become the most popular among JavaScript libraries.

The slogan of jQuery is perfectly suitable for this framework: write less, do more. Learning to use the library is not hard. You have to know the basics of JavaScript and HTML, pay attention to this jQuery tutorial and the more in-depth articles that come after.

Why You Should Learn jQuery: Purpose and Use

jQuery is lightweight, has excellent speed, and offers a lot of features as well as a chance to create your plugins if you want to add even more features. The library is free and open-source so that you can contribute to it. Furthermore, it works equally good on all the browsers.

Here is a list of reasons why you should start learning the jQuery basics:

  • Pre-written JavaScript code: you can get the code you need without having to write it yourself.
  • Flexible: users can add their plug-ins to the library.
  • Easy-to-learn: you only need to know some basics of other programming languages to use this library.
  • Animations: you can create dynamic and interactive elements easily.
  • Syntax: you can easily navigate documents, select elements, handle events and develop responsive websites using AJAX.
  • Compatibility: the result of your code will render well in any modern browser.

If you want to simplify your JavaScript programming process, you need to learn how to use jQuery and through DOM, connect with HTML elements. There are two most common ways that people use the framework:

  • jQuery Installation: you can download the jQuery library and add it to your HTML code.
  • jQuery CDN: you can include jQuery in your website straight from Content Delivery Network (CDN).

So, you don't necessarily have to download and host jQuery yourself. You can include it in your code from a CDN. Both of the major CDNs – Google and Microsoft – host jQuery. Also, jQuery CDN option is sometimes considered better because of the short loading time.

Where to Start

Before starting our jQuery tutorial, you should follow some steps to make your learning experience more productive:

  • You should have basic knowledge of HTML, CSS, and JavaScript. We have lots of easy-to-follow tutorials that will introduce you to these programming languages.
  • You can download the jQuery library software from its official website or include the library in your HTML code from CDN. Find out how this is done in this tutorial.
  • Read our jQuery tutorial. You will begin by learning jQuery basics and slowly move on to more advanced lessons. If at any time you feel stuck, try going back to previous tutorials.
  • Our jQuery tutorial will give you plenty of chances to practice writing jQuery scripts. Each topic is covered not only with theory but also useful examples, making them perfect jQuery cheat sheets. Click the Try it Live button, make changes to the example code and see corresponding results immediately.
  • If you need more information about jQuery, we strongly recommend you try looking at our interactive and video courses. You will be able to access them anytime and anywhere.

What You Will Learn

Our tutorial will provide you with the theory and practice you need to start using the jQuery library. You will learn about the syntax and the basic template for applying functions. Also, you will learn methods for applying effects and animation. However, even with a great jQuery cheat sheet, you might still feel like you can’t fully take advantage of this framework.

In this case, you should consider looking at our interactive course about jQuery. It is designed for beginners, meaning that you won’t have to face the most complicated aspects of jQuery. You will learn how to use jQuery and make your website dynamic with less JavaScript code.

Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX