Made withjQueryClip

#36 Introduction to jQuery library | Setting jQuery in Project

T

Telusko

Creator on the jQuery channel

Watch on YouTube ↗

99K viewsDec 11, 201812:57 runtime

Learn the fundamentals of jQuery, a powerful JavaScript library that simplifies web development with its "write less, do more" philosophy. This introduction covers what jQuery is, its core features like DOM manipulation, CSS control, event handling, and animations, and why it's…

Chapters

#jquery#clip#frontend

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It is not a new language but a library built on top of JavaScript to simplify common web development tasks. Its core philosophy is "write less, do more," allowing developers to achieve complex functionality with significantly less code compared to plain "vanilla" JavaScript.

Key benefits include:

Cross-browser compatibility: Works consistently across modern browsers.
Open source: Free to use with a large community for support and updates.
Simplification: Makes complex tasks like AJAX calls and DOM manipulation much easier.

Core Features

jQuery provides built-in methods for a wide range of tasks:

HTML/DOM Manipulation: Easily select and modify elements on the page.
CSS Manipulation: Change styles and classes dynamically.
HTML Event Methods: A simplified way to handle user interactions like clicks and key presses.
Effects and Animations: Create animations like fading, sliding, and toggling with a single line of code.
AJAX: Perform asynchronous requests to a server without reloading the page.

Setting Up jQuery

There are two primary ways to include jQuery in your web project.

Tip
Always include your <script> tags, including the one for jQuery, at the bottom of your <body> tag. This ensures the HTML content loads before the browser has to parse and execute JavaScript, improving perceived page load times.

Method 1: Local Download

Download: Go to jquery.com and download the uncompressed development version of the library.
Organize: Save the downloaded .js file into a js folder within your project directory.
Include: Add it to your HTML file with a script tag pointing to the local file path.
```
<script src="js/jquery.js"></script>
```

Method 2: Using a CDN (Content Delivery Network)

Find a CDN link: On jquery.com, navigate to the CDN section.
Copy the Script: Copy the provided <script> tag, which includes a URL to the jQuery file hosted on a fast, external server.

Include: Paste this tag into your HTML file.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Important
A CDN is a network of servers that host files. Using a CDN for jQuery means your website visitors will download the library from a potentially faster, geographically closer server. This method requires an internet connection to work.

Key Concepts & Example

The jQuery Selector ($): The dollar sign $ is an alias for the jQuery function and is used to select HTML elements. It works similarly to CSS selectors. For example, $('#heading1') selects the element with the ID heading1.
Example: .fadeToggle(): This method animates the opacity of an element. If it's visible, it fades out; if it's hidden, it fades in. This replaces dozens of lines of vanilla JavaScript code for animation.

// When a button is clicked, fade the element with id "heading1" over 2 seconds
function fn1() {
  $('#heading1').fadeToggle(2000); // 2000 milliseconds = 2 seconds
}

This single line of jQuery demonstrates its power for creating smooth animations with minimal effort.

Why Learn jQuery?

Hey, what's going on guys? Stan Meyer for telesco learnings and welcome back to another video tutorial and the JavaScript for beginners. And yes, we are beginning with jQuery. So jQuery is a JavaScript library and in the next few videos, you're going to be touching up on the concepts of jQuery because I thought that we should include this topic in this JavaScript for beginners playlist because the plain vanilla JavaScript that is what we've been learning for so far is not really used a lot when it comes to real-world scenarios, you know.

So when you are dealing with the plain JavaScript, you need to write a lot of code to achieve basic functionalities. And jQuery is a framework, or you can see it's a library built on top of JavaScript, which enables us to write less and do more, which means that you can do things that makes a lot of line of code in JavaScript and you can do that same thing in single line or couple of lines in jQuery.

So quick disclaimer, we are not going to be covering everything in jQuery because jQuery itself can take around 50 to 60 videos and it can be a separate playlist itself. But yes, I thought that we should be covering this jQuery because this will give you a sense of how JavaScript is actually being used in real-world scenarios. And jQuery is a widely used JavaScript library. So with that being said, let's just take a little bit of introduction and then we set things up. We will download the jQuery library onto our system and include it in our project folder.

What is jQuery? Features and Benefits

Okay, so what is jQuery? So jQuery is a fast, small, and feature-rich JavaScript library. So don't confuse yourself with jQuery being a completely separate framework or some new technology. It is basically just a library which is pre-compiled by some developers and it is open source, and it has a lot of JavaScript code which will ease our work, so that we can write less and do more.

