Skip to content
New issue

tab/re

Due by January 03, 2026 40% complete

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

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

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

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