jQuery is an open source JavaScript Library that is useful for both confusing English majors who always capitalize the first letter in a sentence, and simplifying a great many tasks that might normally take several additional lines of code were it not employed. It does not, however, do anything new; just about anything you can do with jQuery, you can also accomplish without jQuery. Additionally, there are actually times when using jQuery will slow down your website rather than speeding it up. You can see more about this at “http://youmightnotneedjquery.com”. That being said – jQuery is incredibly popular and useful and we are going to learn how to use a few of its ‘super-powers’.
First, we will start off simple, mainly because I’m not pro at this yet myself, and partly because, well, that’s just usually the best place to start.
One of the first things to note is that you need to have the jQuery library ‘enabled’ on the website you are going to use it on. This is accomplished fairly easily. One way to do it is to install it locally on/in the project that you will be using it with. If you are using VS, you can install jQuery pretty quickly though nuGet. Alternatively, although it is a tad slower, you can have jQuery loaded from an online source, called a “Content Delivery Network”. The way to do this is quite similar to how you would include a css or javascript file in your project, except – there’s no file! Here’s how:
Navigate to the head section of your html file where you have these lines of code.
<script src="scripts/scripts.js"></script> <link href="styles/style.css" rel="stylesheet" />
Then, just above those add
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
You can test to ensure jQuery is working on your page by opening the console window in Firefox, Chrome, or most other browsers, and typing “jQuery” into the console command line. If you don’t get an error, everything is working fine. Ok, so now that we have jQuery working, lets look at some of the nifty things we can do with it.
The first thing we are going to do is change the color of some text when we click on it. So, in your project, in your JavaScript tag, go ahead and copy this in (without the enclosing quotes of course): “$(function () {$("body").click(function () {$("body").css("color", "#003b6f");});});”. Looks totally easy and obvious with no explanation needed right? Totally self-explanatory? Great, moving on. What’s that? You want me to go over it anyway, just in case your friend doesn’t understand? Ok, fine.
First off, jQuery seems to mostly be done as inline anonymous functions. I don’t know why, and it seems like a horrible way to code, but it’s what the vast majority of websites seem to do with jQuery. There are a few proponents out there of making the code be more readable by using named functions and classes, and calling them at the appropriate times with arguments, much like you would do for, you know, any other programming language. But we’re not going do that here because, well, I’m not that savvy yet. We are stuck with this “spaghetti code”. That being said, lets see what we have.
Our first bit of code is the jQuery Selector “$”, you use this to let the compiler know that you’re about to throw some spaghetti at it. Then we open our parenthesis to start out code. The first “function() {}” is to tell the compiler that this is an inline anonymous function that should be run when triggered. This first function() is actually optional, but if you don’t include it then you have to include your code in the html page where you want it to run, and that script block has to be at the bottom/end of the page.
I’m not sure 100% why it works like this, but I imagine it has to do with needing all the id’s, div’s, classes, css, etc. to be in-place already before it tries to execute the code. Either way, it is generally “better” to put in this opening anonymous “function()” at the start of your script to ensure that it runs when and where you want it to with the least amount of headache.
Which brings us from “$(function(){});” to “$(function() {$(“body”).click();});”. Here, the Selector symbol (still ‘$’), is letting us know that we want to perform the click event when something is clicked. When what is clicked? “body”. So this is telling us that whenever a user clicks anywhere on the “body” of the html page (which is pretty much anywhere at all), that we should do something. What should we do? We should run a function, which brings us to “$(function() {$(“body”).click(function(){});});”. What should that function do you ask? Let me tell you: it should run the following simple jQuery Command: “$(‘x’).css(‘var’, ‘val’);”.
This is a prototypal jQuery command. In this case you would replace x with whichever html or css identifier you want to manipulate, such as ‘div’, ‘a’, ‘body’, ‘#id’,’.class’, ‘nav ul li’, etc. pretty much any way you would define a css style, you put in here as “what to act upon”. Or more accurately, “what to select”. Var would be replaced with the css tag, like ‘color’, or ‘padding’, or ‘height’ (if the css uses a dash, like ‘font-weight’, you replace it with a camel-cased version, a-la ‘fontWeight’). Then, finally, you replace val with the value you want.
So in our case we end up with “$(‘body’).css(‘color’, ‘003d9b’);”. Then we stick that into our $paghetti, to get the final product of: “$(function () {$("body").click(function () {$("body").css("color", "#003b6f");});});”. Now, on that page, when you click (almost) anywhere, all the text turns #003d9b, or, “Tardis Blue”.
I actually have more to say, and can explain 2 more changes/pages, but I’m running out of time since I’m super behind this week due to my Grad school classes sucking super bad, so I will have to wrap this up for now, and turn it in. The code is done and has all the changes done for the full 3 pages, but since I’m out of time to turn it in, this will have to do for now, and when I have time to update this blog post with the code for the other pages, I will do so.
No comments:
Post a Comment