joechung's posterous

Reference: http://docs.jquery.com/Traversing/add

Use the add function to add more elements to a set of elements.

$("a").add("area").length == $("a, area").length

Reference: http://docs.jquery.com/Traversing/slice

Use the slice method on a jQuery object just like you would use slice [MDC, MSDN] on a JavaScript array.

var first_five_links = $(document.links).slice(0, 5); 
var next_five_links = $(document.links).slice(5, 5); 
var all_links_except_the_first_five = $(document.links).slice(5); 

Reference: http://docs.jquery.com/Traversing/not

Use the not function to return the elements from a jQuery object's elements that do not match a selector.

var not_foos = $(document.links).not(".foo");

The not function returns the opposite of what the filter function returns.

Reference: http://docs.jquery.com/Traversing/map

Use the map function to define a callback that will transform a jQuery object's set of elements into another set of elements, either by adding new elements, deleting an existing element, or updating an existing element.

The callback's context, by default, is the element being transformed.

var map = $(document.links).map(function() { return this; });

Use the callback's first (optional) parameter as a 0-based index.

var evens = $(document.links).map(function(index) {
    return index % 2 == 0 ? this : null; 
}); 

Use the callback's second (optional) parameter as an alias to the element being transformed. This can be handy if your function has another context, i.e., if you are using a classic object-oriented style in your JavaScript objects.

var bars = $(document.links).map(function(index, el) { 
    return $(el).hasClass("bar") ? el : null; 
}); 

Return null from the callback to exclude an element from the new set.

var odds = $(document.links).map(function(index) { 
    return index % 2 == 1 ? this : null; 
});

Return a replacement from the callback to replace an element in the new set.

var replace_evens = $(document.links).map(function(index) { 
    if (index % 2 == 0) {
        var text = $(this).text();
        return $("<span>").text(text).get(0);
    } else {
        return this;
    }
});

Return an array from the callback to insert a new element in the set.

var inject_after_evens = $(document.links).map(function(index) {
    if (index % 2 == 0) {
        var text = $(this).text();
        return [this, $("<span>").text(text).get(0)];
    } else {
        return this;
    }
});

var inject_before_evens = $(document.links).map(function(index) {
    if (index % 2 == 0) {
        var text = $(this).text();
        return [$("<span>").text(text).get(0), this];
    } else {
        return this;
    }
 });

Reference: http://docs.jquery.com/Traversing/is

Use the is function to check if any of a jQuery object's elements matches a selector.

$("div").hasClass("foo") == $("div").is(".foo") 

It works the same as the filter function, except that it returns true or false instead of the elements or elements that match.

Reference: http://docs.jquery.com/Traversing/filter

Use the filter function to return the elements from a jQuery object's set of elements that match a selector.

var notables = $("div").filter(".notable"); 

Use the filter function to filter elements from a jQuery object's set of elements if a callback returns true. The callback's first (optional) parameter is a 0-based index, and its context is the element that may be filtered.

var notables = $("div").filter(function(index) { return 
$(this).hasClass("notable"); }); 

Reference: http://docs.jquery.com/Attributes/val

Use the val function to get the value of a jQuery object's form element.

var first_name = $("input#fname").val(); 
var last_name = $("input#lname").val(); 

Use the val function to set the value of a jQuery object's form elements.

$("input#fname").val("joe"); 
$("input#lname").val("chung"); 

Pass an array to the val function to set the selected status of the options in a jQuery object's multi-select listbox.

$("select#skills").val(["html", "css", "javascript"]); 

Pass an array to the val function to set the checked status ofmultiple checkboxes in a jQuery object's checkbox form elements.

$("input[name='hobbies']").val(["reading", "basketball", "travel"]); 

Reference: http://docs.jquery.com/Attributes/text

Use the text function to get the text for a jQuery object's element.

var text = $("#foo").text(); 

Use the text function to set the text for a jQuery object's elements.

$("#foo").text("jQuery"); 

The text function masks the differences between innerText and textContent. It also enables you to set the text on multiple elements in a single call.

Reference: http://docs.jquery.com/Attributes/html

Use the html function to get the markup for a jQuery object's element.

var html = $("#foo").html();

Use the html function to set the markup for a jQuery object's elements.

$("#foo").html("<a href=\"http://microsoft.com\">Microsoft<\/a>");

References:

• http://docs.jquery.com/Attributes/addClass
• http://docs.jquery.com/Attributes/hasClass
• http://docs.jquery.com/Attributes/removeClass
• http://docs.jquery.com/Attributes/toggleClass

Use the addClass function to add a CSS class to a jQuery object's elements.

$("select").addClass("stylish"); 

Use the hasClass function to check if a jQuery object's element has a CSS class.

var stylish = $("#cities").hasClass("stylish"); 

Use the removeClass function to remove a CSS class from a jQuery object's elements.

$("select").removeClass("stylish"); 

Use the removeClass function without any parameters to remove all CSS classes from a jQuery object's elements.

$("select").removeClass(); 

Use the toggleClass function to toggle a CSS class for a jQuery object's elements. If an element does not have the class, toggleClass will add the class. If an element already has the class, toggleClass will remove the class.

$("select").toggleClass("stylish"); 

Passing true as the second parameter to the toggleClass function is the equivalent of addClass.

$("select").toggleClass("stylish", true); 

Passing false as the second parameter to the toggleClass function is the equivalent of removeClass.

$("select").toggleClass("stylish", false);