Don't Worry...

IT'S JUST jQUERY

First: the What

jQuery is a JavaScript library.

It makes writing JS methods just a little bit easier.

You will still have to deal with a thousand parentheses and curly brackets and semicolons.

Sorry.

function junction

"Functions" in JavaScript/jQuery are akin to

"methods" in Ruby/Rails.

However, a function will not necessarily be "called" as a method would...

def add_it_up
  
  sum = 42 + 108

end

function myFunction() {
  var sum = 42 + 108;
  return sum;
}
    

calling javascript functions

function myFunction() {
    document.getElementById("peek").innerHTML = "Here I am!";
}

Normal JavaScript functions will need to be called.

<p id="peek">Where is that guy?</p>

<button type="button" onclick="showMe()">Look!</button>

When the button is clicked "Here I am!" will replace the text "Where is that guy?"

Normal JS will often rely on button-pushing to active functions. Lame!

document ready!

$(document).ready(function(){


});

jQuery functions will start out with the code:

This means that on the loading of the webpage attached to this script, all functions within those curly brackets will be called.

Let's see that JS function from the last slide...jQuery-style!

No buttons required

$(document).ready(function(){
    $("#peek").click(function(){
	$(this).html("Here I am!");
    });
});

<p id="peek">Where is that guy?</p>

Though it did require a couple more lines of JS/jQuery, we can remove the button, and all we have to do is click on the actual line of text to make it change!

but i love buttons!

Don't worry, you can still use buttons.

Notice the "this" in parentheses.

$(document).ready(function(){
    $("#peek").click(function(){
	$(this).html("Here I am!");
    });
});

That refers back to the id called in the line above ("peek").

Instead of "this" inside those parentheses, we could easily call another id or class.

button up

$(document).ready(function(){
    $("#celebrate").click(function(){
	$(".hiphip").html("HOORAY!");
    });
});

<p class="hiphip">Yay?</p>

<p class="hiphip">Super-duper?</p>

<button id="celebrate">Get excited!</button>

When you click on the button, both paragraphs will change to say "HOORAY!"

calling all elements

With jQuery, you don't even have to give that button an id or class. We can just call the element.

$(document).ready(function(){
    $("button").click(function(){
	$(".hiphip").html("HOORAY!");
    });
});

<p class="hiphip">Yay?</p>

<p class="hiphip">Super-duper?</p>

<button>Get excited!</button>

A word of caution: now any button on your page will perform the same action.

jquery knows css, too

jQuery isn't just about changing your HTML text.

It can change your CSS, as well.

$(document).ready(function(){
    $("#changestyles").click(function(){
        $("#nowred").css({"color":"red"});
        $("#nowblue").addClass("blue");
        $("#wasgray").removeClass("gray");
    });
});

<p id="nowred">This text will be red.</p>
<p id="nowblue">This text will be blue.</p>
<p id="wasgray" class="gray">This text was gray.</p>

<button id="changestyles">Change the Styles</button>

amazing animating jquery

jQuery has several commands that help make your webpage more animated.

.hide()
.show()
.toggle()

.fadeIn()
.fadeOut()
.fadeToggle()

.slideUp()
.slideDown()
.slideToggle()
//all the above commands can 
//take numbers for time or "slow"/"fast"

.animate()
//animate can move objects around, 
//change the size of an element