Welcome to KnowledgeCity's course on Advanced JavaScript. In this chapter of our course, we'll be looking at jQuery. Let's talk a little bit first about why you might want to consider using jQuery, because there are a lot of JavaScript libraries out there. What's so good about this one? Well, first of all, it's pretty popular. I read a statistic the other day that said, 96% of all websites that use JavaScript use jQuery, which is over 75% of all sites all over. So, it's pretty popular. There's got to be a reason for that, and, yes, there are reasons. You can do more with less code. First of all, manipulating the Document Object Model. With regular JavaScript, let's say for example, that I wanted to select all the paragraphs in the DOM, I would do it with document.querySelectorAll for example. With jQuery, that's all I have to do. And the less code that we can write, the more code we can kick out and be more productive, and we definitely do want that. So jQuery excels in DOM manipulation. It also makes AJAX calls dramatically easier than quote-unquote, regular JavaScript would do. And it does have a rather large effects library that leverages effects from CSS. And the big thing is, 'cause we don't wanna worry about this either, it abstracts out cross-browser issues. jQuery is just a library, it's a pretty extensive library as you'll see once we install it in this lesson. But one of the things it does is it abstracts out cross-browser issues, so that we don't have to worry. Our jQuery code should run equally as well in any type of browser without us having to worry about most of the browser specifics in the world. So having said all that, hopefully we've made a case where you're going to be interested in doing this. Let's look at ways that we can install this. Now for this course, I'm going to be using Visual Studio. And this is the full Visual Studio, Community Edition rather is what I have here. So, all the tools are available here, you can go download this for free if you don't have it. Now, I realize there are a lot of different places you might want to write jQuery for or from different technologies you're using along with it, so I'll show a couple of different approaches here and then we'll talk about what we need to do to specifically make it part of the application that I'm running here. But first of all, the easiest thing is to just go and get it. So we can go to jquery.com, there is the documentation there, very good examples on how to use this. But you can download jQuery right from here. The current version as of the time of this recording is 3.5.1, which is what I'm going to be using in my projects. If you don't want to install it directly, as with most libraries of any sort of popularity, you can also use the CDN. So you're just linking to whatever the closest version of, and with jQuery they do give you these four options there. The uncompressed, the minified, the slim and the slim minified. So depending on where you are in your project, you would use different ones here. Typically, we use the uncompressed version at development time so that we can do some debugging, and then the minified one at production time so that our app is more performant, runs smoother, files smaller. All that kind of stuff. If you want to use the CDN, you just click that and there's your script link. So I can just copy that in there, and as it says, crossorigin and integrity are in there for the SRI checking. So if I'm gonna do that, then that's all I have to have in any document that I want to have that available in. The other options, if you're using NPM, which we can do from Visual Studio. What I need to do is open a command line here, and a nice little tool that I've got for that, Open Command Line. This is an extension that you can add to Visual Studio. So if you're not using Visual Studio specifically, don't worry too much about this part. But I like this as an extension and you can just add extensions here through the Extensions menu. But Open Command Line gives me either PowerShell or my Dev command prompt or the Default command prompt. And for this one, it doesn't really matter. But the nice thing that I don't have to worry about when I do that, is notice that it puts me right there at the folder that I need to be in, 'cause what I'm gonna do right here is just install jQuery using NPM, so Node Package Manager. And the name of the package is simply just jQuery. And you can see from that, looks like we don't have NPM installed. Well, that's pretty easy to fix. There we go. You can get Node js and NPM together. So I'm gonna go ahead and install that one. And we'll let that do its thing and come back in a second. All right, we're back through the magic of video. Let's see if NPM is currently installed. That's good, we get the documentation. And making sure that jQuery gets in there, again, it's a pretty simple matter of the package is just named jQuery and this should get it all installed for us. So, in this particular project, what that ended up doing for me was creating a node modules folder. Now, if this is showing as grayed out in your project or if you're not seeing it at all, here's how we get it in Visual Studio. First of all, we wanna make sure that show all files is showing all the files. And you'll see folders here and files that are not actually considered part of your solution but they're in the directory. So if yours is showing up like that, for example, then we wanna do Include In Project there, so that it is part of the project. And that's where all our node packages are gonna end up. And that's where the jQuery is. Now, for this particular kind of project, I'm doing an ASP.NET Core application. And for this particular project type, in order for static files to be served, I do have to make one change in the startup.cs file. So, again, if you're not using Visual Studio or the Core application project way to build it, don't worry about this part, get NPM to install jQuery however you can do it and then just go ahead and use it. But for this particular application type, we need this call to use static files, it's just something the application needs. And I'm just taking the root path of my application, tacking the node modules folder on there, so that it will serve the jQuery out of that particular location. Now, when I end up doing that, then back on my page in order to get the reference, it's still just a script reference. And the source there is we're gonna go from node modules on down. So we had our jQuery package in there. And, let's see, I believe that's in another sub folder. So there's dist and I'm gonna just use whatever jQuery file is there. So that would be jQuery.js. So any of those ways are fine. However, you want to get that script in there, whatever works for you, then that's just fine. And let's test and make sure that we've actually got something. What we're always calling is the jQuery function. And so you can use the actual word, jQuery. But what you will probably see most people doing is using the dollar sign. So we can do either one of those, that's fine. Now there is a possibility that some other library would use dollar sign as something significant. So what you can do then, is basically surrender control of the dollar sign to that other library if you have it, and you can do what's called no conflict mode. So for example, I could name this anything else I want, jq is pretty standard, and then we would call jquery.noConflict. So now for the rest of what we're going to do, jq calls the jQuery function and then we can do whatever it is we need to do. Document ready is something you'll find yourself using fairly often in jQuery applications. This is what runs when everything loads up. So, I don't need no conflict mode, I'm just gonna simply use the jQuery function here. And what we're doing is looking at the document object and then this all runs when our document loads up. So let's just do a quick little hello world here, and make sure that the method that we chose works. I'm gonna just go ahead and use this CDN for now. And we'll save everything and we should have ourselves a page. Ready for the most memorable hello world ever? Better than all the others you've ever seen. There we go. Hello. See, it's misspelled, it's very memorable. So in this lesson, we looked at a variety of ways to get jQuery installed in your project. Stay tuned for the next lesson, we'll look more at the jQuery function and the wrapped set of elements and how to use selectors.
