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 your 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. HMTL
  2. CSS
  3. JavaScript

Let’s get jQuery started:

Adding jQuery to HTML

There are several ways to start using jQuery on your web site. You can:

  1. There are several ways to start using jQuery on your web site. You can:
  2. Include jQuery from a CDN, like Google

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>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

Output:

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>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

Output:

Enjoy coding!

Leave a Reply