tab/re

[usernamealreadyis]

!--[if IE 6 ]> <![endif]-->
!--[if IE 7]> <![endif]-->
!--[if IE 9 ]> <![endif]-->

• jQuery
• jQuery UI
• jQuery Mobile
• Sizzle
• QUnit

• Plugins
• Contribute
  • CLA
  • Style Guides
  • Bug Triage
  • Code
  • Documentation
  • Web Sites
• Events
• Support
  • Learning Center
  • Try jQuery
  • IRC/Chat
  • Forums
  • Stack Overflow
  • Commercial Support
• jQuery Foundation
  • Join
  • Members
  • Team
  • Conduct
  • Brand Guide
  • Donate

jQuery

    <aside><div id="broadcast"></div></aside>
</div>

<nav id="main" class="constrain clearfix">
    <div class="menu-top-container">
<ul id="menu-top" class="menu l_tinynav2">

Download

API Documentation

Blog

Plugins

Browser Support

Navigate...DownloadAPI DocumentationBlogPluginsBrowser Support

    <form method="get" class="searchform" action="//jquery.com/">
<button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
<label>
    <span class="visuallyhidden">Search jQuery</span>
    <input type="text" name="s" value="" placeholder="Search">
</label>

<div id="content-wrapper" class="clearfix row">

Download jQuery v1.11.3 or v2.1.4

View Source on GitHub → How jQuery Works →

Lightweight Footprint

Only 32kB minified and gzipped. Can also be included as an AMD module

    <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/">IE, Firefox, Safari, Opera, Chrome, and more</a></p>
    </div>
</div>

What is jQuery?

    <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>

    <h2 class="block">Corporate Members</h2>
    <ul class="row" id="corporate-members"><li class="three columns"><a href="http://famo.us/"><span></span><img src="//jquery.org/resources/members/famous.png" title="Famo.us"></a></li><li class="three columns"><a href="http://mediatemple.net/"><span></span><img src="//jquery.org/resources/members/mediatemple.png" title="Media Temple"></a></li><li class="three columns"><a href="http://www.maxcdn.com/"><span></span><img src="//jquery.org/resources/members/maxcdn.png" title="MaxCDN"></a></li><li class="three columns"><a href="http://wordpress.org/"><span></span><img src="//jquery.org/resources/members/wordpress.png" title="WordPress"></a></li></ul>
    <p>Support from our corporate members makes it possible for the jQuery
    Foundation to continue our work on our JavaScript libraries and pushing
    the open web forward with events and participation in the standards process.
    View our <a href="https://jquery.org/members/">members page</a> for a full
    list of corporate and individual members.</p>

    <h2 class="block">Other jQuery Foundation Projects</h2>
    <section class="project-tiles row">
        <div class="project-tile six columns color secondary-orange">
            <a href="//jqueryui.com" class="jqueryui small logo">jQueryUI</a>
        </div>
        <div class="project-tile six columns color secondary-green">
            <a href="//jquerymobile.com" class="jquery-mobile small logo">jQuery Mobile</a>
        </div>
    </section>
    <section class="project-tiles row">
        <div class="project-tile six columns color qunit-secondary-purple">
            <a href="//qunitjs.com" class="qunitjs small logo">QUnit</a>
        </div>
        <div class="project-tile six columns color sizzle-red">
            <a href="http://sizzlejs.com" class="sizzlejs small logo">Sizzle</a>
        </div>
    </section>
</section>
<aside class="four columns resources">
    <h3>Resources</h3>
    <ul>
        <li><a href="http://api.jquery.com">jQuery Core API Documentation</a></li>
        <li><a href="http://learn.jquery.com">jQuery Learning Center</a></li>
        <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
        <li><a href="http://contribute.jquery.com">Contribute to jQuery</a></li>
        <li><a href="http://jquery.org">About the jQuery Foundation</a></li>
        <li><a href="https://github.com/jquery/jquery/issues">Browse or Submit jQuery Bugs</a></li>
        <li class="try-jquery"><a href="http://try.jquery.com">Try jQuery</a></li>
    </ul>

</aside>

A Brief Look

<h3>DOM Traversal and Manipulation</h3>
<p>Get the <code>&lt;button&gt;</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="string">"button.continue"</span> ).html( <span class="string">"Next Step..."</span> )</code></div></div></pre>
            </td>
        </tr>
    </tbody>
</table>

<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="keyword">var</span> hiddenBox = $( <span class="string">"#banner-message"</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#button-container button"</span> ).on( <span class="string">"click"</span>, <span class="keyword">function</span>( event ) {</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>

<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>  url: <span class="string">"/api/getWeather"</span>,</code></div></div><div class="container"><div class="line"><code>  data: {</code></div></div><div class="container"><div class="line"><code>    zipcode: <span class="number">97201</span></code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  success: <span class="keyword">function</span>( data ) {</code></div></div><div class="container"><div class="line"><code>    $( <span class="string">"#weather-temp"</span> ).html( <span class="string">"&lt;strong&gt;"</span> + data + <span class="string">"&lt;/strong&gt; 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>

Books

• Learning jQuery Fourth Edition Karl Swedberg and Jonathan Chaffer
• jQuery in Action Bear Bibeault, Yehuda Katz, and Aurelio De Rosa
• jQuery Succinctly Cody Lindley

• Learning Center
• Forum
• API
• Twitter
• IRC
• GitHub

Copyright 2016 The jQuery Foundation. jQuery License Web hosting by Media Temple | CDN by MaxCDN | Powered by WordPress | Thanks: Members, Sponsors

</div>

<script> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1076265-1']); _gaq.push(['_setDomainName', 'jquery.com']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="//jquery.com/wp-includes/js/comment-reply.min.js?ver=4.4"></script> <script type="text/javascript" src="//jquery.com/wp-includes/js/wp-embed.min.js?ver=4.4"></script>