jQuery

Original author(s)	John Resig
Developer(s)	The jQuery Team
Initial release	August 26, 2006; 18 years ago (2006-08-26)
Stable release	3.7.1 / (August 28, 2023; 22 months ago (2023-08-28))
Preview release	4.0.0-beta / February 6, 2024; 17 months ago (2024-02-06)
Written in	JavaScript
Platform	See § Browser support
Size	27–274 KB
Type	JavaScript library
License	MIT

jQuery is a special JavaScript library. It helps make HTML web pages easier to build and change. It's great for things like handling events (like clicks), making cool CSS animations, and using Ajax to update parts of a page without reloading.

jQuery is free to use and change, thanks to its MIT License. As of August 2022, about 77% of the top 10 million websites use jQuery. This makes it the most popular JavaScript library by far!

Its design makes it simple to find parts of a web page, create animations, and react to user actions. Developers can also create special tools called plug-ins for jQuery. These plug-ins add even more cool features and effects to websites. This modular way of building helps create powerful and dynamic web pages.

jQuery's main features, like selecting and changing parts of a web page, created a new way of programming. This new style influenced other JavaScript tools and even helped create a standard way for browsers to select elements.

Big companies like Microsoft and Nokia have included jQuery in their own software. This shows how important and useful jQuery is in web development.

What is jQuery?

At its heart, jQuery helps you work with the Document Object Model (DOM). Think of the DOM as a map or a tree that shows all the parts of a web page. jQuery makes it much simpler to find, pick, and change these parts.

For example, you can use jQuery to find all the main titles (like `

` tags) on a page. Then, you can easily change their color or make them disappear when someone clicks on them. jQuery also makes it easy to handle events. An event is something that happens, like a mouse click or a key press. With jQuery, you can tell an element what to do when an event happens, all in one simple step. It also includes common web effects, like making things fade in or out. The main ideas behind using jQuery are:

• Keeping code separate: jQuery helps keep your JavaScript code separate from your HTML code. This makes your code cleaner and easier to manage.
• Short and clear code: jQuery uses short commands and lets you link many actions together. This makes your code shorter and easier to understand.
• Works everywhere: Different web browsers sometimes handle JavaScript a bit differently. jQuery fixes these differences, so your code works the same way in most browsers.
• Easy to expand: You can easily add new features and tools to jQuery by creating plug-ins.

History of jQuery

jQuery was first created in January 2006 by John Resig. He showed it at an event called BarCamp NYC. Today, a team of developers led by Timmy Willison keeps it updated.

At first, jQuery used a different license, but it soon switched to the MIT License in 2006. This license makes it very free and open for anyone to use.

How Popular is jQuery?

jQuery has become incredibly popular over the years:

• In 2015, it was used on 62.7% of the top 1 million websites.
• By 2019, this number grew to 80% of the top 1 million websites.
• As of April 2021, jQuery was used by 77.8% of the top 10 million websites. This shows how widely it is used across the internet.

Key Features of jQuery

jQuery comes with many useful features that help web developers:

• Selecting elements: It helps you pick out specific parts of a web page using a powerful tool called Sizzle.
• Changing the page: You can easily change how elements look or what they do based on their names or classes.
• Handling events: It makes it simple to react to things like clicks, mouse movements, or key presses.
• Cool effects and animations: You can add smooth animations and visual effects to your web page elements.
• Ajax: It helps you load and send data to a server without refreshing the whole page.
• Managing tasks: It has special tools called Deferred and Promise objects to handle tasks that take time, like loading data.
• Reading JSON: It can easily understand and use data formatted as JSON.
• Adding new tools: You can extend jQuery's abilities with plug-ins.
• Helpful tools: It includes many small tools, like checking if a browser supports a certain feature.
• Works on many browsers: It makes sure your code works well across different web browsers.

Browser Support for jQuery

Newer versions of jQuery (like 3.0 and up) work with most modern web browsers. This includes recent versions of Firefox, Chrome, Safari, and Edge. It also supports Internet Explorer 9 and newer. For mobile devices, it works with iOS 7 and up, and Android 4.0 and up.

How to Use jQuery

The jQuery library is usually a single JavaScript file. This file contains all the tools you need for DOM, Events, and Ajax. You can add it to your web page by linking to a copy on your own server or from a public server. Google and Microsoft, for example, host copies of jQuery that you can use.

Here's an example of how you might link to a copy of jQuery on your own server:

<script src="jquery-3.5.1.min.js"></script>

And here's how you might link to it from a public server (like jQuery's own CDN):

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

How jQuery Works

jQuery offers two main types of functions:

• jQuery methods: These are used to work with specific parts of your web page.
• Static utility functions: These are general tools that don't directly change parts of your page.

You can use `jQuery` or a shorter name, `$`, to access all these functions.

Working with Web Page Elements

To work with elements on your web page, you often start by using the `$` function with a CSS selector. A CSS selector is like an address that points to specific elements. For example, `$('div.test')` finds all `

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

$('select#car-brands')
  .append($('<option>')
    .prop(value,"VAG")
    .text('Volkswagen')
  );

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});