mwalters/jquery-crash-course.md

## jquery-crash-course.md

      
    Raw
  

              jquery-crash-course.md
            
          
    Ok, crash course in jQuery and stuff:
Accessing jQuery

jQuery makes a global object, typically referenced by "$". There's also something called no-conflict mode where you'd reference it by "jQuery", but you won't see that too often in what we're doing, but just in case you encounter it, essentially these are the same:
$('.article')
jQuery('.article')

Element Selection

You can select elements on a page in 3 typical ways, which are similar to CSS selectors. Little background:

Elements are things like a, div, h1, span, etc

They can have CSS classes (<div class="article"></div>)

Classes can be given to many elements. In CSS, Classes are referenced with a "." (".article")


They can have ID's (<div id="article"></div>)

ID's can only be given to one element on a page. Technically you can duplicate, but it's invalid HTML. In CSS, ID's are referenced with a "#" (e.g. "#article-42")


So let's say you have:
<div>
	<div id="article-1" class="article"></div>
	<div id="article-2" class="article"></div>
</div>
If you wanted jQuery to do something with all of the divs on the document, you would do:
$('div')
If you wanted to use jQuery to do something to each of the ".article", you would do:
$('.article')
If you wanted to do something with a specific article, you would do:
$('#article-1')
Manipulations

You can do LOTS of things once you have your element selected
$('#article-1').css('border', '1px solid #ff0000');
Or, you could tell it to do something to each of the articles
$('.article').css('color', '#333');
Those are the same as this in your CSS file:
#article-1 { border: 1px solid #ff0000; }
.article { color: #333; }
That would put a red 1px border around the "article-1" div and change the text color of each of the articles to "#333333". See here for all kinds of manipulations you can do: http://api.jquery.com/category/manipulation/
Events

jQuery can do more than simple manipulations though, it can also be used to tie actions to events. This is typically done via callback functions. As you really get into jQuery, you will start to see lots of anonymous callback functions, they're all over the place. So let's say you had:
<a href="#" id="clicker-1">Click Me!</a>
Perhaps you wanted an alert to pop up when this link was clicked. You could do this:
$('#clicker-1').on('click', function() {
	alert('That tickles!  MY NAME IS NOT TICKLE-ME-ELMO!');
});
The second parameter to .on() is a callback function here. You can read more about .on() here: http://api.jquery.com/on/
One thing to be aware of, jQuery can pass things in to your anonymous functions at times, for instance, the above could also be this:
$('#clicker-1').on('click', function(event) {
	event.preventDefault();
	alert('That tickles!  MY NAME IS NOT TICKLE-ME-ELMO!');
});
jQuery passes an Event Object to your anonymous function for .on(). You can choose to ignore it like I did in the first example, or possibly do something with it as I did with the second example.
If you know what Closures are ... be aware that JavaScript/jQuery supports them. They're a big topic, so I won't really try to cover it here.
Making it execute

The last piece I might would pass on is to be aware that when your page loads, and your JS starts to execute, a LOT is going on. The browser is fetching external CSS and JS files, images, rendering elements, re-rendering elements, all kinds of craziness.
That means it is possible your JS could start executing before the page is even done rendering in the browser. To keep your JS from executing before the DOM is ready, you typically do this:
$(document).ready(function() {
});
That tells jQuery, once the DOM is completely loaded, to execute your callback function. There are several ways to accomplish the above example, but my example is what you'll most commonly see.
Putting it together.

Tying things together, you might do this:
$(document).ready(function() {
	$('#article-1').css('border', '1px solid #ff000');


	$('#clicker-1').on('click', function() {
		alert('That tickles!  MY NAME IS NOT TICKLE-ME-ELMO!');	});

});
So once the document is ready, jQuery is going to modify the CSS for #article-1 to add a border around it, it is also going to bind a click event to #clicker-1 that will pop up an alert when it is clicked.
Just as a sanity check, please keep in mind that you would never want to modify the CSS of an element on document.ready like I did above. It was purely an example. If that is what you wanted to do, it would be better to just add the rule in your CSS file. You might use .css() like this though:
$(document).ready(function() {
	$('#clicker-1').on('click', function() {
		$('#article-1').css('border', '1px solid #ff000');

	});
});
In the above instance, we're saying that after #clicker-1 is clicked, we want to add a border to #article-1. In other words, when the page loads, we want it to look one way. After the user takes an action, we want to change that look, so it is then acceptable to use javascript to alter it. Hopefully that makes sense.
Wrapping up

So ... that's jQuery in a nutshell. It's insanely powerful and handles a lot of cross-browser JS non-sense for you. So you get to write the code once and it figures it out from there. Definitely check out the API docs to see all the manipulations you can do and events you can tie into.
Let me know if you have any questions in general or about anything I typed above. I put that all together on the fly, so hopefully it's accurate ... ;)