• Shuffle
    Toggle On
    Toggle Off
  • Alphabetize
    Toggle On
    Toggle Off
  • Front First
    Toggle On
    Toggle Off
  • Both Sides
    Toggle On
    Toggle Off
  • Read
    Toggle On
    Toggle Off
Reading...
Front

How to study your flashcards.

Right/Left arrow keys: Navigate between flashcards.right arrow keyleft arrow key

Up/Down arrow keys: Flip the card between the front and back.down keyup key

H key: Show hint (3rd side).h key

A key: Read text to speech.a key

image

Play button

image

Play button

image

Progress

1/58

Click to flip

58 Cards in this Set

  • Front
  • Back
Add a CSS class to selected part of the page (or remove a CSS class)
.addClass()
.removeClass()

parameter: name of class to add/remove
Schedule function calls for firing after DOM is loaded (without waiting for images)
$(document).ready(function() {
$('example').addClass('someclass');
});
The $() factory function
$() removes the need to do a for loop to access a group of elements. Whatever we put in $() will be looped through automatically and stored as a jQuery object.

$() is shorthand for
jQuery()
both do the same thing

e.g.
$('p') gets all paragraphs in a doc
$('#some-id') gets the single element in the document with some-id
$('.some-class') gets all elements that have some-class
select even/odd elements
These two examples produce the same zebra striped rows:

$('tr:odd').addClass('alt');
$('tr:nth-child(even)').addClass('alt');

The first starts counting at 0 (JavaScript) and the second, CSS-based, begins counting with 1.
retrieve the group of links nested inside a <p> element
$("p a")
replace contents of a DOM element with some HTML markup
$("someElement").html("I have added some test to an element");

or

$("someElement")[0].innerHTML = "I have added some test to an element";

the first above uses the jQuery method html(), the second uses jQuery to retrieve an array of elements, then uses ordinary JavaScript
select all even <p> elements
$("p:even");
select first row of each table
$("tr:nth-child(1)");
select direct <div> children of <body>
$("body > div");
select links to PDF files
$("a[href$=pdf]");
select direct <div> children of <body>-containing links
$("body > div:has(a)");
"utility function"
utility functions are simply methods of jQuery() or its alias $()

e.g.
$.trim(someString);
formal and informal syntax for waiting until document structure is parsed and browser has converted HTML to its DOM tree
formal...
$(document).ready(function() {
$("table tr:nth-child(even)").addClass("even");
});

informal...
$(function() {
$("table tr:nth-child(even)").addClass("even");
});

by passing a function to $() we instruct the browser to wait until the DOM has fully loaded (but only the DOM)
create DOM elements on the fly
$("<p>Hi there!</p>")

e.g.
$("<p>Hi there!</p>").insertAfter("#followMe");
CSS selector: Match all link (<a>) elements
a
$("a")
CSS selector: Match elements that have an id of specialID
#specialID

$("#specialID")
CSS selector: Match elements that have the class specialClass
.specialClass

$(".specialClass")
CSS selector: Match links with an id of specialID and a class of specialClass
a#specialID.specialClass

$("a#specialID.specialClass")
CSS selector: Match links with a class of specialClass declared within <p> elements
p a.speciallClass

$("p a.specialClass")
child selectors (select links <a> that are direct children of <p>)
p > a

