Categories
JQuery Web development

jQuery Intro/ Adding jQuery to HTML

jQuery is a lightweight, “write less, do more”, JavaScript library.

There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and also the most extendable.

jQuery Introduction

The purpose of jQuery is to make it much easier to use JavaScript on the webpage. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code.

Before you start studying jQuery, you should have a basic knowledge of:

  1. HTML
  2. CSS
  3. JavaScript

Let’s get jQuery started:

Adding jQuery to HTML

There are several ways to start using jQuery on your website:

Downloading jQuery

There are two versions of jQuery available for downloading:

  1. Production version – this is for your live website because it has been minified and compressed
  2. Development version – this is for testing and development (uncompressed and readable code)

Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag.

Note: The <script> tag should be inside the <head> section.

<head>
<script src="jquery-3.4.1.min.js"></script>
</head>

jQuery CDN

If you don’t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Both Google and Microsoft host jQuery.

To use jQuery from Google or Microsoft, use one of the following:

Google CDN:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h4>jQuery CDN</h4>

<p>Click on the button.</p>
<p>To hide the paragraphs.</p>

<button>Click me</button>

</body>
</html>

Output:

jQuery CDN

Click on the button.

To hide paragraphs.

Microsoft CDN:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h4>Microsoft CDN</h4>

<p>Click on the button.</p>
<p>To hide paragraphs.</p>

<button>Click me</button>

</body>
</html>

Output:

Microsoft CDN

Click on the button.

To hide paragraphs.

Enjoy coding!

Read also:

JavaScript Introduction

JavaScript Math Object