Functions Flashcards
What is jQuery?
jQuery is a way to build interactive websites.
Using jQuery, you can move HTML elements around, build custom animations, and let your users affect your website by clicking the mouse or typing on the keyboard.
jQuery
Functions are the basic unit of action in jQuery.
The main entry point of most jQuery applications is a block of code that looks like this:
$(document).ready(function() {
Do something
});
$(document) is a jQuery object. The $() is actually a function in disguise; it turns the document into a jQuery object.
.ready() is a type of function; you can think of it as sort of a helper that runs the code inside its parentheses as soon as the HTML document is ready.
function(){} is the action that .ready() will perform as soon as the HTML document is loaded. (In the above example, the Do something placeholder is where those actions would go.)
jQuery
Functions
Functions are the basic unit of action in jQuery.
The main entry point of most jQuery applications is a block of code that looks like this:
$(document).ready(function() {
Do something
});
jQuery
Functions are the basic unit of action in jQuery.
The main entry point of most jQuery applications is a block of code that looks like this:
$(document).ready(function() {
Do something
});
A function is made up of three parts: the function keyword, any inputs that function takes (they go between the ()s and are separated by commas if there are more than one), and whatever actions the function should perform (these go between the {}s). The general form is:
function(input1, input2, etc) {
Do a thing
Do another thing
Do yet another thing!
}
jQuery
Functions” $p vs $(‘p’)
$p is just a variable name. There is no magic associated with the $ in $p; it’s just a convention for saying, “hey, this variable contains a jQuery object.” We could call $p anything we want: $paragraph, paragraph, space_cows, whatever! It’s just helpful for people reading our code to see $p, since this is a concise way of saying “hey, there’s a ‘p’ jQuery object in here.”
$(), on the other hand, is magic. This is the function in disguise that creates jQuery objects. If you’re making a jQuery object, you gotta use it!
jQuery
Library: .hide
$(document).ready(function() {
$(‘div’).hide();
});
”.hide” hides the ‘div’
jQuery
Library: .fadeTo
$(document).ready(function() {
$(‘.pink, .red’).fadeTo(‘slow’,0);
});
.fadeTo ‘slow’ is the speed of the fade, and 0 is the opacity it will fade to.
jQuery
Library: .fadeOut
$(document).ready(function() {
$(‘div’).click(function() {
$(‘div’).fadeOut(‘slow’);
});
});
’.fadeOut’ fadesOut the ‘selector’ (‘div’) on .click
jQuery: Library
.fadeTo
$(document).ready(function() {
$(‘.pink, .red’).fadeTo(‘slow’,0);
});
‘slow’ is the speed of the fade,
and 0 is the opacity it will fade to.
jQuery
Assign Value
The = sign is used to assign values. For instance, in jQuery, you can write
var $p = $(‘p’);
Which stores the jQuery object $(‘p’) in the
variable $p. A variable is just a handy name we use to store jQuery values.
Why would we do this? Well, sometimes our jQuery code gets really long, and it can be nice to store it in small variables for later use. For example, if we wanted to modify a deeply nested HTML element, we could do this:
$(document).ready(function() {
var $item = $(‘div ul li ol li’);
$item.fadeOut(‘fast’);
});
CSS
Pseudo-Class Selectors: nth-child
You can select any child of an element after the first child with the pseudo-class selector nth-child; you just add the child’s number in parentheses after the pseudo-class selector. For example,
p:nth-child(2) {
color: red;
}
Turn every paragraph that is the second child of its parent element red.
The element that is the child goes before :nth-child; its parent element is the element that contains it.
jQuery
Using Selectors
Remember the structure:
$(document).ready(function() {
$(thingToClick).event(function() {
$(thingToAffect).effect();
});
});
jQuery
Using Selectors: Selecting by Class
$(document).ready(function() {
$(‘button’).click(function() {
$(‘.vanish’).fadout(‘slow’);
});
});
We don’t have to limit ourselves to selecting HTML elements like ‘p’ and ‘div’; essentially, we can put any CSS selector in quotes and pass it into $(). This means we can select classes, too!
Select classes in CSS by using a dot (.). If we have class=”red” in our HTML, we can target it in CSS with .red.
In jQuery, all we need to do is put ‘.red’ in quotes, and we can pass it to $() to make a jQuery object.
jQuery
Using Selectors: Selecting by ID
$(document).ready(function() {
$(‘button’).click(function() {
$(‘#blue’).fadeOut(‘slow’);
});
});
We can also select by ID. We do this by putting the ID name (in quotes) inside $(). Just as we need the . for classes, we need the # for IDs. We could target id=”header” like so:
$(‘#header’);
The semicolon at the end is important—it’s how jQuery knows we’re done giving it a command. For now, a good rule of thumb is that you should put semicolons at the end of any line that does not end with an open {. (The editor will try to help you out with your semicolon placement, so pay attention to its warnings.)
jQuery
Using Selectors: Flexible Selections
$(document).ready(function() {
$(‘.pink, .red’).fadeTo(‘slow’,0);
});
Essentially, anything you can target with CSS, you can modify with jQuery. This includes targeting elements that are descendants of other
elements:
$(‘ul li ol li’);
pseudo selectors:
$(‘li:nth-child(4)’);
and compound selectors:
$(‘p, li’);
