Common methods of jQuery selectors (node selection)

1. Find all matching elements find()

$('ul').find('li').addClass('tmpExample');

 Find all li elements under the ul element in the page, and add the tmpExample style to the found li elements.

2. Find siblings() of the specified element's siblings

$('li#tmpCarrot').slblings().addClass('tmpExample');

Find all sibling nodes of the li element whose ID is tmpCarrot, and add the tmpExample style to the found sibling nodes.

A selector can be added to the parentheses of slblings() to find siblings of the specified condition. For example: slblings('.tmpClass'), is to find the sibling node whose class is tmpClass.

3. Find the next sibling node of the specified node next()

$('li#tmpBroccoli').next().addClass('tmpExample');

 Find the next sibling of the li node with ID tmpBroccoli. And add the tmpExample style to the found sibling nodes.

4. Find all sibling nodes behind the specified node nextAll()

$('li#tmpBroccoli').nextAll().addClass('tmpExample');

 Find all sibling nodes behind the li node with ID tmpBroccoli. And add the tmpExample style to the found sibling nodes.

5. Find the previous sibling node of the specified node prev()

$('li#tmpBroccoli').prev().addClass('tmpExample');

 Find the previous sibling of the li node with ID tmpBroccoli. And add the tmpExample style to the found sibling nodes.

6. Find all the sibling nodes in front of the specified node prevAll()

$('li#tmpBroccoli').prevAll().addClass('tmpExample');

 Find all previous siblings of the li node with ID tmpBroccoli. And add the tmpExample style to the found sibling nodes.

You can add selectors in the parentheses of prevAll() to find sibling nodes of the specified condition. For example: prevAll('li.tmpClass'), which is to find all sibling nodes whose class is tmClass in front of the current node.

7. Find all eligible parent nodes parents()

$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample');

 Find all the div parent nodes whose ID is tmpSelection of the li node whose ID is tmpCarrot. And add the tmpExample style to the found node.

8. Find the parent node parent()

$('li#tmpCarrot').parent().addClass('tmpExample');

Find the parent node of the li node whose ID is tmpCarrot. And add the tmpExample style to the found node.

9. Find child nodes children()

$('div.tmpList').children('h4').addClass('tmpExample');

 Find the h4 tag in the child node below the div whose class is tmplist. And add the tmpExample style to the found node.

10. Inverse not() in the found node set

$('ul li').not('li.tmpVegetables').addClass('tmpExample');

In the found li set, except for the nodes whose class is tmpVegetables, a tmpExample style is added.

11. Select the fragment slice() in the node collection

$('ul li').slice(1,4).addClass('tmpExample');

 In the li set found, select the 1st (counting from 0, the first is actually the second) node, 4 nodes backward, and add the tmpExample style to these 4 nodes.

12. Add a node add() to the result set of the lookup

$ ('ul # tmpAnimals li'). add ('li # tmpBrocoli, li # tmpPepper'). addClass ('tmpExample');

 Add the li node set under the ul node with the id of tmpAnimals, add the li node with the id of tmpBrocoli and the li node with the id of tmpPepper. And add the tmpExample style to all li nodes in the combined set.

13. Select the specified element in the result set eq()

$('ul li').eq(10).addClass('tmpExample');

 In the li collection under the page ul, add the tmpExample style to the tenth element.

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326718321&siteId=291194637