Home > Others

Describes the basic selector and hierarchical selector of powerful jQuery selectors.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JQuery allows developers to use almost all selectors from CSS1 to CSS3, as well as jQuery's original advanced and complex selectors. You can also add plug-ins to support the XPath selector. You can even write your own selector (that is, the selector plug-in. refer to the previous article: jQuery plug-in is so simple-the mechanism and practice of jQuery plug-in ). JQuery's powerful selector makes it easy to use and attracts a large number of developers. This article will introduce the powerful jQuery selector.
JQuery selector type
JQuery selectors are mainly divided into four types:
1. Basic Selector
2. Hierarchical Selector
3. Filter Selector
4. Form Selector
Because there are many filter selectors, this article only introduces the first two types. The next article will introduce the last two types.
A little preparation
To let everyone see the specific effect, create an Example page that contains various <div> and <span> elements, then use the jQuery selector to match elements and adjust their styles.
Sample Page code: Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Title> Demo </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
Div, span, p {
Width: 140px;
Height: 140px;
Margin: 5px;
Background: # aaa;
Border: #000 1px solid;
Float: left;
Font-size: 17px;
}
Div. mini {
Width: 55px;
Height: 55px;
Background-color: # aaa;
Font-size: 12px;
}
Div. hide {
Display: none;
}
</Style>
</Head>
<Body>
<Div class = "one" id = "one">
Div with id one and class one
<Div class = "mini"> the class is mini </div>
</Div>
<Div class = "one" id = "two" title = "test">
Div with id two, class one, and title test
<Div class = "mini" title = "other"> the class is mini and the title is other </div>
<Div class = "mini" title = "test"> the class is mini and the title is test </div>
</Div>
<Div class = "one">
<Div class = "mini"> the class is mini </div>
<Div class = "mini"> the class is mini </div>
<Div class = "mini"> the class is mini </div>
<Div class = "mini"> </div>
</Div>
<Div class = "one">
<Div class = "mini"> the class is mini </div>
<Div class = "mini"> the class is mini </div>
<Div class = "mini"> the class is mini </div>
<Div class = "mini" title = "tesst"> the class is mini and the title is tesst </div>
</Div>
<Div style = "display: none" class = "none">
Div whose display is none
</Div>
<Div class = "hide"> class is the div of hide </div>
<Div>
Div whose type contains input is hidden
<Input type = "hidden" size = "8"/>
</Div>
<Span id = "move"> the span element of the animation being executed </span>
</Body>
</Html>

Basic Selector
The basic selector is the most commonly used selector in jQuery and the simplest selector. it searches for DOM elements by element id, class, and tag signature. In a webpage, each id name can only be used once, and class can be used repeatedly.

The basic selector rules are as follows:

Basic Selector

Selector Description Return Example
# Id Matches an element based on the given id. Single element $ ("# Test") Select the element whose id is test
. Class Matches the element based on the given class name. Set Element $ (". Test") select all elements whose class is test
Element Match an element based on the given element name Set Element $ ("P") select all <p> Elements
* Match All elements Set Element $ ("*") Select all elements
Selector1, selector2,
..., SelectorN		 Match the element of each Selector
Returns the result after merging the elements.		 Set Element $ ("Div, span, p. myClass") select all <div>,
<Span> and <p>
A group of tags

Online demonstration http://demo.jb51.net/js/2012/jquery_demo/jquerybasic selector .html
Level Selector
If you want to obtain specific elements through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements, and sibling elements, the hierarchy selector is a good choice.

The hierarchy selector rules are as follows:

Level Selector

Selector Description Return Example
$ ("Ancestor descendant ")

Select All

Descendant (descendant) Element

 Set Element

$ ("Div span") Select

Some <span> Elements
$ ("Parent> child ") Select the child element under the parent Element Set Element

$ ("Div> span") Select <div> element

The element name is a child element of <span>.
$ ("Prev + next ") Select the next element next to the prev Element Set Element

$ (". One + div") Select

Next <div> sibling Element
$ ("Prev ~ Siblings ") Select all siblings elements after the prev Element Set Element

$ ("# Two ~ Div ") Select the element whose id is two

All <div> sibling Elements

Online demonstration http://demo.jb51.net/js/2012/jquery_demo/jquery# .html
In the hierarchy selector, 1st and 2nd are commonly used. The latter two are less likely to be used because they can be replaced by simpler methods in jQuery.

You can use the next () method to replace the $ ("prev + next") selector, that is, $ (". one + div ") and $ (". one "). next ("div") is equivalent.

You can use the nextAll () method to replace $ ("prev ~ Siblings ") selector, that is, $ (". one ~ Div ") is equivalent to $ (". one "). nextAll (" div.

Summary
This article mainly introduces the basic selector and hierarchy selector in the jQuery selector, and provides sample code for each type of selector, hoping to help you. I am also a beginner of jQuery. You are welcome to make a brick.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
midi selector kubernetes selector midi selector wand selector selector resume tablet selector xpath selector

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More