jQuery Tutorial

jQuery is a small JavaScript library: a ready-made file of code that makes common jobs on a web page shorter to write. With jQuery you can find elements, react to clicks, hide and show content, and add animations, often in a single line.

jQuery's motto is "write less, do more". It has been used on millions of websites, including most WordPress sites, so knowing it is very useful when you work on existing projects.

Why Learn jQuery?

• Its syntax is short and easy to read, so it is friendly for beginners
• Many websites, themes and WordPress plugins still use it
• Effects like fading and sliding take one line
• Learning it helps you understand how JavaScript works with the page

Try it Yourself

Every complete example loads jQuery from a CDN and has a Try it Yourself button.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>

<p id="offer">Eid sale: 20% off on all kurtas!</p>
<button id="hide">Hide offer</button>

<script>
$(document).ready(function () {
  $("#hide").click(function () {
    $("#offer").fadeOut();
  });
});
</script>

</body>
</html>

What You Will Learn

• How to add jQuery to a page and the basic $() syntax
• Selectors to find elements
• Events like click, hover, typing and form submit
• Effects: hide, show, fade, slide and animate
• Reading and changing text, HTML, attributes, CSS and classes
• Moving around the page with traversing methods

Before and After jQuery

Learn the basics of HTML, CSS and JavaScript first. jQuery is JavaScript, so everything there still applies. After jQuery, many developers move on to modern tools like TypeScript and frameworks such as React.