JQuery Interview Questions Part - 6
Q 1. What is JQuery
Traversing?
Ans 1. JQuery traversing is used to find HTML elements based on their relation
to other elements. Starting with one selection, reach the desired element.
Example –
<div>
<ul>
<li>
JQuery
</li>
<li>
Javascript
</li>
</ul>
</div>
<ul>
<li>
JQuery
</li>
<li>
Javascript
</li>
</ul>
</div>
•
The <div> element is the parent of
<ul>, and an ancestor of everything inside of it
•
The <ul> element is the parent of both
<li> elements, and a child of <div>
•
The two <li> elements are siblings, children of <ul> and descendants of
<div>
Q 2. What is JQuery
Ancestor?
Ans 2. An
ancestor is a parent, grandparent, great-grandparent, and so on. With JQuery
you can traverse up the DOM tree to find ancestors of an element.
Q 3. How to use JQuery parent
method?
Ans 3. The
parent JQuery method returns the immediate parent
element of the selected element.
SYNTAX –
$(selector).parent()
EXAMPLE –
<body>
<div>
<p>
Hello
</p>
</div>
</body>
$(“p”).parent()
The above code will return “<div>” element
as it is the immediate parent of the “<p>” element.
Q 4. How to use JQuery parents
method?
Ans 4. The
parents JQuery method returns all the ancestors of the
selected HTML element.
SYNTAX –
$(selector).parents()
EXAMPLE –
<body>
<div>
<p>
Hello
</p>
</div>
</body>
$(“p”).parents()
The above code will return “<div>” and
“<body>” elements as they are the ancestors of “<p>” element.
Q 5. How to use JQuery
parentsUntil method?
Ans 5. The
parentsUnitl JQuery method returns all ancestor elements
between two given arguments.
SYNTAX –
$(selector).parents()
EXAMPLE –
<body>
<div>
<table>
<tr>
<td>
Hello
</td>
</tr>
</table>
</div>
</body>
$(“tr”).parentsUntil(“body”)
The above code will return “<div>” and
“<table>” elements as they lie between “<tr>” and “<body>”
elements.
Q 6. What is JQuery
Descendent?
Ans 6. A
descendant is a child, grandchild, great-grandchild, and soon. With JQuery you can
traverse down the DOM tree to find descendants of an element.
Q 7. How to use JQuery
children method?
Ans 7. The
children JQuery method returns all immediate children of
the selected element.
SYNTAX –
$(selector).children()
EXAMPLE –
<body>
<div>
<table>
<tr>
<td>
Hello
</td>
</tr>
<tr>
<td>
Tutorial
</td>
</tr>
</table>
</div>
</body>
$(“table”).children()
The above code will return two “<tr>”
elements that are the immediate children of
“<table>” element.
Q 8. How to use JQuery find
method?
Ans 8. The
find JQuery method returns descendant elements of the selected
element.
SYNTAX –
$(selector).find()
EXAMPLE –
<body>
<div>
<table>
<tr>
<td>
Hello
</td>
</tr>
<tr>
<td>
Tutorial
</td>
</tr>
</table>
</div>
</body>
$(“table”).find(“td”)
The above code will return two “<td>”
elements that are the descendents of
“<table>” element.
Q 9. How to use JQuery
siblings method?
Ans 9. The
siblings JQuery method returns all siblings elements of
the selected element.
SYNTAX –
$(selector).siblings()
EXAMPLE –
<body>
<div>
<p>
JQuery
</p>
<table>
<tr>
<td>
Hello
</td>
</tr>
<tr>
<td>
Tutorial
</td>
</tr>
</table>
<input
type=”text”>
</input>
</div>
</body>
$(“table”).siblings()
The above code will return “<p>” and
“<input>” elements that are the siblings of “<table>” element.
Q 10. How to use JQuery next
method?
Ans 10. The
next JQuery method returns the next sibling element of the selected element.
SYNTAX –
$(selector).next()
EXAMPLE –
<body>
<div>
<table>
<tr>
<td>
Hello
</td>
</tr>
<tr>
<td>
Tutorial
</td>
</tr>
</table>
<p>
JQuery
</p>
<input
type=”text”>
</input>
</div>
</body>
$(“table”).next()
The above code will return “<p>” element
that is the next sibling of
“<table>” element.
Q 11. How to use JQuery
nextAll method?
Ans 11. The
nextAll JQuery method returns all next sibling elements
of the selected element.
SYNTAX –
$(selector).nextAll()
EXAMPLE –
<body>
<div>
<table>
<tr>
<td>
Hello
</td>
</tr>
<tr>
<td>
Tutorial
</td>
</tr>
</table>
<p>
JQuery
</p>
<input
type=”text”>
</input>
</div>
</body>
$(“table”).nextAll()
The above code will return “<p>” and
“input” elements that are the next siblings of
“<table>” element.
Q 12. How to use JQuery
nextUntil method?
Ans 12. The nextUntil
JQuery method returns all next sibling elements between two
given arguments
SYNTAX –
$(selector).nextUntil()
EXAMPLE –
<body>
<div>
<table>
<tr>
<td>
Hello
</td>
</tr>
<tr>
<td>
Tutorial
</td>
</tr>
</table>
<p>
JQuery
</p>
<input
type=”text”>
</input>
</div>
</body>
$(“table”).nextUntil(“input”)
The above code will return “<p>” element
that is the next sibling of
“<table>” element that lies between “<table>” and
“<input>” elements.
Q 13. How to use JQuery
prev, prevAll and prevUntil methods?
Ans 13. These methods can be used for previous sibling elements just like next, nextAll
and nextUntil are used for next sibling elements.
Q 14. How to use JQuery
first method?
Ans 14. The
first JQuery method returns the first element of the selected
elements.
SYNTAX –
$(selector).first()
EXAMPLE –
<body>
<p>
JQuery
</p>
<p>
Tutorial
</p>
<p>
Video
</p>
</body>
$(“p”).first()
The above code will return “<p>” element having
text – “JQuery” as it is the first paragraph element.
Q 15. How to use JQuery last
method?
Ans 15. The
last JQuery method returns the last element of the selected elements.
SYNTAX –
$(selector).last()
EXAMPLE –
<body>
<p>
JQuery
</p>
<p>
Tutorial
</p>
<p>
Video
</p>
</body>
$(“p”).last()
The above code will return “<p>” element
having text – “Video” as it is the last paragraph element
Q 16. How to use JQuery eq
method?
Ans 16. The
eq JQuery method returns an element with a specific index number of the
selected elements.
SYNTAX –
$(selector).eq(Index_Number)
EXAMPLE –
<body>
<p>
JQuery
</p>
<p>
Tutorial
</p>
<p>
Video
</p>
</body>
$(“p”).eq(1)
The above code will return “<p>” element
having text – “Tutorial” as it is at the index
- “1”
Q 17. How to use JQuery
filter method?
Ans 17. The filter
JQuery method lets you select elements matching specific
criteria.
SYNTAX –
$(selector).filter(Criteria)
EXAMPLE –
<body>
<p
id=”id1”>
JQuery
</p>
<p
id=”id2”>
Tutorial
</p>
<p id=”id3”>
Video
</p>
</body>
$(“p”).filter(“#id2”)
The above code will return “<p>” element
having text – “Tutorial” as it has the id – “id2”.
