index.html

<script>{
	"title": "jQuery",
	"pageTemplate": "page-fullwidth.php",
	"customFields": [
			{ "key": "hide_title", "value": 1 }
	]
}</script>

<div id="banner-secondary" class="row">
	<div class="downloads-box four columns push-eight">
		<div class="download-main">
			<a href="/download/" class="button large">
				<span class="download"></span>
				Download jQuery
				<span>v1.11.2 or v2.1.3</span>
			</a>
			<div class="download-options">
				<a href="http://github.com/jquery/jquery">View Source on GitHub →</a>
				<a href="http://learn.jquery.com/about-jquery/how-jquery-works/">How jQuery Works →</a>
			</div>
		</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 32kB 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/">IE, Firefox, Safari, Opera, Chrome, 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>

		<h2 class="block">Corporate Members</h2>
		<!--corporate-members-->
		<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="//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>
</div>

<section>
	<h2 class="block">A Brief Look</h2>

	<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>
	<pre><code>$( "button.continue" ).html( "Next Step..." )</code></pre>

	<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>
	<pre><code>
	var hiddenBox = $( "#banner-message" );
	$( "#button-container button" ).on( "click", function( event ) {
		hiddenBox.show();
	});
	</pre></code>

	<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>
	<pre><code>
	$.ajax({
		url: "/api/getWeather",
		data: {
			zipcode: 97201
		},
		success: function( data ) {
			$( "#weather-temp" ).html( "&lt;strong>" + data + "&lt;/strong> degrees" );
		}
	});
	</pre></code>
</section>