Try Jquery - Codeschool.com

Front 1

Document Object Model
(DOM)

Back 1

A tree-like structure created by browsers that JavaScript uses to manipulate HTML elements and other nodes (like text).

Front 2

.text()

Back 2

A jQuery method that gets the text value of matched elements.

$('h1').text();

Front 3

$(document).ready(funtion() {
//Run code here after DOM has finished loading
});

Back 3

The $(document).ready() method runs jQuery code after the DOM is ready.

Front 4

$(window).load(function() {
//Run code here after all elements on the page have finished loading including images.
});

Back 4

The $(window).ready() method runs jQuery code after all elements on the page have finished loading (like images).

Front 5

$(function() {
//Shorthand to run code here after DOM is ready
});

Back 5

Shorthand for $(document).ready() & code inside will run after the DOM is ready.

Front 6

$('#destinations li');

Back 6

The <li> element is the descendant selector.

Front 7

$('#destinations > li');

Back 7

Direct child selector of a parent element.

Front 8

:first

Back 8

Select the first child of a matched element.

$('#destinations li:first');

Front 9

:last

Back 9

Select the last child of a matched element.

$('#destinations li:last');

Front 10

$('ul li:odd');

$('ul li:even');

Back 10

Odd & event pseudo selectors. Index starts at 0 for elements so :even gets 1st <li> below.
<ul>
<li>A</li> [Index is 0 so :even gets element]
<li>B</li> [Index is 1 so :odd gets element]
<li>C</li> [Index is 2 so :even gets element]
</ul>

Front 11

.find()

Back 11

A method that gets the descents of the parent element & uses traversing. Also called a traversal.

*Faster than using descendant selectors!

$('#tours').find('li');

Front 12

.first()

Back 12

A traversal to find the 1st matched element.

$('li').first();

Front 13

.last()

Back 13

A traversal to find the last matched element.

$('li').last();

Front 14

.next()

Back 14

.next() finds the next sibling matched element.

The code example uses walking the DOM and method chaining to find the 2nd element.

$('li').first().next();

Front 15

.prev()

Back 15

.prev() finds the previous sibling matched element.

The code example uses walking the DOM and method chaining to find the eventually find the 1st element.

$('li').first().next().prev();

Front 16

.parent()

Back 16

Gets the matched parent element, and 1 node only, by walking up the DOM.

$('li').first().parent();

Front 17

.children()

Back 17

Gets the direct children of the parent node.

$('#tours').children('li');

Front 18

var price = $('<p>From $399.99</p>');

Back 18

Code example creates a node but DOESN'T add it to the DOM.

Front 19

.append()

Back 19

Adds a node of the last direct child of the matched parent element.

var price = $('<p>From $399.99</p>');

$('.vacation').append(price);

Front 20

.remove()

Back 20

Removes the matched element from the DOM.

$('button').remove();

Front 21

.appendTo()

Back 21

Insert element as last node in matched parent node.

var price = $('<p>From $399.99</p>');
price.appendTo($('.vacation'));

Front 22

.prependTo()

Back 22

Insert element as 1st node in matched parent node.

var price = $('<p>From $399.99</p>');
price.prependTo($('.vacation'));

Front 23

.insertAfter()

Back 23

Insert element after matched element as a sibling.

$('<p>Test</p>').insertAfter('.inner');

Front 24

.insertBefore()

Back 24

Insert element before matched element as a sibling.

$('<p>Test</p>').insertBefore('.inner');

Front 25

.insertAfter()

Back 25

Insert element after matched element as a sibling.

$('<p>Test</p>').insertAfter('.inner');

Front 26

$(document).ready();

Back 26

Ready method that run JavaScript after the DOM is ready.

Front 27

function() {

}

Back 27

In jQuery this appears inside of the $(document).ready(); method and is called an event handler function.

The $(document).ready(); method takes 1 argument which is the event handler function.

Front 28

.on(<event>,<event handler>);

Back 28

A method that attaches event handlers to the currently selected set of elements.

Must be inside the event handler to run when the DOM is ready.

$('button').on('click', function() {
//Code here runs on the specific <button> element that was clicked
});

Front 29

.closet()

Back 29

