Reading...
Play button
Play button
Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
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(); |
