Powerful selector (hierarchy selector) in the basic document of jquery tutorial)

At any time, we should remember that the jQuery object obtained through the jQuery selector is a group of elements at any time.
The JQuery selector has the following features:
Implicit Iteration
(( ).Css ("background-color", "red") adds a red background to the style of each element in this group. JQuery automatically iterates each element, eliminating the need to write code to traverse each element object.

No need to judge whether the object exists
If the DOM element with the id test does not exist on the page, then neither ("background-color", "red") will generate any exception, but document. getElementById ("test "). style. backgroundColor = 'red' will generate an exception for the unfound object.
Although this operation does not produce exceptions, when developing the jQuery plug-in, it is necessary to determine whether the jQuery selector has obtained the element, so that when the plug-in does not get the element normally, you can immediately stop running the plug-in to improve performance and reduce unexpected situations. How to obtain it? Yes.

If ($ ("selector"). length ()> 0 ){
// Indicates that the element has been obtained.
} Else {
// Element not retrieved
}

The above text seems to have little to do with the jQuery hierarchy selector we are talking about today ~~ Indeed, the above is something I think of temporarily, and it feels more practical. So let's talk about it here and let people who don't know much about it solve their doubts.
Next let's take a look at the usage of this jQuery layered selector. In fact, there are only two usage of the jQuery layered selector:

1. $ ("Ancestor descendant"): select the child element after the parent Element
   The Chinese meaning of ancestor is "ancestor", and the Chinese meaning of descendant is "descendant"
   

   $ ("Body div ")	Select All div elements under the body element.
   $ ("Ul li ")	Select All li elements under ul.
   $ ("# Test div ")	Select All div child elements contained in the element with id "test"
   $ ("Div # test div ")	Select All div child elements contained in the div with id "test ".
   $ (". Test div ")	Select All div child elements contained by the element whose class is "test"
   $ ("Span. test div ")	Select All div child elements contained in span whose class is "test"
   $ ("Span. Test. Demo ")	Select all the classes in the span whose class is "test" as the demo element.
   $ (". Test. Demo ")	Select all the classes included in the element whose class is "test" as the demo element.

2. $ ("Parent> child"): select the child element directly following the parent element. What is "directly", that is, the meaning of the first level?
   

   $ ("Body> Div ")	Select all the first-level DIV elements under the body element.
   $ ("Ul> Li ")	Select all level 1 Li elements under ul.
   $ ("# Test> Div ")	Select all the first-level Div sub-elements contained in the element with ID as "test ".
   $ ("Div # test> Div ")	Select all the first-level Div sub-elements contained in the DIV with ID "test ".
   $ (". Test> Div ")	Select all the first-level Div child elements contained by the element whose class is "test ".
   $ ("Span. Test> Div ")	Select all the first-level Div sub-elements contained in SPAN whose class is "test ".
   $ ("Span. Test>. Demo ")	Select all the first-level class demo elements contained in the span whose class is "test ".
   $ (". Test>. Demo ")	Select all the elements whose first class is demo contained in the element whose class is "test ".

3. $ ("Prev + next"): prev and next are two elements of the same level. Select the next element after the prev element.
   $ ("# Demo + img") is the img object after the id is the demo element. if the id is an img object without the same level after the demo element, then this $ ("# demo + img "). length () = 0
4. $ ("Prev ~ Siblings): select the elements filtered by siblings after prev. Note: siblings is a filter.
   $ ("# Demo ~ [Title] ") select all elements with the title attribute after the element whose id is demo. If the element whose id is demo does not have any element with the title attribute, then $ ("# demo ~ [Title] "). length () = 0