jquery find descendant elements children () contents () find ()
The so-called descendant elements are the "child elements" and "grandchildren elements" of an element ... Sun Element, although there is no such statement in the front end, but it is more vivid, so this section uses this statement.
1. The children () method
In jQuery, we can use the children () method to find the "all child elements" or "partial child elements" of the current element. Note that the children () method can only find child elements, not other descendant elements.
<script type="text/javascript">
$(
function
() {
$(
".wrapper"
).hover(
function
() {
$(
this
).children(
".test"
).text(
"www.nanaopearl.com
"
);
},
function
() {
$(
this
).children(
".test"
).text(
"www.nanaopearl.com
"
);
})
})
</script>
Second, the contents () method
Similar to the children () method, the contents () method is also used to find child content, but it can not only get child elements, but also get text nodes and comment nodes. So the reader can think of it as the jQuery implementation of the childNodes attribute in the DOM. The contents () method is rarely used. As a beginner, we can directly ignore this method.
Three, find () method
The find () method is similar to the children () method in that it is used to find the descendant elements of the selected element, but the find () method can find all descendant elements, while the children () method can only find child elements.
<script type="text/javascript">
$(
function
() {
$(
".wrapper"
).hover(
function
() {
$(
this
).find(
".test"
).text(
"www.nanaopearl.com
"
);
},
function
() {
$(
this
).find(
".test"
).text(
"www.nanaopearl.com
"
);
})
})
</script>