A brief analysis of hierarchical selector examples for getting started with jQuery_jquery

This article analyzes the use of hierarchical selectors in getting started with jQuery. Share it with everyone for your reference, the details are as follows:

Here is a brief introduction to the difference between ancestor descendant and parent>child in jQuery hierarchical selector.

parent>child: Matches all child elements based on the parent element. The hierarchical relationship is a parent-child relationship.

ancestor descendant: Matches all descendant elements based on ancestor elements. The hierarchical relationship is ancestors and descendants.

Write code and test it to more clearly distinguish the difference between the two:

<div id="first">1
  <span>1.1 </span>
  <span>1.2 </span>
  <div>1.3
    <span>1.3.1 </span>
  </div>
 </div>
<script type="text/javascript" src="jquery-1.4.1.min.js">
</script>
<script type="text/javascript">
  $(function () {
    $("#first>span").css("color", "red");
  });
</script>

Found after running:

The text color of 1.3.1 is not red because parent>child is a parent-child relationship;

If you change the selector to:

The text color of 1.3.1 is also red, because the ancestor descendant hierarchical relationship is ancestors and descendants. That is, all span tags under the element with the id "first", whether they are children or grandchildren, will turn red.

I hope this article will be helpful to everyone in jQuery programming.