25 Sep Tips: JQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
All examples will use the following code:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<ul class=“one”>
<li class=“A”>A</li>
<li class=“B”>B</li>
<ul class=“two”>
<li class=“I”>I</li>
<li class=“II”>II</li>
<ul class=“three”>
<li class=“a”>a</li>
<li class=“b”>b</li>
<li class=“c”>c</li>
</ul>
</li>
<li class=“III”>III</li>
</ul>
</li>
<li class=“C”>C</li>
</ul>
|
.GET
.get retrieves the DOM elements matched by the jQuery object.
.INDEX
.index searches for a given element from among the matched elements.
.TOARRAY
.toarray retrieves all the elements contained in the jQuery set, as an array.
.FIND
.find moves down the DOM tree and finds all matching elements. The element itself is not included in the search.
|
1
|
$(“li.B”).find(“li”).css(“opacity”, “0.5”);
|
would move down the DOM tree and target the following li: I, II, a, b, c, III. .find does not include the targeted element, so B would not be included.
.CHILDREN
.children functions the same as .find, but only moves one level down the DOM tree and targets all children. Like .find, the element itself is not included.
|
1
|
$(“li.B”).children(“li”).css(“opacity”, “0.5”);
|
would target only I, II, III, as those are the li one level immediately down the DOM tree.
.CLOSEST
.closest moves up the DOM tree, including the element itself, until it finds a matching element.
|
1
|
$(“li.B”).closest(“li”).css(“opacity”, “0.5”);
|
would target the li with class B, since .closest begins with the element itself.
|
1
|
$(“li.B”).closest(“ul”).css(“opacity”, “0.5”);
|
would move up the DOM tree and target the ul with class one.
.PARENT
.parent also moves up the DOM tree a single level and targets the parent element. The element itself is not included.
|
1
|
$(“li.II”).parent().css(“opacity”, “0.5”);
|
would target the parent ul with class two.
.PARENTS
.parents moves up the DOM tree and targets all parent elements. The element itself is not included.
|
1
|
$(“li.II”).parents().css(“opacity”, “0.5”);
|
would target all parent elements, all the way up to and including <body> and <html> which don’t appear in the above code example.
.NEXT
.next moves down and targets the immediately following sibling. The element itself is not included.
|
1
|
$(“li.b”).next().css(“opacity”, “0.5”);
|
would target the the li with class c.
.PREV
.prev functions just like .next, but moves up, targeting the immediately preceding sibling. The element itself is not included.
|
1
|
$(“li.b”).prev().css(“opacity”, “0.5”);
|
would target the the li with class a.
.SIBLINGS
.siblings targets moves up and down, targeting all siblings. The element itself is not included.
|
1
|
$(“li.b”).siblings().css(“opacity”, “0.5”);
|
would target both a and c.
.next, .prev and .siblings (and all of the other traversal methods) can also target specific selectors, so something like
|
1
|
$(“li.b”).prev(“.selector”).css(“opacity”, “0.5”);
|
would target the preceding sibling with the class selector.
.FIRST
.first targets the first element in a set.
|
1
|
$(“li”).first().css(“opacity”, “0.5”);
|
would target the first li in the above code.
.LAST
.last s the opposite of .first, and targets the last element in a set.
|
1
|
$(“li”).last().css(“opacity”, “0.5”);
|
would target the last li above.
Also published on Medium.