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!
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 "$".
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.
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.
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.
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.