jQuery 4.0 is coming soon! Prepare by [upgrading](https://jquery.com/download/) to the latest jQuery 3.x release. Learn more about our [version support](https://jquery.com/support/).
[jQuery](/ "jQuery")
--------------------
[Download jQuery v3.7.1](/download/)
Only the latest version of jQuery is supported.
[Discover Support Options](/support) [View Source on GitHub →](https://github.com/jquery/jquery) [How jQuery Works →](https://learn.jquery.com/about-jquery/how-jquery-works/)
### Lightweight Footprint
Only 30kB minified and gzipped. Can also be included as an AMD module
### CSS3 Compliant
Supports CSS3 selectors to find elements as well as in style property manipulation
### Cross-Browser
[Chrome, Edge, Firefox, IE, Safari, Android, iOS, and more](/browser-support/)
What is jQuery?
---------------
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Resources
---------
* [jQuery Core API Documentation](https://api.jquery.com)
* [jQuery Learning Center](https://learn.jquery.com)
* [jQuery Blog](https://blog.jquery.com)
* [Contribute to jQuery](https://contribute.jquery.com)
* [Browse or Submit jQuery Bugs](https://github.com/jquery/jquery/issues)
A Brief Look
------------
### DOM Traversal and Manipulation
Get the `<button>` element with the class 'continue' and change its HTML to 'Next Step...'
1
`$( "button.continue" ).html( "Next Step..." )`
### Event Handling
Show the `#banner-message` element that is hidden with `display:none` in its CSS when any button in `#button-container` is clicked.
1
2
3
4
`var hiddenBox = $( "#banner-message" );`
`$( "#button-container button" ).on( "click", function( event ) {`
`hiddenBox.show();`
`});`
### Ajax
Call a local script on the server `/api/getWeather` with the query parameter `zipcode=97201` and replace the element `#weather-temp`'s html with the returned text.
1
2
3
4
5
6
7
8
9
`$.ajax({`
`url: "/api/getWeather",`
`data: {`
`zipcode: 97201`
`},`
`success: function( result ) {`
`$( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );`
`}`
`});`
Related Projects
----------------
### [jQuery UI](https://jqueryui.com/)
This project is in maintenance-only mode. [Learn more](https://blog.jquery.com/2021/10/07/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/).
### [jQuery Mobile](https://jquerymobile.com/)
This project is deprecated. [Learn more](https://blog.jqueryui.com/2021/10/jquery-maintainers-continue-modernization-initiative-with-deprecation-of-jquery-mobile/).