Home > Web Front-end > JS Tutorial > A brief analysis of hierarchical selector examples for getting started with jQuery_jquery

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

WBOY
Release: 2016-05-16 15:26:17
Original
1204 people have browsed it

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>

Copy after login

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:

Copy code The code is as follows:
$("#first span").css("color", "red" );

After running, it is found:

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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template