Home > Developer > JavaScript
Selector
From the very beginning, the selector like Jquery reminds me of the CSS selector, which is exactly the same. I personally think the CSS selector syntax is quite classic, therefore, Jquery has no doubt about using CSS for reference.
Let's review the Jquery selector.
Among them, h1 is the selector, color: red and background: # d00 and Declaration. The combination of the two is also called declaration block in {}; color and background are called attributes; red and # d00 are called values.
The selector category can be divided into the following categories:
Tag selector: p {CSS rules}
Id selector: # ID {CSS rules}
Class selector:. Class {CSS rules}
Group selector: h1, h2, h3, h4, h5, h6 {CSS rules}
Descendant selector: div p {CSS rules}
Wildcard selector: * {CSS rules}
Pseudo class selector: a: link, a: visited {CSS rules}
In addition, there are many selector, attribute selector, partial attribute selector, adjacent sibling selector, and subselector that are not commonly used. You can take part in the CSS authority manual or http://www.w3.org/tr/css2/selector.html.
Correspondingly, understanding $ ("# ID") in Jquery is not difficult.
In Jquery, the basic selector includes *, class, element, id, and the group method selector1, selector2 ,...
Check the comprehensive instance.
<Style type = "text/css">. normalStyle {}{ background: # C3D9FF ;}. alterStyle {}{ background: # DDF8CC ;}. h {}{ background: # fcc; border: solid 1px # d00 ;}. button {}{ background: # FAFAA0; border: solid 1px #996699; padding: 4px ;} </style> </pead> <body> <ul> <li> Option 1 </li> <li class = "alter"> Option 2 </li> <li> option 3 </li> <li class = "alter"> Option 4 </li> </ul> Title 1 title 2 Title 3 <button id = "btn"> button </button>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
2. Hierarchical Selector
Needless to say, the hierarchy selector idea comes from CSS; it actually expands a little
$ ("Div span") // select all <span> elements in <div>
$ ("Div> span") // select an element named <span> under <div>.
$ ('Prev + next') // select the next element next to the prev Element
$ ('Prev ~ Siblings ') // select all the sibling elements after the prev Element
Example:
Copy codeThe Code is as follows:
$ (Function (){
$ ("Ul li" ).css ("color", "# f00 ");
$ ("Div> span" ).css ("color", "#008000 ");
$ ("Div + span" ).css ("color", "# d00 ");
$ ("Div ~ Span "2.16.css (" background "," # ffc ");
});
</Script>
</Head>
<Body>
<Div>
<Span> text 1 </span>
</Div>
<Span> text 2 </span>
<Span> Text 3 </span>
<Ul>
<Li> Option 1 </li>
<Li> Option 2 </li>
<Li> select 3 </li>
</Ul>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
