jQuery Methods

$(selector/attribute).method().method()...

Transversing

Filtering

• $('div').eq(3).html();
  • Reduce the matched set to single element - gets the html contents (innerHTML) of the fourth div
  
  
• $('div').html("<span class='red'>Hello</span>").filter(".special").css("color","red");
  • Sets the contents of the all div's, then gives color red to the divs that have the class of "special"
  
  
• Also - filter(function returning values you want to keep), is, map(translate a set of jQuery objects to an array), not, slice

Finding

• $('div').css("border","2px solid red").add("p").css("background","yellow");
  • Add to the matched set.
  • divs will have the border and the background, ps will have the background only
  
  
• Also - children, closest, contents, find, next, nextAll, offsetParent, parent, prev, prevAll, siblings

Manipulation

Changing content

• $('#div').html();
  • gets the html contents (innerHTML) of the first
  
  
• $('#third').html("<span class='red'>Hello</span>");
  • Set the html contents of every matched element. (blows away anything there)
  
  
• $('div p.second').text();
  • Get the combined text contents of all matched elements
  
  
• $('p[language]').text("<b>Hello</b>");
  • Set the text element of matched elements (so <b> will actually show the < and >)
  
  

Inserting Inside:

• $('p[language="German"]').append("<strong>Guten Tag</strong>");
  • all p tags with an attribute of language="German" get a bold 'Guten tag' at the end!
  
  
• $('span').appendTo("#nav");
  • Think 'reverse' append()
  • all spans on the page get appended to the id of nav
    • original spans no longer on the page
    • the spans and their text show up at the end of #nav
  
  
• $('body div p').prepend("<b>Hello</b>");
  • Bolded Hello goes in beginning of every p inside of a div on the page
  
  
• $('span').prependTo(".nav");
  • Think 'reverse' prepend()
  • all spans on the page get prepended to anything with the class of nav
    • original spans no longer on the page
    • the spans and their text show up at the beginning of #nav in the order they are encountered in the document
  
  

Inserting Around

• $('p:first').wrap("<div></div>"); //or
  $('p:first').wrap("<div><em></em></div>"); //or
  $("p:eq(2)").wrap("document.createElement('div')");
  • Wraps the first 'p' on the page inside of a div tag
  • or inside of a div & an em tag!
  • wraps the 3rd p inside of a div - wrap can take html or dom elements!
  
  
• $("p").wrapAll("<div></div>");//or
  $("p").wrapAll("document.createElement('div')");
  • wraps all p's inside of a div - wrap can take html or dom elements!
  • If you had a p, then a div, then a p that were siblings (or children of each other), will take the p's out and put together at whatever level the first p is in!
  
  

Replacing

• $('p').replaceWith("<em>new!</em>");
  • All p's will have been replaced by em tags with new! inside of them
  • all old content GONE - will show how to keep in a bit in class!
  
  
• $("<em>new!</em>").replaceAll('p');
  • replaceWith reversed
  
  

Removing

• $("#select").empty();
  • Removes all child nodes (but not the one I'm selecting)
  
  
• $("#select").remove(); //or
  $("p").remove(":contains('Dan')");
  • Removes the node I'm pointing at and everything inside of it
  • Removes all p tags that contain "Dan"
  
  

Copying

• $("tr:gt(4)").clone().prependTo("#table2");
  • Clone all table rows > 4 and put at beginning of table with id of "table2"
  
  
• $("button").clone(true).prependTo("#container");
  • The true is to clone all event handlers as well...
  
  

CSS

• You are one your own....

Events

• $(document).ready(function(){init()}); //or
  $(function(){init();});
  • Runs when document is loaded (fixed a mistake from last time)
  • You can have as many of these as you want - will be executed in order defined
  • Make SURE all css is included before your scripts (weird WebKit bug I haven't seen, but just go with it!)
  
  

Event Handling:

• $("p").bind("click", function(e){$("span").text("Click happened!( " + e.pageX + ", " + e.pageY + " )");});
  $("p").bind("mouseenter mouseleave", function(){$(this).toggleClass("over");});
  • Binds one or more events to matched elements
  • Also an unbind()
  
  
• $("button").one("click",function(){});
  • Assign a click on a button to run ONCE
  
  
• $("#one").click(function(){$("#two").trigger('click')});
  • When I click on #one, I am also triggering a click on #two
    • If #two had a click on it, it will still run!
  • There is also a triggerHandler() that acts similarily, but does NOT trigger the default browser action
  
  

Live Events:

• $("p").live("click",function(){ });
  • Assigns the event to the selector (p tags in this case)
    • BUT it will assign the event to ALL FUTURE p tags as well
  • There is a .die() to kill it...
  
  

Interaction Helpers:

• $("ol").hover(function(){$(this).addClass('hilite');}, function(){$(this).removeClass('hilite');});
  • first function fires while I'm on it, second when I leave it
  
  
• $("#button").toggle(function(){}, function(){}, ...);
  • will toggle between x functions on click
  
  

Event Helpers:

• They are all here... (check out the docs)
• $("p").click(function(){$(this).slideUp();});
  • ALL p tags will animate when clicked upon