Find ancestor of matched elements.

Finds 0 or 1 nodes of matched elements & .parents() finds all nodes of matched elements.

Front 30

this

Back 30

"this" refers to the specific element that an event is happening to. In the code below "this" refers to the <button> element that is clicked.

$('button').on('click', function() {
var price = $('<p>From $399.99</p>');
$(this).closest('.vacation').append(price);
$(this).remove();
});

Front 31

HTML5 --->>> data* Attributes

Back 31

The data* attributes are used to store custom data private to a page or application and can be added to all HTML elements.

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
</ul>

Front 32

.data(<name>)

.data(<name>, <value>)

Back 32

Store arbitrary data associated with the <data*> attributes of matched elements. In the example below the .data() method stores a "399.99" value.

<ul>
<li class="vacation" data-price="399.99">Hawaiian Vacation</li>
</ul>

$('.vacation').first().data('price');

Front 33

$('.vacation').on('click', 'button', function() {
//Run event on element that event happened to
});

Back 33

Event delegation is used so I only target <button> elements inside the <.vacation> element.

Front 34

.filter() vs .find()

Back 34

.filter() --->>> Search through all the elements.

.find() --->>> Search through all the child elements only.

Front 35

.addClass

Back 35

Add a class to a set of matched elements. The code below adds a <.highlighted> class to the matched elements.

$('.vacation').filter('.onsale').addClass('highlighted');

Front 36

.removeClass

Back 36

Remove a class to a set of matched elements. The code below removes a <.highlighted> class to the matched elements.

$('.vacation').filter('.onsale').removeClass('highlighted');

Front 37

.parent() vs .parents()

Back 37

HTML used for examples below:
<div class="one"><div class="two">
<p><span>Text</span></p>
</div></div>

parent() --->>> Code below selects <p> which is a single parent node:
$('span').parent();

parents() --->>> Code below selects all parent nodes including <p>, <div.one>, <div.two>, <body>, <html>:
$('span').parents();

Front 38

var vacation = $(this).closest('.vacation');

Back 38

Example of assigning a method chain to a variable.

Front 39

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

Back 39

.fadeToggle() --->>> A method that toggles between .fadeOut() & fadeIn() when an event happens, like a click.

$(this).find('.comments').fadeToggle();

Front 40

.slideDown()
.slideUp()
.slideToggle()

Back 40

.slideToggle() --->>>A method that toggles between .slideUp() & slideDown() when an event happens, like a click.

$(this).find('.comments').slideToggle();

Front 41

alert()
.length

Back 41

The code below uses the .length object property and alert() method which are reserved words and part of plain JavaScript.

The .length property measures number of a specified object, like the <li> nodes in the example below.

alert($('li').length);

Front 42

.mouseenter()

Back 42

This method triggers the mouseenter event or attaches a function to run.

Your mouse must move over an element to fire this method.

$('.confirmation').on('mouseenter', 'button', function() {
//Fire event here
});

Front 43

function showTicket() {
$(this).closest('.confirmation')
.find('.ticket').slideDown();
}

$(function() {
$('.confirmation').on('click', 'button', showTicket);
});

Back 43

This code shows an example of refactoring an event handler.

The 3rd parameter in the "on" method fires the "showTicket" function after the "on" method is fired.

The "on" method is also inside the shorthand $(document).ready(); method to ensure it fires after the DOM is ready.

Front 44

.mouseleave()

Back 44

This method triggers the mouseleave event, or a attaches a function to run, when a mouseleave event occurs.

Your mouse must leave an element to fire this method.

$('.confirmation').on('mouseleave', 'button', function() {
//Fire event here
});

Front 45

.keyup()

Back 45

Bind an event handler to the "keyup" JavaScript event or trigger that event on the element.

The "keyup" event occurs after pressing a key on your computer and then letting your finger up.

Event binding refers to telling the browser that a particular function should be called whenever some event occurs.

$('.vacation').on('keyup', '.quantity', function() {
//Run code here after after "keyup" event
});

Front 46

How to Convert a String to a Number

Back 46

In jQuery adding "+" at the beginning of a variable declaration will convert a string that contains numbers into a number type.

var price = +$(this).closest('.vacation').data('price');

