hey guys in this episode I’m gonna show you guys how to quickly begin using jQuery to manipulate of course uh EO web pages and so forth so hope this is going to be a quick one uh right on the screen right now I’m using vs code and I have created already an index.html file and it’s an absolutely blank file as you can see and on the browser it’s totally blank so we’re going to do this really quickly I’m going to create a very much Bare Bones HTML file and then we’re going to integrate jQuery into it and see how it works and hopefully this is going to be as I said quick so you don’t have to spend too much time on it alright so first thing is we of course create HTML tags and we create the head tag as well and we’ll name this we have to name this page so we just name this demo and that’s pretty much it for our head tags no an HTML document also has to have a body tag as well and we’ll just probably put hello wheel just to make sure that something appears on the page there we go we have a Hello World um page and with you know Hollywood is in within the body section okay so what is the quickest way of doing this is probably to load jQuery from CDN of some sort um so let’s do that very quickly I like to use cloudflare so I’m going to search for jQuery cloudflare CDN and when you do that you get the first link is cdnjs.com click on that and here we have a list of files that is available on the CDN now the one that we want to use is of course this one that is slightly orange or pink it depends on of course your screen colors um and we’re particularly using the min.js you can use the dot GS without the Min but Min stands for minified which means that the file is usually going to be smaller okay so it’s going to be quicker to download as well but because we link into it you won’t have to download anything right I’m talking about like opening it in the browser the browser has to pull this file to the user and so forth so anyways go ahead and use just go ahead and click on copy script tag so when you click on that we go back to our vs code and right under the head just paste that in and you don’t have to worry too much about what everything is I’m not going to explain that as I said this is a very very quick crash course into getting something to work now we basically this is not going to do anything to say on the UI side and in other words you’re not going to see any difference here so for example I saved this file the HTML file and I’m going to go back to the demo page and nothing really happens right or at least at least not on the front side of things but we’ll get to what you need to do in order to utilize the jQuery library that we know imported in okay so first thing is first to make this easier we need to probably create a div all right so we’re going to make a div container and let’s class this container let’s name it something so we’ll name this placeholder and we’re gonna stick with hello world for a second we’re going to change this make sure that you get rid of this um tag there it’s going to break the HTML code and when we reload this nothing again is going to change but something did change in the background we’ll get to that as I get into the inspector but just stay tuned don’t leave us yet okay so now we have a placeholder and we have a class that we could reference this please order this div element to as we saw we already pulled in the the library and now we’re gonna create another script here and this time we’re going to put in some text into here so to the first thing we need to do is understand how jQuery works when it gets executed all right so the first thing jQuery requires you to usually do is to access jQuery use the dollar sign and then you put here document and then there’s a ready function and I’ll explain it ready function just now already function which requires a function as well which doesn’t have any arguments Open brackets here all right now here let’s to get something to get something going we’ll use the console okay so I’ll explain all this as we go along but the console is going to see um page has been loaded okay so let me explain what’s happening here so it’s basically whenever the document loads or it’s ready we want to run this function and this is all of course this is Javascript right so what it is saying is the entire page should load before whatever is inside of this function here whatever isn’t this function here will be executed and you want this to happen the reason why you want this to happen is because you want to make sure that all the containers load whatever the containers are they load first or else jQuery will not be able to find that container if it needs to manipulate the container I’ll explain that even for you as we go along so just stay tuned okay so let’s execute what’s happening here and I’ll explain again what’s happening if we look at the inspector so we go back to the page we’re going to reload this nothing happens but I’m going to open up the inspector which is Ctrl shift I of Chrome and I’m gonna go to this section called console I hope that you could see that and as I click on Console you’ll notice it says pH has been looted the fact that this this is this says pH has been looted means that whatever data was stored in the HTML file that has to loot completely first before the function inside here is going to Output page has been loaded so this console.log is not jQuery but it’s it’s part of JavaScript and basically it allows you to output something to this console here when you’re doing debugging and that’s what’s happening here and we need as I said we need this to occur we need to put whatever our code is within this ready function so to speak so that it actually is able to find the placeholder in other words the placeholder has to load first before you could manipulate the police holder itself all right and that’s what this function is actually doing so if I were to I’ll give you the example as we go along but let’s say we want to manipulate this let’s say we want to change hello world into something else right all we have to do is within this function we do the same format here dollar sign whatever it is so this is usually a tag of some sort that we need to use and in this case the tag will be the class all right well in when I say tag it’s actually the the CSS name basically all right so you’ll see what I mean here so a class usually has a dot in front of it so let’s go dollar sign Open brackets make sure to put quotations and you think that you could just type in placeholder here to reference it but that won’t work you need to actually put whatever the class name because this is a class you have to put a period a dot in front of it and that’s telling it that’s basically referencing this div element here okay so that’s what it does this this part is referencing this element here and now we could change what is inside here by calling the function dot HTML and let’s see welcome now if I save that as I said this whole page is going to load in the browser this function is going to wait until this full page loads it has to load the entire thing before it gets executed and then it’s going to execute page has been loaded onto the console and then it’s going to change the text of this div here let’s go it’s going to happen really really fast there we go see it’s really super fast so it’s it makes you feel as though it’s not happening in steps but it’s actually happening in steps and there’s a reason why and let me show you something so let’s see that we wanted to we we didn’t use the ready function let’s say we didn’t use the ready function let’s say we put this this outside of this ready function and let’s say we just we hide that okay let’s see we said welcome first before we looted the page there’s a chance it may not happen there we go notice it said hello world which is the original which is the original um uh text in this container notice that even though we call the placeholder properly right which pointed to this placeholder div element here and we tried to change it it did not change and as I said the reason is that you need to wait you need to use this ready function which loads the entire page freeze and then manipulate whatever is in these uh these containers all right so I hope that that at least explains how to uh you know how to begin using uh jQuery super fast but I needed to explain the ready function please in order to do that so let’s um this is not the only way that you could actually reference this uh placeholder for example let’s say instead of a class you had an ID so I’m going to remove this that this part that doesn’t work okay and we’re going to bring back in the the code that actually works let’s say that this was not a class but it was an ID instead like that this code would not work because it’s pointing to a class it’s looking for a class that does not exist anymore so if we reload here it’s going to just say hello world again it’s not going to work if we go back into placeholder we know based on CSS that in order to reference an ID right an i an element by its ID we need to put the uh the number sign okay so if I save that and then I go back here and reload is going to work so basically it overwrote what was in hello world using this these functions you know this command basically I’m going to call things command functions you know it’s pretty much the same thing at the end of the day it doesn’t really matter as long as you can get this really quickly to work with it uh is there anything else I need to show you I think that is just the beginning okay this is just a quick video as I said of how to go about using jQuery and I think we solved that problem of how to go about using jQuery it does look a little bit confusing but the more you use it you’ll realize how wonderful jQuery is and I don’t want to you know I don’t want to say anything you know negative about react whatever works for you guys it works for you guys but to me jQuery is so much faster so much easier to use not faster in terms of speed but it’s just so much easier to implement something in jQuery especially if you know what you’re doing as well in fact you could sort of imitate a lot of things that react does but we’ll go along uh hopefully depending on if the video is in demand then I’m going to continue on so make sure to like subscribe commenting as well let me know if there’s a if if this is something you’re interested in learning and I will continue to create videos on jQuery because I think it’s super awesome I use it even up to no and um it’s been a wonderful experience so far with that being said thanks so much and I’ll see you guys again soon bye