natural design and informed content

Squarespace: Add jQuery

jQuery can help you control almost any aspect of the content displayed on your Squarespace website. You can use it conjunction with CSS to make tricky style changes.

jQuery

Paste this into Settings → Code Injection → Header.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

//Add your code here

});

</script>

What is jQuery?

jQuery is a JavaScript library designed to simplify the client-side scripting in a web browser. It is currently developed by a team of developers and supports HTML in all the major internet browsers. jQuery is the most popular JavaScript library in use today and is used by 55% of the most visited websites.

jQuery is free, open source software. Its syntax is designed to make it easy to navigate a document, select DOM elements, create animations, handle events, and make Ajax calls. jQuery also allows developers to create plug-ins on top of it. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the codebase allows the creation of powerful dynamic web pages and web applications.

Why use Google's library?

Decreased Latency

A content delivery network, or CDN, distributes static content across servers in various, diverse physical locations. When a user’s browser requests these files, their download will automatically target the closest available server in the network.

In the case of Google’s CDN, what this means is that any users not physically near you will be able to download jQuery faster than if you force them to download it from your server.

There are a handful of CDN services comparable to Google’s, but it’s hard to beat the price of free! This benefit alone could decide the issue, but there’s even more.

Increased parallelism

To avoid needlessly overloading servers, browsers limit the number of connections that can be made simultaneously. Depending on which browser, this limit may be as low as two connections per hostname.

Using the Google AJAX Libraries CDN eliminates one request to your site, allowing more of your local content to downloaded in parallel. It doesn’t make a gigantic difference for users with a six concurrent connection browser, but for those still running a browser that only allows two, the difference is noticeable.

Better caching

Potentially the greatest benefit of using the Google AJAX Libraries CDN is that your users may not need to download jQuery at all.

No matter how well optimized your site is, if you’re hosting jQuery locally then your users must download it at least once. Each of your users probably already has dozens of identical copies of jQuery in their browser’s cache, but those copies of jQuery are ignored when they visit your site.

However, when a browser sees references to CDN-hosted copies of jQuery, it understands that all of those references do refer to the exact same file. With all of these CDN references point to exactly the same URLs, the browser can trust that those files truly are identical and won’t waste time re-requesting the file if it’s already cached. Thus, the browser is able to use a single copy that’s cached on-disk, regardless of which site the CDN references appear on.

This creates a potent “cross-site caching” effect which all sites using the CDN benefit from. Since Google’s CDN serves the file with headers that attempt to cache the file for up to one year, this effect truly has amazing potential. With many thousands of the most trafficked sites on the Internet already using the Google CDN to serve jQuery, it’s quite possible that many of your users will never make a single HTTP request for jQuery when they visit sites using the CDN.

Even if someone visits hundreds of sites using the same Google hosted version of jQuery, they will only need download it once!

Why does the URL not have http:?

This allows the code to work on both secure and non-secure sites. Secure sites will automatically require an https: connection.

Why does the URL look like it is for version 1 of jQuery?

With Google's API, we can specify partial version numbers, such as "1" or "1.3". Doing so will automatically load the latest version matching that partial revision pattern (e.g. 1.3 would load 1.3.2 today and 1 would load 1.8.0). Since jQuery has been iterating on major version 1 for a while, we're safe to use this and assume we'll get the latest version.