You can access the full course here: Bite-Sized jQuery
In this course, we’re going to learn how to use jQuery to build interactive websites.
When it comes to jQuery, there are two methods in how to add it to your website. The first method is simply going to the jQuery website and downloading the full jQuery file. By including this file in your webhost folder, you have access to the jQuery library. The second method is to use a jQuery CDN, or Content Delivery Network, to dynamically load in the jQuery file from elsewhere. This second method has the benefit of making your website faster if the user has already encountered the CDN before and downloaded necessary files in the background. To learn how to use a jQuery CDN in your own projects, you can go to https://code.jquery.com/ for instructions.
For our project, we’re going to use the first method and download the jQuery file. Head over to the main jQuery website (https://jquery.com/), hit Download jQuery, and download the uncompressed, development file (this version will be the easiest for us to read).
Project Structure Setup
We will now set up our project folder. First, right click and create a New Folder named jQueryCourse wherever you’d like to save the project. Within this folder, we’re going to create three more folders:
In the js folder, we’re going to add the jQuery file we just downloaded by cutting and pasting it from where it downloaded onto the computer.
For our next steps, you need to make sure you download and install Atom so that we can write and edit our code. You can find Atom via its website: https://atom.io/
Project Base Code Setup
Now we’ll start setting up the basic code for our project. In index.html, we will first add in our boilerplate HTML to start off the page. Once in, you can verify that it works by opening index.html in your web browser.
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
In order to see this in our browser properly, you need to view it in the Inspector. If you’re using Chrome, you can right click and select Inspect from the menu.
On our new interface we can select Console, and there you should see our message.
That’s it for our project setup. In our next lesson, we’re going to begin learning how to use jQuery to dynamically add the “Hello world!” message to our body.
In this lesson, we’re going to learn necessary concepts about using jQuery to dynamically write “Hello world!” to the body.
About Document Ready
Unlike executable applications which come as is with the entire code ready to go, websites and web applications rely on constant downloading and execution of the code line by line. As such, we need to be careful and often wait for the document to be ready to use before we inject any jQuery. In order to add in “Hello world!” to our body, for instance, we need to make sure our body tags are loaded before our jQuery executes.
Fortunately, there is a common jQuery call we can use to make sure the document is ready. In main.js, we will delete our previous code and add the following:
console.log('We are ready!');
(Note: You can write jQuery instead of the dollar sign to call jQuery functions, but the dollar sign gives a cleaner look).
With this code, we target the document and make sure it is ready before we call the function that writes to our console. If you test index.html, you should see the new message in the Console.
In the next lesson, we’ll continue working with adding “Hello world!” now that we know how to wait for the document to be ready.
Hello everyone, my name is Laghu Pieris, and welcome to the jQuery course. jQuery is the most used java script library in the world because, it does operations that are very very basic.
And, we’re also going to be able to work with data. Whenever you’re working with jQuery and whenever you’re working with web development in general, you need to keep in mind something called DOM. This is D-O-M. Document Object Model. It’s kind of the base object whenever you’re working with the web.
So, we have a DOM for this image. For this text here. For this style. For this paragraph. So, there are objects everywhere in the web page and, we need to be able to know how to manipulate all of these objects. There’s some requirements to learn this course, even though something, this is going to be a very light introduction. You need to know how to work with HTML.
We’re going to use an open source one, okay, a free one to use, which is Atom. Another very important link for you to have open at all times, whenever you’re developing with jQuery, is api.jquery.com. So, now that we have gone through this introductory lesson, We’re now going to move to the next video where we’re going to set up our entire environment and work with jQuery. See you soon.
The first thing we need to know right in the beginning of this project is how to use jQuery. So, I’m going to need click on this big download jQuery button. There you go, you have it. Using jQuery with a CDN. And to use CDNs, you can can go here to code.jquery.com.
If you click here on uncompressed, for example. You’re going to have instructions on how to use it. You just copy this tag and paste into your HTML file. So back to jQuery here I’m going to download the uncompressed development version. Download link file, or just download file. I’m going to copy it, okay. And now that we have this file here we need to create our project. For making projects I like to have a projects’ folder under my home folder. We have the zenva folder here. And now, I’m going to right click, choose new folder. And I’m going to name this jQueryCourse.
So this should be pretty simple. We add a script tag and the source on this script tag is going to be js/jquery-3.3.1.js. We’re going to add another script tag with the source, js.main.js, style sheet. The type is going to be text/CSS. And the href, well that going to be CSS/style.css. And, what we need to know now is how to work with jQuery. How can I use, how can I add dynamically the text hello world to the body? We’re going to work with this in the next video.
So we’re going to do something really common and necessary in every jQuery application. First of all, we want to call jQuery, and we do this by typing either jQuery, which is quite lengthy, or typing the dollar sign, which is much cleaner.
So dollar sign, we open and close parentheses, and between parentheses I’m going to type document. So we’re going to work with the document object as a jQuery object. Okay? Then dot ready. This is going to be a function call.
We’re going to write what’s going to be the ready call back here. So, let’s open and close parentheses and add a semicolon. And here I’m going to type a function, open and close parentheses and open and close curly braces. So whenever the document is ready, this function is going to be executed.
And here I’m just going to type console.log and the message, “We are ready!” Like this. So we’re going to save this script. And here in Google Chrome, I’m going to refresh the page, and we have the message we are ready. Okay, so that’s perfect.
Since we are now ready to work, and we have this ready function, then that means our path is clear into changing the body tags and adding whatever content we want here.