1. Introduction

Goal of the tutorial: The goal of this tutorial is to guide you on how to get started with jQuery, a fast and feature-rich JavaScript library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development.

Learning outcomes: By the end of this tutorial, you will learn how to include the jQuery library in your HTML document and write a simple script to ensure it's working properly.

Prerequisites: Basic knowledge of HTML, CSS, and JavaScript is required. It's crucial you're comfortable with JavaScript, as jQuery is built on it.

2. Step-by-Step Guide

Including jQuery in your HTML document

You can include jQuery in your HTML document either by downloading it from the jQuery website or by including it directly from a Content Delivery Network (CDN).

How to download jQuery
To download jQuery, visit the jQuery website and click on the download button. Once downloaded, place the jQuery file in your project directory and link it in your HTML file.

How to include jQuery from a CDN
You can also include jQuery directly from a CDN like Google or Microsoft. This is the faster and easier way. Here's how you would include jQuery from Google's CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Writing a simple script
To test that jQuery is working, we would write a simple script that hides an HTML element when it's clicked. Here's how:

<button id="testButton">Click me</button>

<script>
$(document).ready(function(){
  $("#testButton").click(function(){
    $(this).hide();
  });
});
</script>

3. Code Examples

Example 1: Changing the content of an element

<p id="para1">Hello jQuery!</p>
<button id="btn1">Click me</button>

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#para1").text("Hello world.");
  });
});
</script>

Explanation: The script listens for a click event on the button with id 'btn1'. When the button is clicked, the content of the paragraph with id 'para1' is changed to 'Hello world.'.

Example 2: Adding a class to an element

<p id="para2">I love jQuery!</p>
<button id="btn2">Click me</button>

<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    $("#para2").addClass("highlight");
  });
});
</script>

Explanation: The script listens for a click event on the button with id 'btn2'. When the button is clicked, the class 'highlight' is added to the paragraph with id 'para2'.

4. Summary

In this tutorial, we have learned how to include the jQuery library in an HTML document and how to write a simple jQuery script. We have also learned how to use jQuery to manipulate HTML elements.

To learn more about jQuery, visit the official jQuery website. For a more interactive learning experience, check out the jQuery learning center.

5. Practice Exercises

Exercise 1: Write a script that hides all the paragraphs on a page when a button is clicked.

Solution:

<button id="hideP">Hide paragraphs</button>

<script>
$(document).ready(function(){
  $("#hideP").click(function(){
    $("p").hide();
  });
});
</script>

Exercise 2: Write a script that toggles the visibility of a div when a button is clicked.

Solution:

<button id="toggleDiv">Toggle div visibility</button>
<div id="div1">I am a div</div>

<script>
$(document).ready(function(){
  $("#toggleDiv").click(function(){
    $("#div1").toggle();
  });
});
</script>

Exercise 3: Write a script that changes the color of a paragraph when a button is clicked.

Solution:

<button id="changeColor">Change color</button>
<p id="coloredPara">I love jQuery!</p>

<script>
$(document).ready(function(){
  $("#changeColor").click(function(){
    $("#coloredPara").css("color", "red");
  });
});
</script>

Keep practicing, and happy coding!