Mar 3, 2014

jQuery DOM Navigation, Manipulation


DOM Navigation

children() Gets the children of the selected elements

closest('selector') Navigates through the ancestors of each of the selected elements to find the first
instance of an element that matches the specified selector

filter('selector') Reduces the selected elements to those that match the specified selector

first('selector') Navigates through the descendants of the selected elements and locates all those
elements that match the specified selector

next() Gets the sibling elements that immediately follow the selected elements

prev() Gets the sibling elements that immediately precede the selected elements

parent() Returns the immediate parent of the selected elements

sibilings() Returns the siblings of the selected elements

e.g:
$(document).ready(function () {
$('table').find("td[class]").parent().filter(":odd").addClass("highlight");
});

 -------------------------------------------------------------------------------------------------------------

DOM Manipulation

before('new')after('new') Inserts the element new either before or after the selected elements

insertBefore()insertAfter() As for before and after, but the order of the new element and the selector
is reversed, and these functions return the newly created elements

prepend('new')append('new') Inserts the element new inside of the selected elements, either as the first or last child

prependTo()appendTo() As for prepend and append, but the order of the new element and the
selector is reversed, and these functions return the newly created elements

empty() Removes all children from the selected elements

remove() Removes the selected elements from the DOM

attr('name', 'val') Sets the attribute name to value val on the selected elements; will create the
attribute if it doesn’t already exist

removeAttr('name') Removes the attribute name from the selected elements





e.g:


$(document).ready(function () {
$('tr').prepend("");
$('').prependTo('tbody td:first-child')
.first().attr("checked", true);
});


95
$(':button').bind("click", function (e) {
$(':radio:checked').closest('tr').remove();
$(':radio').first().attr("checked", true);
});




No comments:

Post a Comment