Lesson 101: Intro to jQuery

Estimated Length: 20min | Difficulty: Beginner

What should you know before working with jQuery?

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

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. 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. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

What features does the jQuery library contain:

Getting Started

How do you add jQuery to your web pages?

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

Downloading jQuery

There are two versions of jQuery available for downloading:

Both versions can be downloaded fromjQuery.com

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):

<head> <script src="jquery-1.12.0.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 CDN

Here is the script for the Google CDN:

<head>

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

</script>

</head>

jQuery Syntax and Document Ready Event

What is jQuery syntax?

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

The $ sign is used to define/access jQuery. The (selector) is used to "query" or find HTML elements. Finally, the jQuery action() is used to define what will be performed on the element(s).

What is document ready event?

All jQuery methods go inside a Document Ready Event.

Example:

$(document).ready(function(){

//jQuery methods go here...

});

This is used to prevent any jQuery code from running before the document is finished loading (is ready).

Download jQuery at jquery.com