Front 47

.val()

Back 47

Gets the value inputed to matched elements, like a <input> field.

var quantity = $('input').val();

Front 48

Converting Numbers to Strings using .text()

Back 48

The .text() method can be used to get the text value of matched elements AND convert numbers into strings.

The .text() method accepts a number or a string.

In the code below if the "price" and "quantity" variables below are assigned to numbers the final result of their multiplication is converted into a string.

$('#total').text(price * quantity);

Front 49

.focus()

Back 49

Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

The "focus" event fires when an element gains focus, like clicking your mouse inside of an <input> element.

$("#nights").on("focus", function() {
$(this).text("7");
});

Front 50

event.preventDefault();

Back 50

If this method is called, the default action of the event will not be triggered. The method does not accept any arguments.

For example, clicked anchors will not take the browser to a new URL.

The code below prevents the web page from jumping to the top, the default behavior, after an anchor is clicked and a hash is added to the URL.

$('.vacation').on('click', '.expand', function(event) {
event.preventDefault();
$(this).closest('.vacations')
.find('.comments')
.fadeToggle();
});

Front 51

event.stopPropagation();

Back 51

The event.stopPropagation() method allows the event's default functionality to happen but prevents the event from propagating, or bubbling to parent elements.

The default browser behavior will still occur. This method accepts no parameters.

In the code below the event event will happen on the <p> element yet no events will happen on parents of the <p> element because of the event.stopPropagation() method.

$( "p" ).click(function( event ) {
event.stopPropagation();
// Do something
});

Front 52

.css(<attr>)
.css(<attr>, <value>)
.css(<object>)

Back 52

A method to get CSS attributes, get and set CSS attributes or get and set CSS attributes passing an object as a parameter.

The code below uses an object to get and set CSS attributes. Remember that JavaScript object literals have braces around object properties, have colons between property names and values and that the properties are separated by commas except the last one.

$(this).css({'background-color': '#f00',
'border-color': '1px solid #000'});

Front 53

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

Back 53

.show() applies a "display: block" CSS property to matched elements. Parameters are accepted.

$(this).find('.price').show();

.show() applies a "display: none" CSS property to matched elements. Parameters are accepted.

$(this).find('.price').hide();

.toggle() hides and shows an element when an event is fired.

$(this).find('.price').toggle();

Front 54

.addClass()
.removeClass()
.toggleClass()

Back 54

.addClass() adds one or more classes to matched elements.

$(this).addClass('highlighted');

.removeClass() removes one or more classes to matched elements.

$(this).removeClass('highlighted');

.toggleClass() adds or removes one or more classes to matched elements when an event is fired.

$(this).toggleClass('highlighted');

Front 55

.animate(<object>)

Back 55

Takes a CSS object as a parameter to cause an animation, similar to .css(), when an event fires.

$(this).animate({'top': '-10px'});

Front 56

.hasClass()

Back 56

Determine whether any of the matched elements are assigned the given class.

For the code below if the ".highlighted" class exists the ".animate({'top': '-10px'})" event occurs and if the ".highlighted" class does NOT exist the ".animate({'top': '0px'})" event occurs.

$(this).toggleClass('highlighted');

if( $(this).hasClass('highlighted') ) {
$(this).animate({'top': '-10px'});
} else {
$(this).animate({'top': '0px'});
}

Front 57

.animate(<object>, <speed>)

Back 57

The .animate method can accept a second parameter that shows the speed of the animations in milliseconds or words like "fast" which represent 200 milliseconds.

The examples below show the words which match up to the milliseconds. When a second parameter for speed is NOT included then a default of 400 milliseconds is added.

$(this).animate({'top': '-10px'});
$(this).animate({'top': '-10px'}, 400);

$(this).animate({'top': '-10px'}, 'fast');
$(this).animate({'top': '-10px'}, 200);

$(this).animate({'top': '-10px'}, 'slow');
$(this).animate({'top': '-10px'}, 600);

Front 58

.vacation {
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition: top 0.2s;
transition: top 0.2s;
}

.highlighted {
top: -10px;
}

Back 58

The transition CSS3 property can add an animation when an event occurs, like hovering over an element.

The code