So the purpose of jQuery is to make it much easier to use JavaScript on your website, and it gives us a feature of write less and do more. So that's the basic concept of jQuery and it is one of the most widely used JavaScript libraries. It's a pretty old library but it is still being used by a lot of developers. One of the best feature is it has cross-browser compatible, which means that it is pretty much working on every modern browser exactly the same. And it is also open source and free to use. Okay, so there's a huge community which contributes and updates the jQuery library from time to time.

Moving ahead, jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods so that you can call them with a single line of code. So as I mentioned, it is used to help us easier tasks. So the code that takes like 10 to 15 or maybe even 50 lines of code can be done in one single line. And I will give you a short example in this video at the end also. And jQuery also simplifies a lot of complicated things from JavaScript like Ajax calls and Dom manipulations. So the primary features and jQuery library contains are HTML DOM manipulations. So we've been doing the document object model manipulations from JavaScript also using the document dot get element by ID, right? So we used to access the HTML elements and perform operations on it. So jQuery also helps us do that, but it is done in a very much simpler way by using directly methods.

Then we have CSS manipulations. We have HTML events. So events are handled a little bit differently in jQuery. We have the same set of events but they are handled differently. We have many effects and animations which can be done in single line of code and that's the example that I'm going to show you today. Then we have Ajax, which is asynchronous JavaScript and XML. Then we have different utilities and on top of jQuery, we have jQuery UI and some other technologies as well, which we can touch up in the end of this video series. But this was just a little bit of theory on jQuery.

Setting Up jQuery: Downloading the Library

Let's move on to the actual practical implementation on how to include this jQuery into our project because that will give you a real sense of what exactly is jQuery in terms of the practical scenario. okay, so this is just the theory and you will be like okay, let's actually see jQuery in action, right? So let's do that.

So open up your browser and go to this website jQuery.com. This is the official website and you can see a lot of things: documentation, blog, plugin. We need to just use this. You can read through the articles, so jQuery is a fast, small, feature-rich JavaScript library so on and so forth and a lot of things which are related to that. But right now, let's just concentrate on using this jQuery into our project folders. I just click on this download jQuery button.

So as of now we are on version 3. Earlier we had was in 1.x, 2.x and now we are on version 3. Maybe if you are watching this video in future or some time ahead in time we will have some new version but it will pretty much support the older versions as well. So just click on download jQuery and you'll have different options. We have download the compressed production jQuery, we have download uncompressed development jQuery, and then we have slim build. So the slim build is where some features are removed which excludes the Ajax and effects modules. But we are going to be using the uncompressed development jQuery because we are in development scenario. When it comes to production, the production version is slightly smaller in size that is the file size is smaller.

So let's click on this download uncompressed one. And once you click on this, you can see that there is this entire JS document which is loaded, and this is the entire jQuery library or jQuery code which is being typed by, as I mentioned, some developers for us and we can directly use them. So just right-click on it and click on Save As. Now go to your project code folder and create the folder. Inside this create a js folder and images folder, let's keep things organized over here. I'm going to go into the JS folder, you can see I have already saved this and what I did is I just changed the name from jQuery-3.3.1 to something easy, so I see jQuery and the type has to be JavaScript file because it is basically a JavaScript library.

Once you save it, go to your folder. So this is my folder inside which I have the code wherein I have the default.html page, then I have the JavaScript folder and inside that I have this library. Okay, now let's come back to the visual studio code, open your Visual Studio code and open your code folder inside it. And here's where we have to include the jQuery, right? So what we will do is we'll include the jQuery at the bottom of the HTML document because it takes some time to load this JavaScript into our HTML document. So it is always preferred to include JavaScript at the bottom after the entire HTML document has been rendered. So use the script tag, source attribute. You have to go to a JS folder and say that we have to see jQuery.js. okay? So this one line of code will include the entire JavaScript library into your HTML document and now you can perform some jQuery operations.

Practical Example: Fade Animation with jQuery

So I'm just going to show you a quick demonstration of how jQuery can be used to animate things. So what we'll do is we'll give this h2 tag an ID, I'm going to say heading1. Let's say heading1. Below the script tag, we'll start one more script tag and say that we will include our jQuery code. Now we've included the jQuery library at this line, so our jQuery code should be below that. So again opening a new script tag and inside that we'll write the jQuery code.

Right now you don't need to worry about the syntax of this code, you just follow along with me. I'm just going to include a button over here. I'm going to give it an ID of btn1. I'm gonna say click me. And right now let's use the JavaScript way of calling events, that is the click event. So I'm going to say onclick, I'm going to call a function, let's say fn1. Okay, so you have to create that function. So let's do that in the script tag. So I'm going to say function fn1. But inside this function we are going to be using the jQuery style syntax. Okay?

