Similar
but Different JQuery Selectors
While working with JQuery, there could be some selectors
and manipulation methods which seems having same functionality but they are
also having some difference which I described below:
1. 1. $(“div”).children()
and $(“div > p”)
Similarity:
Both select children of
paragraph <p>.
Difference:
$(“div”).children(“p”)
selects only first level elements of type <p> while $(“div > p”) selects all
paragraphs including first level and sub levels.
$(“div”).children()
can
be used to select multiple types of child elements unlike $(“div > p”). e.g. $(“div”).children(“p,
span, div”).
2. 2. $(“div”).children()
and $(“div”).contents()
Similarity:
Both select children of specified
element.
Difference:
.children()
selects element nodes only but .contents()
also selects text nodes written inside elements.
3. 3. :eq and .eq()
Similarity:
Both selects the elements placed at
specified index value.
Difference:
.eq()
accepts negative value while :eq() does not. Providing negative value say -1 to
.eq() selects the last element.
4. 4. .closest() and .parents()
Similarity:
Both traverse up to the DOM
tree.
Difference:
.closest()
travels up to the tree until it finds the matched element
while .parents() travels up to the
root element.
.closest()
return zero or one element. While .parents() returns zero, one or more than one elements.
5. 5. .find() and .filter()
Similarity:
Both
refine the selection of selected elements.
Difference:
.find() selects the descendents of selected elements while .filter()
further refine the selection of selected elements in the result by means of
applied JQuery selector expression or callback functions.
6. 6. .find() and .children()
Similarity:
Both refine the selection of their child
elements.
Difference:
.find() travels up to all
level down while .children() travels
only one level down.
7. 7. .parent() and .parents()
Similarity:
Both search for its parent
elements.
Difference:
.parent()
travels
only single level up the DOM tree while .parents()
travels up to the root of DOM tree.