Home > Web Front-end > JS Tutorial > Detailed explanation of hierarchical filter selector of jquery selector_jquery

Detailed explanation of hierarchical filter selector of jquery selector_jquery

WBOY
Release: 2016-05-16 17:02:19
Original
1258 people have browsed it

Copy code The code is as follows:

$("ancestor descendant"): After selecting the parent element All child elements
$("parent > child"): All direct child elements after selecting the parent element. What is "direct", which means the first level
$("prev next") : prev and next are two elements of the same level. Select the next element
$("prev ~ siblings") after the prev element: Select the element after prev that is filtered according to siblings. Note: siblings are filters

, the last two are rarely used, and are usually replaced by other selectors
Copy code The code is as follows:

$("prev next") is equivalent to next()
$("prev ~ siblings") is equivalent to nextAll()

Example:
Copy code The code is as follows:



Copy code The code is as follows:



The P element in the first DIV.



The first single P element.



The SPAN element inside the DIV.

The P element in the second DIV.


                                                                                              







                                                                     ;

AC3

The second single P element.


Single SPAN element.





Copy code The code is as follows:var s = $("div p").addClass("highlight"); //Select all p elements after div The result is: p1, p3, p4





Copy code The code is as follows:var s = $( "div > p").addClass("highlight"); //Select all first-level p elements after div. The result is: p1, p3. p4 will not be selected because p4 is not a direct element of div





Copy code The code is as follows: var s = $("div p").addClass("highlight"); //Select the p element immediately behind the div. The result is: p2. p5 will not be selected because p5 is not adjacent to the div




Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template