one of the most powerful features of jquery is its ability to simplify the task of selecting elements in the DOM, where the object network in the DOM is somewhat similar to that of a family tree, and when we refer to the relationships between elements in the network, we use terms such as parent elements, child elements, and so on. With a simple example, you can help us understand the tree structure of each element of the document:
<title>the title</title>
<body>
<div>
<p>this is a paragraph.</p>
Span style= "color: #339966;" ><p>this is another paragraph.</p>
<p> This is yet another paragraph.</p>
</div>
</body>
Here,ancestor element of all other elements, in other words, all other elements are descendants of child elements of parent element Except as an ancestor of peer element of other <p> elements
Use the $ () function
The collection of results obtained through the various selectors and methods of jquery is wrapped in a jquery object , so you can easily bind events to jquery objects, add beautiful effects, You can also concatenating multiple modifications or effects together through a jquery object. To create a jquery object, use the $ () function. This function takes a CSS selector as a parameter, acts as a factory, and returns a JQuery object that contains the corresponding elements in the page. All selectors that can be used in a style sheet can be passed to this function, and then we can apply the jquery method to the set of matching elements.
There are three basic selectors (and, of course, other), tag names ,IDs , and classes . These selectors can be used alone or in combination with other selectors. When the method is concatenating to the $ () factory function, the elements wrapped in the JQuery object are automatically and implicitly iterated through. In other words, this avoids explicit iterations such as using a For loop (an iteration that is very common in DOM scripting)
Let's take a look at an example
jquery Basics Tutorial: Selecting Elements (Top)