jquery Basics Tutorial: Selecting Elements (Top)

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.