jQuery facts for kids

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  / 28 August 2023; 23 months ago (28 August 2023)
Preview release	4.0.0-beta.2 / July 17, 2024; 12 months ago (2024-07-17)
Written in	JavaScript
Platform	See § Browser support
Size	27–274 KB
Type	JavaScript library
License	MIT

jQuery is a special tool, or a JavaScript library, that helps make websites more interactive and fun. It was created to make it easier for web developers to work with HTML (the language for building web pages) and CSS (which makes pages look good).

With jQuery, developers can easily change things on a web page, like making elements move, appear, or disappear. It also helps handle what happens when you click a button or move your mouse. jQuery is completely free to use and change. It is used by a huge number of popular websites around the world. In fact, it's one of the most used JavaScript tools out there!

jQuery's design makes it simpler to find parts of a web page, create cool animations, react to user actions (like clicks), and build Ajax applications. Ajax helps websites load new information without refreshing the whole page. Developers can also create "plug-ins" for jQuery. These are like add-ons that give jQuery even more abilities. This makes it easier to build powerful and dynamic web pages.

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

What is jQuery?

jQuery is mainly a tool for working with the Document Object Model (DOM). Think of the DOM as a map of all the parts of a web page. It shows how everything is connected, like a family tree.

jQuery makes it much simpler to find, pick, and change these parts. For example, you could use jQuery to find all the main titles on a page. Then, you could change their color or make them do something when someone clicks on them.

jQuery also has a great way to handle "events." An event is something that happens, like a mouse click or a key press. jQuery lets developers easily tell a web page what to do when these events happen. It also includes common features like fading elements in and out, or creating animations by changing CSS styles.

The main ideas behind using jQuery are:

• Keeping Code Tidy: jQuery helps keep JavaScript code separate from HTML code. This makes websites easier to manage and update.
• Simple and Clear: jQuery uses short, easy-to-understand commands. This makes writing web code faster and clearer.
• Works Everywhere: Different web browsers (like Chrome, Firefox, Safari) sometimes handle JavaScript a little differently. jQuery fixes these differences. It makes sure your code works the same way on all browsers.
• Easy to Add On: You can easily add new features to jQuery. These new features can then be shared and reused by other developers as "plugins."

History of jQuery

jQuery was first created in January 2006 by John Resig. He showed it off at an event called BarCamp NYC. It was inspired by another tool called cssQuery. Today, a team of developers helps keep jQuery updated and working well.

jQuery's license has changed a few times. It started with one license, then changed to the MIT License in 2006. For a while, it had two licenses, which caused some confusion. But since 2012, it has only been under the MIT license. This license means it's free to use, share, and change for almost any purpose.

How Popular is jQuery?

jQuery has been incredibly popular for many years:

• In 2015, it was used on over 62% of the top 1 million websites.
• By 2019, this number grew to 80% of the top 1 million websites. It was also used on 74.1% of the top 10 million websites.
• In 2021, jQuery was still used on 77.8% of the top 10 million websites.

Features of jQuery

jQuery comes with many helpful features:

• Selecting Elements: It can easily pick out parts of a web page using a special tool called Sizzle.
• Changing the Page: You can change how parts of the page look or behave based on their names or styles.
• Events: It helps your website react to things like clicks, mouse movements, or key presses.
• Effects and Animations: You can create cool visual effects and smooth animations.
• Ajax: This allows parts of a web page to update without reloading the whole page.
• Add-ons (Plug-ins): You can easily add new features to jQuery using plug-ins.
• Helpful Tools: It includes many small tools that make coding easier.
• Works on All Browsers: jQuery helps your code run smoothly on different web browsers.

Browser Support

Newer versions of jQuery (like jQuery 3.0 and up) work well 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 newer, and Android 4.0 and newer.

How to Get and Use jQuery

The jQuery library is usually a single JavaScript file. This file contains all the commands and tools jQuery offers. You can add it to your web page by either saving a copy on your own computer or by linking to a copy hosted on a public server. Many companies, like Google and Microsoft, host jQuery for free. This makes it easy for developers to use it.

Here's an example of how a developer might link to jQuery from their own computer:

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

And here's an example of linking to jQuery from a public server (a content delivery network):

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

How jQuery Works

jQuery has two main types of commands: those that work on specific parts of a web page, and general tools. Both can be used with the name `jQuery` or a shorter name, `$`.

jQuery Commands

When you use jQuery to select something on a page, like all the `div` elements with a certain style, it creates a "jQuery object." This object represents those parts of the page. You can then use special commands on this object to change those elements. For example, you could find all `div` elements with the class `test` and then add another style to them.

Chaining Commands

One cool thing about jQuery is "chaining." This means you can link many commands together, one after another. It makes your code shorter and easier to read.

For example, this code finds all `div` elements with the class `test`. Then, it tells them what to do when clicked. Finally, it adds a new style called `foo` to them.

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

Creating New Page Elements

jQuery can also create new parts of a web page. You can tell it to make a new HTML element, like a new button or a new text box. Then, you can add it to your page wherever you want.

For example, this code finds a dropdown menu on a page. Then, it creates a new option for that menu and adds it to the list.

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

Ajax with jQuery

jQuery makes it easy to send and receive data from a server without reloading the whole page. This is called Ajax. It's super useful for things like submitting a form or loading new content.

Here's a simple example of sending data to a server:

$.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);
});

This code sends information (like a name and location) to a file on the server. When the server responds, it shows a message to the user.

jQuery Plug-ins

Because of how jQuery is built, developers can create "plug-ins." These are like extra tools that add more functions to jQuery. There are thousands of jQuery plug-ins available online. They can do all sorts of things, from helping with forms to creating cool drag and drop features or pop-up windows.

The official jQuery website used to have a big list of plug-ins. After some changes, they now host their plug-ins on GitHub. This is a popular place for developers to share code. jQuery also has a "Learning Center" to help people learn JavaScript and how to make their own plug-ins.

If someone wants to use JavaScript without jQuery, there are tools that can help convert jQuery code into regular JavaScript.

Release History

Testing jQuery

QUnit is a special testing tool used to check if jQuery itself is working correctly. The jQuery team created it to test their own code. It helps them make sure that every new version of jQuery is stable and bug-free.

Alternatives to jQuery

For a long time, jQuery was super important because different web browsers handled JavaScript differently. jQuery helped make sure code worked the same everywhere.

However, modern web browsers are much better at agreeing on how JavaScript should work. This means that sometimes, developers can now use "vanilla JavaScript" (regular JavaScript without any libraries) to do what jQuery used to do. Because of this, some developers feel that jQuery is not as essential as it once was. For example, GitHub stopped using jQuery on its pages in 2018.

Still, jQuery remains a powerful and popular tool for many web developers.

See also

In Spanish: JQuery para niños

• Comparison of JavaScript-based web frameworks
• jQuery Mobile
• jQuery UI
• Web framework
• JavaScript library