Ethan Liew Technology Blog

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);
});

Selectors

$('[attr]') Selects elements that have an attribute called attr, irrespective of the attribute value

$('[attr]="val"') Selects elements that have an attr attribute whose value is val

$('[attr]!="val"') Selects elements that have an attr attribute whose value is not val

$('[attr]^="val"') Selects elements that have an attr attribute whose value starts with val

$('[attr]~="val"') Selects elements that have an attr attribute whose value contains val

$('[attr]$="val"') Selects elements that have an attr attribute whose value ends with val

$('[attr]|="val"') Selects elements that have an attr attribute whose value is val or starts
with val followed by a hyphen (val-)

e.g:

$(document).ready(function () {
$('td + td').addClass("highlight");
});

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

Filters

:eq(n) Selects the nth item in the selection, using a zero-based index

:even:odd Selects the even-numbered or odd-numbered elements

:first:last Selects the first or last element

:gt(n):lt(n) Selects all the elements whose index relative to their siblings is greater
or less than n

:header Selects all elements that are headers (h1, h2, and so on)

:not(selector) Selects all the elements that do not match the selector

e.g:

$(document).ready(function () {
$('tr:eq(1)').addClass("highlight");
});

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

Content Filters

:contains('text') Selects elements that contain text or whose children contain text

:has('selector') Selects elements that have at least one child element that matches selector

:empty Selects elements that have no child elements

:parent Selects elements that have at least one other element

:first-child Selects elements that are the first child of their parent

:last-child Selects elements that are the last child of their parent

:nth-child(n) Selects elements that are the nth child of their parent, using a one-based index

:only-child Selects elements that are the only child of their parent

e.g:

$(document).ready(function () {
$('tr:has(td:contains("Kili"))').addClass("highlight");
});

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

Form Filters

:button Selects button elements and input elements whose type is button

:checkbox Selects check boxes

:checked Selects check boxes and radio button elements that are checked

:disabled:enabled Selects items that are enabled or disabled, respectively

:input Selects input elements

:password Selects password elements

:radio Selects radio buttons

:reset Selects input elements whose type is reset

:selected Selects option elements that are selected

:submit Selects input elements whose type is submit

:text Selects input elements whose type is text

e.g:

$(document).ready(function () {
$(':button').addClass("highlight");
});

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

Mar 11, 2014

Mar 10, 2014

Mar 8, 2014

Mar 7, 2014

Mar 6, 2014

Mar 5, 2014

Mar 4, 2014

Mar 3, 2014

Mar 2, 2014

Mar 1, 2014