Tap for Menu

Learning Basic jQuery!

So what is jQuery? jQuery is a MASSIVE JavaScript library that adds many much needed features, and makes a lot of tedious JS tasks a breeze. I can't think of the last time I haven't used jQuery when creating more sophistaced web sites. It's hugely popular and I'm willing to bet that favorite website of your's uses it. This section of the guide will brush the surface and get you started with jQuery! Some of the following example code is from impressivewebs.com! Go check them out!

Basics

Let's start by linking to the libaray in our head file. Add a new script src="link" tag.
The link most used for linking to jQuery is: http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js Get to know the above function. You will be using it a lot. This tells jQuery to execute it's code once the document has loaded. You can see that it is similar to plain JS code, but not exactly. jQuery functions always begin with "$".

Selecting Elements

There are several types of "wrapped sets" in jQuery. This can be very powerful, as you can select items in a large number of ways. Typically you will use jQuery to select objects by class name, and then minipulate them. We will learn how to minipulate objects later on, but it's important to know how to select them for use. This isn't by all means all of the ways, there are many more complex methods. Check out the offical jQuery Docs.

CSS Class Names

Hey! Let's actually do something with jQuery now! So in the below code we are adding and removing classes. The toggle adds and removes something, in this case a class. This is useful for button presses. So lets make a function. In the above function we say that if the HTML content that has an ID of "myelement" has a class of content we should do what is below. Because of the above code we could or could not have a class there. Remove all of the adding classes code except the addclass line. When you run the code you should see an alert, and then some CSS styles applied! If we want to use jQuery to modify use CSS we use ".css". SO in the first line after the alert we select all of the "p" tags and change their content's width to 400px. As you can see you can also select elements with IDs.

Events

jQuery events happen when a certain event happens. This can be something from a click to a hover. Start with your selector followed by your event handler then have you function below. In the above example we use the click handler. Some other popular handlers include blur, focus, hover, keydown, load, mousmove, resize, scroll, submit, select. There are many more so check out the docs. Let's do a more complex example. Let's start by making a simple list. This could be a shopping list for example. I'm going to add a class of 'fade' to the last two. When we hover over a "li" element it will append three stars to the end of it. Simple enough right? The 'this' selector refers to the element from above. In the next function's selector you can see we selected the "li" elements with a class of "fade". These ones will fade in for a set amount of time (in milliseconds) and then fade in. This example makes good use of different jQuery code.

Showing and Hiding

jQuery includes a number of shortcuts that make JS much easier. One example of this is showing and hiding DIV elements. In the below examples you can show and hide the element and then do something once it is shown or hidden. (Like show an alert). The toggle function appears again, as it is a great way to move between states.

The hide and show allows you to specifiy slow or fast or a set amount of time. See above.

Here is some more examples of showing and hiding elements. These functions could work great in a choose your own adventure game for example. When a button is pressed you can fade in a div, and then fade it out when it is pressed again using the toggle function.

Effects

jQuery comes built in with a number of effects. The effects shown below are similar to the fade in and fade out functions. So we want "myElement" to slideDown, and then we could have it change the page for example. These make great between page animations.

We can also get much more in depth with the CSS using the .animate function. Below we are having "myElement" change a number of things, and then run a funciton. The callback function is something that will run when the effects are done.


jQuery is so much more complex, and has so many more features than listed above. I only began to scratch the surface. Check out the offical docs for more!