CINXE.COM

<!doctype html> <html class="no-js" lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery</title> <meta name="author" content="OpenJS Foundation - openjsf.org"> <meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="https://jquery.com/wp-content/themes/jquery.com/i/favicon.ico"> <link rel="stylesheet" href="https://jquery.com/wp-content/themes/jquery/lib/typesense-minibar/typesense-minibar.css?v=c5fa9b9a"> <link rel="stylesheet" href="https://jquery.com/wp-content/themes/jquery/css/base.css?v=9fa813cf"> <link rel="stylesheet" href="https://jquery.com/wp-content/themes/jquery.com/style.css?v=828507a9"> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://jquery.com/wp-content/themes/jquery/js/main.js?v=10baaffd"></script> <script defer type="module" src="https://jquery.com/wp-content/themes/jquery/lib/typesense-minibar/typesense-minibar.js?v=830f1ee1"></script> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel="https://api.w.org/" href="https://jquery.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://jquery.com/wp-json/wp/v2/pages/8" /><meta name="generator" content="WordPress 6.7.1" /> <link rel="canonical" href="https://jquery.com/" /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjquery.com%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjquery.com%2F&format=xml" /> <link rel="me" href="https://social.lfx.dev/@jquery"> </head> <body class="jquery home page-template page-template-page-fullwidth page-template-page-fullwidth-php page page-id-8 page-slug-index single-author singular"> <div id="banner"> jQuery 4.0 is coming soon! Prepare by <a href="https://jquery.com/download/">upgrading</a> to the latest jQuery 3.x release. Learn more about our <a href="https://jquery.com/support/">version support</a>. </div> <header> <section id="global-nav"> <nav> <div class="constrain"> <ul class="projects"> <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li> <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li> <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li> <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li> <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li> </ul> <ul class="links"> <li><a href="https://plugins.jquery.com/">Plugins</a></li> <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a> <ul> <li><a href="https://cla.openjsf.org/">CLA</a></li> <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li> <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li> <li><a href="https://contribute.jquery.org/code/">Code</a></li> <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li> <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li> </ul> </li> <li class="dropdown"><a href="https://events.jquery.org/">Events</a> <ul class="wide"> </ul> </li> <li class="dropdown"><a href="https://jquery.com/support/">Support</a> <ul> <li><a href="https://learn.jquery.com/">Learning Center</a></li> <li><a href="https://jquery.com/support/">Chat</a></li> <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li> <li><a href="https://contribute.jquery.org/bug-reports/">Report a bug</a></li> </ul> </li> <li class="dropdown"><a href="https://openjsf.org/">OpenJS Foundation</a> <ul> <li><a href="https://openjsf.org/join">Join</a></li> <li><a href="https://openjsf.org/members">Members</a></li> <li><a href="https://jquery.com/team">jQuery Team</a></li> <li><a href="https://openjsf.org/governance">Governance</a></li> <li><a href="https://code-of-conduct.openjsf.org/">Conduct</a></li> <li><a href="https://openjsf.org/projects">Projects</a></li> </ul> </li> </ul> </div> </nav> </section> </header> <div id="container"> <div id="logo-events" class="constrain clearfix"> <h2 class="logo"><a href="/" title="jQuery">jQuery</a></h2> <aside id="broadcast"></aside> </div> <nav id="main" class="constrain clearfix"> <div class="menu-top-container"> <button hidden id="menu-trigger" class="button menu-trigger" aria-expanded="false" aria-haspopup="menu">Navigation</button> <ul id="menu-top" class="menu" role="menu" aria-labelledby="menu-trigger"> <li class="menu-item"><a href="https://jquery.com/download/">Download</a></li> <li class="menu-item"><a href="https://api.jquery.com/">API Documentation</a></li> <li class="menu-item"><a href="https://blog.jquery.com/">Blog</a></li> <li class="menu-item"><a href="https://plugins.jquery.com/">Plugins</a></li> <li class="menu-item"><a href="https://jquery.com/browser-support/">Browser Support</a></li> <li class="menu-item"><a href="https://jquery.com/support/">Version Support</a></li> </ul> </div> <typesense-minibar data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" > <form role="search" class="searchform" action="https://jquery.com/" method="get"> <input type="search" name="s" aria-label="Search jQuery" value="" placeholder="Search" autocomplete="off"> <button type="submit" class="visuallyhidden"></button> </form> </typesense-minibar> </nav> <div id="content-wrapper" class="clearfix row"> <div class="content-full full-width twelve columns"> <div id="content"> <div id="banner-secondary" class="row"> <div class="download four columns push-eight"> <a href="/download/" class="button large"> <span class="download-button-content"> <span class="download-icon"></span> <span class="download-message"> <span>Download jQuery</span> <span class="download-version">v3.7.1</span> </span> </span> </a> <div class="download-options"> <div class="support-notice">Only the latest version of jQuery is supported.</div> <a href="/support">Discover Support Options</a> <a href="https://github.com/jquery/jquery">View Source on GitHub →</a> <a href="https://learn.jquery.com/about-jquery/how-jquery-works/">How jQuery Works →</a> </div> </div> <div class="features-box row eight columns pull-four"> <div class="feature-box lightweight-footprint four columns center-txt"> <div class="feature-box-image"></div> <h3>Lightweight Footprint</h3> <p>Only 30kB minified and gzipped. Can also be included as an AMD module</p> </div> <div class="feature-box css3-compliant four columns center-txt"> <div class="feature-box-image"></div> <h3>CSS3 Compliant</h3> <p>Supports CSS3 selectors to find elements as well as in style property manipulation</p> </div> <div class="feature-box cross-browser four columns center-txt"> <div class="feature-box-image"></div> <h3>Cross-Browser</h3> <p><a href="/browser-support/">Chrome, Edge, Firefox, IE, Safari, Android, iOS, and more</a></p> </div> </div> </div> <div id="home-content" class="clearfix row"> <section class="eight columns"> <h2 class="block">What is jQuery?</h2> <p>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.</p> </section> <aside class="four columns"> <h2 class="block">Resources</h2> <ul> <li><a href="https://api.jquery.com">jQuery Core API Documentation</a></li> <li><a href="https://learn.jquery.com">jQuery Learning Center</a></li> <li><a href="https://blog.jquery.com">jQuery Blog</a></li> <li><a href="https://contribute.jquery.com">Contribute to jQuery</a></li> <li><a href="https://github.com/jquery/jquery/issues">Browse or Submit jQuery Bugs</a></li> </ul> </aside> </div> <section> <h2 class="block">A Brief Look</h2> <h3>DOM Traversal and Manipulation</h3> <p>Get the <code><button></code> element with the class 'continue' and change its HTML to 'Next Step...'</p> <div class="syntaxhighlighter javascript"> <table> <tbody> <tr> <td class="gutter"> <div class="line n1">1</div> </td> <td class="code"> <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">"button.continue"</span> ).html( <span class="hljs-string">"Next Step..."</span> )</code></div></div></pre> </td> </tr> </tbody> </table> </div> <h3>Event Handling</h3> <p>Show the <code>#banner-message</code> element that is hidden with <code>display:none</code> in its CSS when any button in <code>#button-container</code> is clicked.</p> <div class="syntaxhighlighter javascript"> <table> <tbody> <tr> <td class="gutter"> <div class="line n1">1</div> <div class="line n2">2</div> <div class="line n3">3</div> <div class="line n4">4</div> </td> <td class="code"> <pre><div class="container"><div class="line"><code><span class="hljs-keyword">var</span> hiddenBox = $( <span class="hljs-string">"#banner-message"</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">"#button-container button"</span> ).on( <span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> event </span>) </span>{</code></div></div><div class="container"><div class="line"><code> hiddenBox.show();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> </td> </tr> </tbody> </table> </div> <h3>Ajax</h3> <p>Call a local script on the server <code>/api/getWeather</code> with the query parameter <code>zipcode=97201</code> and replace the element <code>#weather-temp</code>'s html with the returned text.</p> <div class="syntaxhighlighter javascript"> <table> <tbody> <tr> <td class="gutter"> <div class="line n1">1</div> <div class="line n2">2</div> <div class="line n3">3</div> <div class="line n4">4</div> <div class="line n5">5</div> <div class="line n6">6</div> <div class="line n7">7</div> <div class="line n8">8</div> <div class="line n9">9</div> </td> <td class="code"> <pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attr">url</span>: <span class="hljs-string">"/api/getWeather"</span>,</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attr">data</span>: {</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attr">zipcode</span>: <span class="hljs-number">97201</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> result </span>) </span>{</code></div></div><div class="container"><div class="line"><code> $( <span class="hljs-string">"#weather-temp"</span> ).html( <span class="hljs-string">"<strong>"</span> + result + <span class="hljs-string">"</strong> degrees"</span> );</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> </td> </tr> </tbody> </table> </div> </section> <section> <h2 class="block">Related Projects</h2> <h3><a href="https://jqueryui.com/">jQuery UI</a></h3> <p>This project is in maintenance-only mode. <a href="https://blog.jquery.com/2021/10/07/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/">Learn more</a>.</p> <h3><a href="https://jquerymobile.com/">jQuery Mobile</a></h3> <p>This project is deprecated. <a href="https://blog.jqueryui.com/2021/10/jquery-maintainers-continue-modernization-initiative-with-deprecation-of-jquery-mobile/">Learn more</a>.</p> </section> </div> </div> </div> </div> <footer class="clearfix simple"> <div class="constrain"> <div class="row"> <div class="six columns centered"> <h3><span>Books</span></h3> <ul class="books"> <li> <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition"> <img src="https://jquery.com/wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92" height="114" loading="lazy"> Learning jQuery Fourth Edition <cite>Karl Swedberg and Jonathan Chaffer</cite> </a> </li> <li> <a href="https://www.manning.com/books/jquery-in-action-third-edition"> <img src="https://jquery.com/wp-content/themes/jquery/content/books/jquery-in-action.jpg" alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92" height="114" loading="lazy"> jQuery in Action <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite> </a> </li> <li> <a href="https://www.syncfusion.com/ebooks/jquery"> <img src="https://jquery.com/wp-content/themes/jquery/content/books/jquery-succinctly.jpg" alt="jQuery Succinctly by Cody Lindley" width="92" height="114" loading="lazy"> jQuery Succinctly <cite>Cody Lindley</cite> </a> </li> </ul> </div> </div> <div id="legal" class="legal"> <ul class="footer-site-links"> <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li> <li><a class="icon-comments" href="https://jquery.com/support/">Chat</a></li> <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li> <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li> </ul> <p class="copyright"> Copyright 2024 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights reserved. See <a href="https://jquery.com/license/">jQuery License</a> for more information. The <a href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply. </p> <p><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a href="https://www.fastly.com/">CDN by Fastly</a> | <a href="https://wordpress.org/" class="wp-link">Powered by WordPress</a></p> </div> </div> </footer> </body> </html>