$("p > a")
attribute selectors (select external links, that is, links with href value beginning with http://)
a[href^=http://]

$("a[href^=http://]")

the caret (^) specifies that the match occurs at the beginning of the value
attribute selectors (select an element that possesses a specific attribute, regardless of value, e.g. a form with the attribute method)
form[method]

$("form[method]")
attribute selectors (input where type is text)
input[type=text]

$("input[type=text]")
attribute selectors
- select all <div> elements with title attributes beginning with my
- select all links referencing PDF files (that is, ends with .pdf)
- select all <a> elements that reference the jQuery site (select arbitrary strings)
div[title^=my]

a[href$=.pdf]

a[href*=jquery.com]
container selector
(e.g. an <li> element that contains an <a> element, or does not contain that element)
li:has(a)

$("li:has(a)")

note: this is different from $("li a") which matches all <a> elements contained within <li> elements

li:not(ul:has(a))

Note: jQuery only supports one level of nesting as above in the not example
select by position
first
odd
even
last child of a parents
child number 4
elements with no siblings
a:first
p:odd
p:even
li:last-child
:nth-child(4)
:only-child

note: with nth selectors counting starts at 1 (for CSS compatibility), for other selectors, counting starts at 0
determine the size of the wrapped set
size() method

$('a').size();

returns the number of links on the page
add more elements to a wrapped set
$('img[alt],img[title]')
wraps <img> elements that have either the alt or title attribute

$('img[alt]').add('img[title]')
does the same thing, creating a union of <img> elements with alt or title attributes
get(index)
get(index)
obtains one or all of the matched elements in the wrapped set

e.g.
$('img[alt]').get(0)
index(element)
index(element)
finds the pased element in the wrapped set and returns its ordinal index within the set; if the element isn't resident in the set the value -1 is returned

e.g.
var n = $('img').index($('img#findMe')[0]);
add elements to a wrapped set
add() method

add(expression)

e.g.
$('img[alt]').add('img[title]');
remove an element from a wrapped set
(except relationship)
$('img[title]').not('[title*=puppy])');

This returns all image elements except those with puppy in the title

the not() method above returns the same results as using the :not filter below
$('img[title]:not([title*=puppy])');
filter method
pass filter() method a function
anything that evaluates false gets filtered out (excluded) from the wrapped set.

e.g. this filters out <td>'s that are not integers (filters to include only <td> elements with integers)

$('td').filter(function(){return this.innerHTML.match(/^\d+$/)});
obtain a subset of a wrapped set
slice(begin,end)

begin (number) - zero based position of the first element in to be included in the returned slice

end (number) - the optional zero-based index of the first element not to be included in the returned slice, if omitted slice extends to the end of the set
difference between slice() and get()
$('*').get(2);
returns the third element in the wrapped set

$('*').slice(2,3);
returns a wrapped set containing the element
find( ) method
var wrappedSet = $('p')

wrappedSet.find('p cite');
returns all citation elements (<cite>) in paragraphs in wrappedSet

this can also be written like this:
$('p cite',wrappedSet);
is() method
returns true if at least one element matches a given selector expression.

e.g.
var hasImage = $('*').is('img');

returns true if the current document has an image element, false if not
end()
use the end() method to back up to a previously selected set.

e.g.
$('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

appendTo() acts on the cloned set
end() backs up to the first set, to add the new class to the first set of images (not the cloned images)
andSelf()
merges the two previous (most recent) wrapped sets into one set
each()
$('*').each()

pass a JavaScript function as a parameter for each and it will iterate through the wrapped set, performing the function on each element
attr()
add or set an attribute

$('*')('class','example');
sets each elements' class attribute to example

$('*').attr('title', function(){somefunction });
sets the value of title based on somefunction

$('input').attr({
{ value: '', title: 'Please enter a value' }
});
sets the value of all <input> elements to an empty string and changes the titles to 'Please enter a value'
set
remove an attribute
removeAttr('class');

sets all class attributes to
class=""
set all links to external websites to open in a new window
$("a[href^=http://]").attr("target","_blank");
add and remove class names
addClass(names)

removeClass(names)
toggleClass()
togleClass('example')

the toggleClass() method lets you toggle a class on and off

with selected elements that have the class example, exampe is removed; with selected elements that don't have example, example is added
apply styles directly to elements
(overriding the style sheets)
css() method

css(name,value) works like attr()

e.g.
$('li').css('color','red');
or
$('div.expandable').css("width",function() {
return $(this).width() + 20 + "px";
});
get or set width or height
width()
height()

these are shortcuts for css()

$('div.myExample').width(500)

is identical to

$('div.myExample').css('width','500px')
find out if an element has a particular class
hasClass()

$("p:first").hasClass("surpriseMe")

returns true or false

note: you could achieve the same thing with
$("p:first").is(".surpriseMe")
retrieve or set HTML content
html()

obtains content of the first element in the matched set

html(text) sets passed html fragment of all matched elements
get or set all text content
text()

concatenates and returns all text content of wrapped elements
add content to the end of existing content
$('p').append('<b>some text</b>')

appends html fragment
move all elements in selected set to a specific place
appendTo(target)

moves wrapped set to the end of content of the specified target
move an element (becomes child of) target before or after target

move an element before or after target element

insert content in front of or after targets' content

insert content in front of or after selection
prependTo(target)
appendTo(target)

insertBefore(target)
insertAfter(target)

prepend(sometext) and append(sometext)
before(sometext) and after(sometext)
wrap an element in a wrapper
wrap(wrapper)
wraps each element with a wrapper

wrapAll(wrapper)
wraps the elements of the matched set as a unit

e.g.
$("a.surprise").wrap(
<div class='hello'></div>");
wrap contents of selected elements
wrapInner(wrapper)
remove elements
remove()
empty DOM elements of contents
empty()
replace
$('div.elementToReplace').after(
"<p>I'm replacing the div</p>")
.remove();