jQuery Get Started

Getting Started with jQuery

Integrating jQuery into Your Web Pages

There are two primary ways to start using the jQuery library on your website:

• Include jQuery from a Content Delivery Network (CDN). This is the recommended approach.
• Download the jQuery library file and host it on your own server.

Using a jQuery CDN (Recommended)

A CDN hosts common files (like jQuery) on servers distributed globally. Using a CDN offers several advantages:

• Faster Loading: Users might already have the jQuery file cached in their browser from visiting other sites using the same CDN.
• Reduced Server Load: The file is served by the CDN, not your server.
• Geographic Proximity: CDNs typically serve the file from a server physically closer to the user, further improving speed.

Popular CDNs hosting jQuery include Google, Cloudflare, jsDelivr, and Microsoft.

To include jQuery from a CDN, add a <script> tag to your HTML, preferably just before the closing </body> tag. This placement ensures the HTML structure is loaded before the script tries to manipulate it.

Example using Google CDN (Latest 3.x version):

<!-- Make sure to check for the latest 3.x version on the official jQuery website -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Example using jsDelivr CDN (Loads latest 3.x):

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

Notice the use of HTTPS in the URLs, which is crucial for security.

Downloading and Hosting jQuery

If you prefer or need to host jQuery yourself (e.g., for offline development or specific security policies), you can download it from the official jQuery website.

Two versions are typically available:

• Production version (.min.js): Minified and compressed for smaller file size and faster loading on live websites.
• Development version (.js): Uncompressed and readable code, useful for debugging during development.

Download the desired version (usually the production version) and place it in your project’s script directory.

Reference the local file using a <script> tag, again, preferably before the closing </body> tag:

<!-- Assuming jquery-3.7.1.min.js is in a 'js' folder -->
<script src="js/jquery-3.7.1.min.js"></script>

Important Notes on Script Tags

	type="text/javascript": This attribute is not required for JavaScript <script> tags in HTML5. JavaScript is the default scripting language.	async and defer Attributes: For scripts loaded from external files, you can use async or defer attributes to control how the script is downloaded and executed, potentially improving page load performance. defer is often preferred as it executes scripts in order after the document is parsed, while async executes as soon as the script is downloaded, potentially out of order.

Once jQuery is included, you can start writing jQuery code in your own <script> tags or separate .js files (make sure your code runs after the jQuery library is loaded).