the hierarchical selectors in jquery are: 1. descendant selector, syntax "$("m n")"; 2. "$("m>n")"; 3 , sibling selectors, the is "$("m~n")"; 4. adjacent n")". < p>< blockquote>
< p>
the operating environment of this tutorial: windows7 system, jquery1.10.2 version, dell g3 computer. selector a basic that selects elements through relationship between elements. hierarchical are also very important actual development. common relationships include: father and son, descendants, brothers, neighbors.
in jquery, there 4 types as shown table below.
jquery selector< caption> selector< th> description< tr> m n< td> m>n< the first-level elements)< m~n< >sibling all sibling after element< >adjacent adjacent (next) to (m tbody> table> addition, we need pay attention following points:
$("m n")< code> you can use $(m).find(n) instead; li>
$("m>n")< $(m).children(n)
$("m~n")< $(m).nextall(n) $(m).next(n) instead. ul>we will introduce four methods find( ), children( nextall( next( ) detail later, but you take brief look here.
descendant selector< span>< strong><
descendant used select certain type element, including child other .
syntax: p>
$("m pre>copy login< div>< div>"m element" "n separated by spaces, indicating selected (that is, elements). p>
example: >
$(function () { $("#first p").css("color","red"); }) < script> head>子元素<子元素的子元素< div> body> html>< div>
the program running effect figure 1:
$("#first p")< means selecting p withid=""second"." therefore, both be selected. p>children p>
children sub-element element. although similar, they have obvious differences. p>
(including elements, grandchild etc.); li>
within (only sub-elements). li>< ul>
syntax: >$("m>n")< use
>< child n. $("#first>p").css("color","red"); preview 2: p>##$("#first>p")
under code>id=""first"." if compare example example, clearly see only does not include code>< p>sibling selectorsibling behind (excluding front).
< p>syntax:
$("m~n")<~
"m element" "n p>example: $(function() $("#second~p").css("color", "red"); p>the execution result 3: p>##$("#second~p" )remember, subsequent preceding
< p>adjacent selectoradjacent an "adjacent" front) similar significant p>
< >the "all" element;
< li>the syntax: ul>
$("m+n")<code>example: $("#second+p").css("color", 4: >##$("#second p")
example: code>- 第1个元素<
- 第2个元素<
- 第3个元素<
- 第4个元素<
- 第5个元素< div>the 5. >$("li li")< uses which "select li element". since last has no next for
$("li li").css("border-top","2px red")
achieve adding border twoRelated labels：source：php.cnPrevious article：What is the usage of output in html5 Next article：How many types of selectors do jquery have?Statement of this WebsiteThe 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.cnLatest Articles by Author
- About us Disclaimer Sitemap
- php.cn：Public welfare online PHP training，Help PHP learners grow quickly！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