And what we are going to do is on the click of this button, we are going to fade out this entire heading two. So let me go to the code, and this is where, let me just zoom in a little bit. In fact, I will just set it besides the core. Okay. So let me just first call an alert over here, just to see if everything is working when I click on this. Okay, so our pop-up is coming, which means our JavaScript is working. So on this function call, we have to fade out this entire s2 dad. Now if you've been following this and our JavaScript playlist in the previous couple of videos, we saw the animations using plain JavaScript, right? And you remember that we had to first access the entire element, where to access the opacity, then we had to reduce it, and we have to recursively call the function using the setInterval method. But in this case using jQuery, it will be all very simplified and we will just need one line of code. So here's how you do it.

So I'm gonna say dollar, which is basically calling the jQuery library and it's a selector function. And we'll talk about this as we move out. Right now just follow along. I'm just gonna pass the ID using the hash because IDs are referenced by hash and class is referenced by dot in CSS. I'm gonna say dot, I'm gonna say fadeToggle and that's about it. Okay. So this is one single line of code which is gonna perform fade in and fade out because this fadeToggle function does fade in or fade out depending upon what the situation is. So if it is already there, that is if the heading tag is visible, it will fade out. If it is invisible, it will fade in. So that's what fadeToggle does. Let's try to click this and there you go. You can see it got faded out. If I click it again, it will come back. In fact you can also give the milliseconds. So I'm gonna see two thousand, if I click on it it will take two seconds to fade out, if I click on it it will take two seconds to come back. And this is the power of jQuery. Using one single line of code we did something which we had to write like at least 15 lines of code, right, for the fade in and fade out if you remember the code from the JavaScript we have to write a lot of code. So this is just the tip of the iceberg, there is so much that you can do in jQuery that it is actually used in real world scenarios a lot and we will also brush through a lot of things on jQuery so that you will be capable enough to experiment yourself and do a lot of things more after learning this.

Alternative Setup: Using a Content Delivery Network (CDN)

So this was just an introduction, just the setting up of jQuery, what exactly is jQuery and how to include it in your project file. Now there is another way in which you can include jQuery and that is by using the content delivery network system. So right now what we did is we came to this website jquery.com and we clicked on the download button and we downloaded the code onto our system, right? So there is another way in which you can do this and it is by using a content delivery network. Okay?

So if you scroll down on this same page that is the download page, let's go on jquery.com, click on download, and if you scroll down you can see that there is a concept of using jQuery with the CDN. So what a CDN is, CDN in very basic terms is basically a server which is there on the internet, okay, so it's accessible via the internet and this jQuery library is stored on to that server. So instead of that jQuery library on to a system that is downloading it offline on to a system, what you do is you access that server and that server ID is given, that is the entire web address, is given by the CDN. So if you just click on this CDNs, you will understand what exactly content delivery network is and what it does. But to use the jQuery CDN, you can see this link, code.jquery.com, just click on it. And this is where you can see all the CDNs, that is the link to the CDN. Just select the uncompressed one that is the jQuery core click on it. You can see that this link is provided.

Just copy this entire thing, come to your code, and paste it over here. And now if you comment this out, even then jQuery will be included into your folder provided that you have internet connection right. Right now the jQuery library is being located at this location, so if you just copy this and go to a browser and paste it, you will see that the entire jQuery library is over here online. So what you're doing is you are accessing this entire jQuery library online and this will only work if you have internet obviously. And then this integrity is something which is related to security stuff, you don't have to bother about it. So this is another way in which you can use this jQuery library. and even now the code will work, you can see we got fade and fade out effect. Let me just reduce this, if I click on it we get fade out, if you click on it, we get fade in which means that jQuery is still being used into our system because it is being accessed over the Internet. So this is another way.

Local vs. CDN: Which Should You Use?

So we will go through the offline way, that is we will download the jQuery on to our system, because that is the basic way. When you are actually hosting your website on to a server, we are when you are making things live, generally CDNs are preferred because the CDN servers are very fast compared to our servers. Okay, so that's why depending on those is much more safer and much more smarter way of using jQuery or any other libraries. Okay?

So that's it for this video guys I just wanted to take an introduction to jQuery what is jQuery and how to actually use it into our code, how to include the jQuery library and how it works. In further videos we'll brush up through more concepts on jQuery, so that you'll get a very good understanding of how we can use jQuery to enhance our code and answer client-side front end scripting.

So thanks for watching guys. If you like this video, please give it a thumbs up. Let me know in the comments of this video was and see you guys in the next video. Peace.