JQuery Study Notes Selector Six_jquery

Copy code The code is as follows:

Reset

< ;li>li1

• li2


• li3


• li4



• li6

• li7

< /ul>
Set the background color of the even-indexed child element of ul1｜
Set the background color of the odd-index child element of ul1｜
Set the background color of the head child element of ul1｜
Set the background color of the tail element of ul1｜
Set the background color of the only child element in all ul

1.$("ParentSelector ChildTagName:nth-child(...)") Note - The following abbreviation is: nth-child
Description: Get the child element set of the element set selected by ParentSelector for index filtering. For example, after clicking aNth1 in the example, the ID is The li sub-element of the ul1 element performs even index (even) selection ($("#ul1 li:nth-child(even)")). The keyword even should be familiar to you. It was mentioned in Chapter 3. If you are still unclear, you can go to Chapter 3 and take a look before continuing^^. Of course, you can also use odd here, but it is a little different from Chapter 3. In Chapter 3, the index starts from 0, but here The index should start from 1. I feel that the design is not very good - -! There is no standard. I don’t know if it was an oversight during the design. This method also has a very flexible usage. Just like in the aNth2 click event in the example, the $("#ul1 li:nth-child(2n 1)") method is used to complete a similar $("#ul1 li:nth- child(odd)") function, as for 2n 1, I don’t need to explain it. It is often used in junior high school mathematics. If you really don’t understand, please leave a comment - -! This method can also follow a specific index such as "2", but remember, the index here starts from 1! !
Return value: Array(Element);
2.:first-child
Description: Get the head element of the selected element collection. The writing here is simple, you should be able to understand it. If you really can’t understand it based on the examples, please post it - -!
Return value: Array(Element);
3.:last-child
Description: Get the last element of the selected element collection.
Return value: Array(Element);
4.:only-child
Description: Get elements without sibling nodes. For example, in the example, the second ul element has only one li child element, so $( "ul li:only-child") method only obtains li7.
Return value: Array(Element);