🏳️jQuery

Website faviconjquery.com

jQuery: The Write Less, Do More, JavaScript Library

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/).