Details about the powerful basic selector and hierarchical selector of jQuery Selector

JQuery has been shocked by its powerful selector since it came into contact with jQuery. This is exactly the advantage of jQuery. jQuery allows developers to use almost all the selectors from CSS1 to CSS3, and jQuery's advanced and complex selector. 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 results, create an Example page that contains various

And the elements, and then use the jQuery selector to match the elements and adjust their styles.
Sample Page code:

The Code is as follows:

Demo

P where id is one and class is one

The class is mini.

P whose id is two, class is one, and title is test

The class is mini and the title is other.

The class is mini and the title is test.

The class is mini.

The class is mini.

The class is mini.

The class is mini.

The class is mini.

The class is mini.

The class is mini and the title is tesst.

Display of style is none p

P whose class is hide

P whose type contains input is hidden

Span element of the animation being executed

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 Element
*	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	$ ("P, span, p. myClass") Select All , And 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	$ ("P span") Select In Some elements
$ ("Parent> child ")	Select the child element under the parent Element	Set Element	$ ("P> span") Select Element The element name is a child element.
$ ("Prev + next ")	Select the next element next to the prev Element	Set Element	$ (". One + p") Select Next Sibling Element
$ ("Prev ~ Siblings ")	Select all siblings elements after the prev Element	Set Element	$ ("# Two ~ P ") Select the element whose id is two All Sibling Element

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 + p ") and $ (". one "). next ("p") is equivalent.

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

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.